add message time

This commit is contained in:
m5r 2021-07-22 02:02:56 +08:00
parent 05161adbb4
commit 0760fa8f41
2 changed files with 41 additions and 19 deletions

View File

@ -1,4 +1,4 @@
import { useEffect } from "react"; import { useEffect, useRef } from "react";
import type { NextPage } from "next"; import type { NextPage } from "next";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -35,7 +35,7 @@ const Messages: NextPage<Props> = (props) => {
initialData: props.conversation, initialData: props.conversation,
recipient, recipient,
}); });
const pageTitle = `Messages with ${recipient}`; const formRef = useRef<HTMLFormElement>(null);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -44,7 +44,7 @@ const Messages: NextPage<Props> = (props) => {
isSubmitting, isSubmitting,
}, },
} = useForm<Form>(); } = useForm<Form>();
const pageTitle = `Messages with ${recipient}`;
const onSubmit = handleSubmit(async ({ content }) => { const onSubmit = handleSubmit(async ({ content }) => {
if (isSubmitting) { if (isSubmitting) {
return; return;
@ -75,6 +75,12 @@ const Messages: NextPage<Props> = (props) => {
return () => void subscription.unsubscribe(); return () => void subscription.unsubscribe();
}, [userProfile, recipient, refetch]); }, [userProfile, recipient, refetch]);
useEffect(() => {
if (formRef.current) {
formRef.current.scrollIntoView();
}
}, []);
if (!userProfile) { if (!userProfile) {
return ( return (
<Layout title={pageTitle}> <Layout title={pageTitle}>
@ -92,6 +98,8 @@ const Messages: NextPage<Props> = (props) => {
); );
} }
console.log("conversation", conversation);
return ( return (
<Layout title={pageTitle}> <Layout title={pageTitle}>
<header className="grid grid-cols-3 items-center"> <header className="grid grid-cols-3 items-center">
@ -110,13 +118,26 @@ const Messages: NextPage<Props> = (props) => {
<ul> <ul>
{conversation!.map((message, index) => { {conversation!.map((message, index) => {
const isOutbound = message.direction === "outbound"; const isOutbound = message.direction === "outbound";
const isSameSender = message.from === conversation![index + 1]?.from; const nextMessage = conversation![index + 1];
const isLast = index === conversation!.length; 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 ( return (
<li <li key={message.id}>
key={message.id} {
(!isSamePrevious || isTooLate) && (
<div className="flex py-2 space-x-1 text-xs justify-center">
<strong>{new Date(message.sentAt).toLocaleDateString("fr-FR", { weekday: "long", day: "2-digit", month: "short" })}</strong>
<span>{new Date(message.sentAt).toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}</span>
</div>
)
}
<div
className={clsx( className={clsx(
isSameSender || isLast ? "pb-1" : "pb-4", isSameNext ? "pb-1" : "pb-2",
isOutbound ? "text-right" : "text-left", isOutbound ? "text-right" : "text-left",
)} )}
> >
@ -128,12 +149,13 @@ const Messages: NextPage<Props> = (props) => {
> >
{message.content} {message.content}
</span> </span>
</div>
</li> </li>
); );
})} })}
</ul> </ul>
</div> </div>
<form onSubmit={onSubmit}> <form ref={formRef} onSubmit={onSubmit}>
<textarea{...register("content")} /> <textarea{...register("content")} />
<button type="submit">Send</button> <button type="submit">Send</button>
</form> </form>

View File

@ -28,7 +28,7 @@ const Messages: NextPage<Props> = ({ conversations }) => {
{Object.entries(conversations).map(([recipient, message]) => { {Object.entries(conversations).map(([recipient, message]) => {
return ( return (
<li key={recipient} className="py-2"> <li key={recipient} className="py-2">
<Link href={`/messages/${recipient}`}> <Link href={`/messages/${encodeURIComponent(recipient)}`}>
<a className="flex flex-col"> <a className="flex flex-col">
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<strong>{recipient}</strong> <strong>{recipient}</strong>