import { useEffect, useRef } from "react"; import { useParams, useTransition } from "@remix-run/react"; import { useLoaderData } from "superjson-remix"; import clsx from "clsx"; import { Direction } from "@prisma/client"; import NewMessageArea from "./new-message-area"; import { formatDate, formatTime } from "~/features/core/helpers/date-formatter"; import { type ConversationLoaderData } from "~/features/messages/loaders/messages.$recipient"; export default function Conversation() { const params = useParams<{ recipient: string }>(); const recipient = decodeURIComponent(params.recipient ?? ""); const { conversation, currentPhoneNumber } = useLoaderData(); const transition = useTransition(); const messagesListRef = useRef(null); const messages = conversation.messages; if (transition.submission) { messages.push({ id: "temp", phoneNumberId: currentPhoneNumber!.id, from: currentPhoneNumber!.number, to: recipient, recipient, sentAt: new Date(), direction: Direction.Outbound, status: "Queued", content: transition.submission.formData.get("content")!.toString(), }); } useEffect(() => { messagesListRef.current?.querySelector("li:last-child")?.scrollIntoView(); }, [messages, messagesListRef]); return ( <>
    {messages.length === 0 ? "empty state" : null} {messages.map((message, index) => { const isOutbound = message.direction === Direction.Outbound; const nextMessage = messages![index + 1]; const previousMessage = messages![index - 1]; const isNextMessageFromSameSender = message.from === nextMessage?.from; const isPreviousMessageFromSameSender = message.from === previousMessage?.from; const messageSentAt = new Date(message.sentAt); const previousMessageSentAt = previousMessage ? new Date(previousMessage.sentAt) : null; const quarter = Math.floor(messageSentAt.getMinutes() / 15); const sameQuarter = previousMessage && messageSentAt.getTime() - previousMessageSentAt!.getTime() < 15 * 60 * 1000 && quarter === Math.floor(previousMessageSentAt!.getMinutes() / 15); const shouldGroupMessages = previousMessageSentAt && sameQuarter; return (
  • {(!isPreviousMessageFromSameSender || !shouldGroupMessages) && (
    {formatDate(new Date(message.sentAt), { weekday: "long", day: "2-digit", month: "short", })} {formatTime(new Date(message.sentAt))}
    )}
    {message.content}
  • ); })}
); }