import { Link, useLoaderData } from "@remix-run/react"; import { IoChevronForward } from "react-icons/io5"; import { formatRelativeDate } from "~/features/core/helpers/date-formatter"; import PhoneInitLoader from "~/features/core/components/phone-init-loader"; import EmptyMessages from "./empty-messages"; import type { MessagesLoaderData } from "~/routes/__app/messages"; export default function ConversationsList() { const { conversations } = useLoaderData(); if (!conversations) { // we're still importing messages from twilio return ; } if (Object.keys(conversations).length === 0) { return ; } return (
    {Object.values(conversations).map(({ recipient, formattedPhoneNumber, lastMessage }) => { return (
  • {formattedPhoneNumber ?? recipient}
    {formatRelativeDate(lastMessage.sentAt)}
    {lastMessage.content}
  • ); })}
); }