shellphone.app/app/routes/__app/messages.$recipient.tsx

49 lines
1.7 KiB
TypeScript
Raw Normal View History

2022-05-22 11:04:26 +00:00
import type { MetaFunction } from "@remix-run/node";
2022-06-05 22:35:09 +00:00
import { Link, useParams } from "@remix-run/react";
2022-05-22 11:04:26 +00:00
import { useLoaderData } from "superjson-remix";
2022-05-19 22:55:02 +00:00
import { IoCall, IoChevronBack } from "react-icons/io5";
2022-05-14 10:22:06 +00:00
import Conversation from "~/features/messages/components/conversation";
import { getSeoMeta } from "~/utils/seo";
2022-05-22 11:04:26 +00:00
import conversationAction from "~/features/messages/actions/messages.$recipient";
import conversationLoader, { type ConversationLoaderData } from "~/features/messages/loaders/messages.$recipient";
2022-05-14 10:22:06 +00:00
export const meta: MetaFunction = ({ params }) => {
const recipient = decodeURIComponent(params.recipient ?? "");
return {
...getSeoMeta({
title: `Messages with ${recipient}`,
}),
};
};
2022-05-22 11:04:26 +00:00
export const action = conversationAction;
2022-05-19 22:55:02 +00:00
2022-05-22 11:04:26 +00:00
export const loader = conversationLoader;
2022-05-14 10:22:06 +00:00
export default function ConversationPage() {
const params = useParams<{ recipient: string }>();
const recipient = decodeURIComponent(params.recipient ?? "");
const { conversation } = useLoaderData<ConversationLoaderData>();
return (
2022-05-19 22:55:02 +00:00
<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">
2022-06-05 22:35:09 +00:00
<Link className="pl-2 cursor-pointer" to="/messages">
2022-05-19 22:55:02 +00:00
<IoChevronBack className="h-6 w-6" />
2022-06-05 22:35:09 +00:00
</Link>
2022-05-19 22:55:02 +00:00
<strong className="absolute right-0 left-0 text-center pointer-events-none">
{conversation?.formattedPhoneNumber ?? recipient}
</strong>
2022-05-19 23:16:38 +00:00
<Link prefetch="intent" to={`/outgoing-call/${encodeURI(recipient)}`} className="pr-2">
2022-05-19 22:55:02 +00:00
<IoCall className="h-6 w-6" />
</Link>
2022-05-14 10:22:06 +00:00
</header>
<Conversation />
2022-05-19 22:55:02 +00:00
</section>
2022-05-14 10:22:06 +00:00
);
}
2022-05-19 23:05:06 +00:00
export const handle = { hideFooter: true };