shellphone.app/app/messages/components/conversations-list.tsx

60 lines
1.7 KiB
TypeScript
Raw Normal View History

2021-08-01 03:05:40 +00:00
import { Link, useQuery, Routes } from "blitz";
import { DateTime } from "luxon";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2021-07-31 14:33:18 +00:00
import getConversationsQuery from "../queries/get-conversations";
2021-07-31 14:33:18 +00:00
export default function ConversationsList() {
const conversations = useQuery(getConversationsQuery, {})[0];
2021-07-31 14:33:18 +00:00
if (Object.keys(conversations).length === 0) {
return <div>empty state</div>;
2021-07-31 14:33:18 +00:00
}
return (
<ul className="divide-y">
{Object.entries(conversations).map(([recipient, messages]) => {
const lastMessage = messages[messages.length - 1]!;
2021-07-31 14:33:18 +00:00
return (
<li key={recipient} className="py-2 p-4">
2021-08-01 03:05:40 +00:00
<Link
href={Routes.ConversationPage({
recipient: encodeURIComponent(recipient),
})}
>
2021-07-31 14:33:18 +00:00
<a className="flex flex-col">
<div className="flex flex-row justify-between">
<strong>{recipient}</strong>
<div className="text-gray-700 flex flex-row gap-x-1">
{formatMessageDate(lastMessage.sentAt)}
<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
</div>
2021-07-31 14:33:18 +00:00
</div>
<div className="line-clamp-2 text-gray-700">{lastMessage.content}</div>
2021-07-31 14:33:18 +00:00
</a>
</Link>
</li>
);
2021-07-31 14:33:18 +00:00
})}
</ul>
);
2021-07-31 14:33:18 +00:00
}
function formatMessageDate(date: Date): string {
const messageDate = DateTime.fromJSDate(date);
const diff = messageDate.diffNow("days");
const isToday = diff.days > -1;
if (isToday) {
return messageDate.toFormat("HH:mm", { locale: "fr-FR" });
}
const isDuringLastWeek = diff.days > -8;
if (isDuringLastWeek) {
return messageDate.weekdayLong;
}
return messageDate.toFormat("dd/MM/yyyy", { locale: "fr-FR" });
}