diff --git a/src/pages/messages/[recipient].tsx b/src/pages/messages/[recipient].tsx index c060e79..573a731 100644 --- a/src/pages/messages/[recipient].tsx +++ b/src/pages/messages/[recipient].tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useRef } from "react"; import type { NextPage } from "next"; import { useRouter } from "next/router"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -35,7 +35,7 @@ const Messages: NextPage = (props) => { initialData: props.conversation, recipient, }); - const pageTitle = `Messages with ${recipient}`; + const formRef = useRef(null); const { register, handleSubmit, @@ -44,7 +44,7 @@ const Messages: NextPage = (props) => { isSubmitting, }, } = useForm
(); - + const pageTitle = `Messages with ${recipient}`; const onSubmit = handleSubmit(async ({ content }) => { if (isSubmitting) { return; @@ -75,6 +75,12 @@ const Messages: NextPage = (props) => { return () => void subscription.unsubscribe(); }, [userProfile, recipient, refetch]); + useEffect(() => { + if (formRef.current) { + formRef.current.scrollIntoView(); + } + }, []); + if (!userProfile) { return ( @@ -92,6 +98,8 @@ const Messages: NextPage = (props) => { ); } + console.log("conversation", conversation); + return (
@@ -110,30 +118,44 @@ const Messages: NextPage = (props) => {
    {conversation!.map((message, index) => { const isOutbound = message.direction === "outbound"; - const isSameSender = message.from === conversation![index + 1]?.from; - const isLast = index === conversation!.length; + const nextMessage = conversation![index + 1]; + const previousMessage = conversation![index - 1]; + const isSameNext = message.from === nextMessage?.from; + const isSamePrevious = message.from === previousMessage?.from; + const differenceInMinutes = previousMessage ? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) / 1000 / 60 : 0; + const isTooLate = differenceInMinutes > 15; return ( -
  • - + { + (!isSamePrevious || isTooLate) && ( +
    + {new Date(message.sentAt).toLocaleDateString("fr-FR", { weekday: "long", day: "2-digit", month: "short" })} + {new Date(message.sentAt).toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })} +
    + ) + } + +
    - {message.content} - + + {message.content} + +
  • ); })}
- + diff --git a/src/pages/messages/index.tsx b/src/pages/messages/index.tsx index ec5eb2a..a1e559b 100644 --- a/src/pages/messages/index.tsx +++ b/src/pages/messages/index.tsx @@ -28,7 +28,7 @@ const Messages: NextPage = ({ conversations }) => { {Object.entries(conversations).map(([recipient, message]) => { return (
  • - +
    {recipient}