add message time
This commit is contained in:
parent
05161adbb4
commit
0760fa8f41
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user