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

53 lines
1.7 KiB
TypeScript
Raw Normal View History

2021-08-01 03:05:40 +00:00
import { Link, useQuery, Routes } from "blitz";
import { IoChevronForward } from "react-icons/io5";
2021-07-31 14:33:18 +00:00
import getConversationsQuery from "../queries/get-conversations";
2021-08-30 15:19:33 +00:00
import { formatRelativeDate } from "../../core/helpers/date-formatter";
2021-09-24 23:07:40 +00:00
import { useEffect } from "react";
import PhoneInitLoader from "../../core/components/phone-init-loader";
2021-09-24 23:34:48 +00:00
import EmptyMessages from "./empty-messages";
2021-07-31 14:33:18 +00:00
export default function ConversationsList() {
2021-09-24 23:07:40 +00:00
const [conversations, query] = useQuery(getConversationsQuery, {});
useEffect(() => {
if (!conversations) {
const pollInterval = setInterval(() => query.refetch(), 1500);
return () => clearInterval(pollInterval);
}
}, [conversations, query]);
if (!conversations) {
2021-09-24 23:34:48 +00:00
// we're still importing messages from twilio
2021-09-24 23:07:40 +00:00
return <PhoneInitLoader />;
}
2021-07-31 14:33:18 +00:00
if (Object.keys(conversations).length === 0) {
2021-09-24 23:34:48 +00:00
return <EmptyMessages />;
2021-07-31 14:33:18 +00:00
}
return (
<ul className="divide-y">
{Object.values(conversations).map(({ recipient, formattedPhoneNumber, messages }) => {
const lastMessage = messages[messages.length - 1]!;
2021-07-31 14:33:18 +00:00
return (
2021-08-30 20:13:40 +00:00
<li key={`sms-conversation-${recipient}`} className="py-2 px-4">
<Link href={Routes.ConversationPage({ recipient })}>
2021-07-31 14:33:18 +00:00
<a className="flex flex-col">
<div className="flex flex-row justify-between">
<span className="font-medium">{formattedPhoneNumber ?? recipient}</span>
<div className="text-gray-700 flex flex-row gap-x-1">
2021-08-30 15:19:33 +00:00
{formatRelativeDate(lastMessage.sentAt)}
<IoChevronForward className="w-4 h-4 my-auto" />
</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
}