mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

send message to recipient

Browse Source
This commit is contained in:
m5r
2022-05-20 00:55:02 +02:00
parent 29f405290c
commit 5bf885c060
8 changed files with 147 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/routes/__app.tsx
View File

@ -5,9 +5,9 @@ import { type SessionData, type SessionOrganization, requireLoggedIn } from "~/u
import Footer from "~/features/core/components/footer";
import db from "~/utils/db.server";
export type AppLoaderData = SessionData
export type AppLoaderData = SessionData;
export const loader:LoaderFunction = async ({ request }) => {
export const loader: LoaderFunction = async ({ request }) => {
const user = await requireLoggedIn(request);
const organization = await db.organization.findUnique({
where: { id: user.organizations[0].id },
@ -16,21 +16,27 @@ export const loader:LoaderFunction = async ({ request }) => {
where: { userId: user.id },
select: { role: true },
},
phoneNumbers: {
where: { isCurrent: true },
select: { id: true, number: true },
},
},
});
const currentOrganization: SessionOrganization = {
id: organization!.id,
twilioAccountSid: organization!.twilioAccountSid,
twilioSubAccountSid: organization!.twilioSubAccountSid,
role: organization!.memberships[0].role,
};
const currentPhoneNumber = organization!.phoneNumbers[0];
return json<AppLoaderData>({ ...user, currentOrganization });
}
return json<AppLoaderData>({ ...user, currentOrganization, currentPhoneNumber });
};
export default function __App() {
const hideFooter = false;
const matches = useMatches();
// matches[0].handle
// matches[0].handle.hideFooter
// console.log("matches", matches);
return (
@ -55,9 +61,7 @@ export function CatchBoundary() {
<div className="h-full w-full overflow-hidden fixed bg-gray-100">
<div className="flex flex-col w-full h-full">
<div className="flex flex-col flex-1 w-full overflow-y-auto">
<main className="flex flex-col flex-1 my-0 h-full">
{caught.status}
</main>
<main className="flex flex-col flex-1 my-0 h-full">{caught.status}</main>
</div>
<Footer />
</div>

30
app/routes/__app/messages.$recipient.tsx
View File

@ -1,15 +1,16 @@
import { Suspense } from "react";
import type { LoaderFunction, MetaFunction } from "@remix-run/node";
import { useNavigate, useParams } from "@remix-run/react";
import { Link, useNavigate, useParams } from "@remix-run/react";
import { json, useLoaderData } from "superjson-remix";
import { IoCall, IoChevronBack, IoInformationCircle } from "react-icons/io5";
import { IoCall, IoChevronBack } from "react-icons/io5";
import { parsePhoneNumber } from "awesome-phonenumber";
import { type Message, Prisma } from "@prisma/client";
import Conversation from "~/features/messages/components/conversation";
import { getSeoMeta } from "~/utils/seo";
import db from "~/utils/db.server";
import { parsePhoneNumber } from "awesome-phonenumber";
import { requireLoggedIn } from "~/utils/auth.server";
import newMessageAction from "~/features/messages/actions/messages.$recipient";
export const meta: MetaFunction = ({ params }) => {
const recipient = decodeURIComponent(params.recipient ?? "");
@ -21,6 +22,8 @@ export const meta: MetaFunction = ({ params }) => {
};
};
export const action = newMessageAction;
type ConversationType = {
recipient: string;
formattedPhoneNumber: string;
@ -70,20 +73,21 @@ export default function ConversationPage() {
const { conversation } = useLoaderData<ConversationLoaderData>();
return (
<>
<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={() => navigate(-1)}>
<IoChevronBack className="h-8 w-8" />
</span>
<strong className="col-span-1">{conversation?.formattedPhoneNumber ?? recipient}</strong>
<span className="col-span-1 flex justify-end space-x-4 pr-2">
<IoCall className="h-8 w-8" />
<IoInformationCircle className="h-8 w-8" />
<section className="h-full">
<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b items-center flex justify-between">
<span className="pl-2 cursor-pointer" onClick={() => navigate(-1)}>
<IoChevronBack className="h-6 w-6" />
</span>
<strong className="absolute right-0 left-0 text-center pointer-events-none">
{conversation?.formattedPhoneNumber ?? recipient}
</strong>
<Link to={`/outgoing-call/${encodeURI(recipient)}`} className="pr-2">
<IoCall className="h-6 w-6" />
</Link>
</header>
{/*<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>*/}
<Conversation />
{/*</Suspense>*/}
</>
</section>
);
}