import { Suspense } from "react"; import type { LoaderFunction, MetaFunction } from "@remix-run/node"; import { Link, useNavigate, useParams } from "@remix-run/react"; import { json, useLoaderData } from "superjson-remix"; 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 { requireLoggedIn } from "~/utils/auth.server"; import newMessageAction from "~/features/messages/actions/messages.$recipient"; export const meta: MetaFunction = ({ params }) => { const recipient = decodeURIComponent(params.recipient ?? ""); return { ...getSeoMeta({ title: `Messages with ${recipient}`, }), }; }; export const action = newMessageAction; type ConversationType = { recipient: string; formattedPhoneNumber: string; messages: Message[]; }; export type ConversationLoaderData = { conversation: ConversationType; }; export const loader: LoaderFunction = async ({ request, params }) => { const { organizations } = await requireLoggedIn(request); const recipient = decodeURIComponent(params.recipient ?? ""); const conversation = await getConversation(recipient); return json({ conversation }); async function getConversation(recipient: string): Promise { const organizationId = organizations[0].id; const phoneNumber = await db.phoneNumber.findUnique({ where: { organizationId_isCurrent: { organizationId, isCurrent: true } }, }); if (!phoneNumber || phoneNumber.isFetchingMessages) { throw new Error("unreachable"); } const formattedPhoneNumber = parsePhoneNumber(recipient).getNumber("international"); const messages = await db.message.findMany({ where: { phoneNumberId: phoneNumber.id, OR: [{ from: recipient }, { to: recipient }], }, orderBy: { sentAt: Prisma.SortOrder.asc }, }); return { recipient, formattedPhoneNumber, messages, }; } }; export default function ConversationPage() { const navigate = useNavigate(); const params = useParams<{ recipient: string }>(); const recipient = decodeURIComponent(params.recipient ?? ""); const { conversation } = useLoaderData(); return (
navigate(-1)}> {conversation?.formattedPhoneNumber ?? recipient}
{/*Loading messages with {recipient}}>*/} {/**/}
); }