Merge branch 'master' into outgoing-calls

app/messages/components/conversation.tsx

@@ -10,21 +10,22 @@ export default function Conversation() {
 	const router = useRouter();
 	const recipient = decodeURIComponent(router.params.recipient);
 	const conversation = useConversation(recipient)[0];
+	const messages = conversation?.messages ?? [];
 	const messagesListRef = useRef<HTMLUListElement>(null);
 
 	useEffect(() => {
 		messagesListRef.current?.querySelector("li:last-child")?.scrollIntoView();
-	}, [conversation, messagesListRef]);
+	}, [messages, messagesListRef]);
 
 	return (
 		<>
 			<div className="flex flex-col space-y-6 p-6 pt-12 pb-16">
 				<ul ref={messagesListRef}>
-					{conversation.length === 0 ? "empty state" : null}
-					{conversation.map((message, index) => {
+					{messages.length === 0 ? "empty state" : null}
+					{messages.map((message, index) => {
 						const isOutbound = message.direction === Direction.Outbound;
-						const nextMessage = conversation![index + 1];
-						const previousMessage = conversation![index - 1];
+						const nextMessage = messages![index + 1];
+						const previousMessage = messages![index - 1];
 						const isNextMessageFromSameSender = message.from === nextMessage?.from;
 						const isPreviousMessageFromSameSender = message.from === previousMessage?.from;
 

app/messages/components/conversations-list.tsx

@@ -1,4 +1,7 @@
 import { Link, useQuery, Routes } from "blitz";
+import { DateTime } from "luxon";
+import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import getConversationsQuery from "../queries/get-conversations";
 
@@ -11,21 +14,20 @@ export default function ConversationsList() {
 
 	return (
 		<ul className="divide-y">
-			{Object.entries(conversations).map(([recipient, messages]) => {
+			{Object.values(conversations).map(({ recipient, formattedPhoneNumber, messages }) => {
 				const lastMessage = messages[messages.length - 1]!;
 				return (
-					<li key={recipient} className="py-2">
-						<Link
-							href={Routes.ConversationPage({
-								recipient: encodeURI(recipient),
-							})}
-						>
+					<li key={recipient} className="py-2 p-4">
+						<Link href={Routes.ConversationPage({ recipient })}>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
-									<strong>{recipient}</strong>
-									<div>{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}</div>
+									<strong>{formattedPhoneNumber}</strong>
+									<div className="text-gray-700 flex flex-row gap-x-1">
+										{formatMessageDate(lastMessage.sentAt)}
+										<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
+									</div>
 								</div>
-								<div>{lastMessage.content}</div>
+								<div className="line-clamp-2 text-gray-700">{lastMessage.content}</div>
 							</a>
 						</Link>
 					</li>
@@ -34,3 +36,20 @@ export default function ConversationsList() {
 		</ul>
 	);
 }
+
+function formatMessageDate(date: Date): string {
+	const messageDate = DateTime.fromJSDate(date);
+	const diff = messageDate.diffNow("days");
+
+	const isToday = diff.days > -1;
+	if (isToday) {
+		return messageDate.toFormat("HH:mm", { locale: "fr-FR" });
+	}
+
+	const isDuringLastWeek = diff.days > -8;
+	if (isDuringLastWeek) {
+		return messageDate.weekdayLong;
+	}
+
+	return messageDate.toFormat("dd/MM/yyyy", { locale: "fr-FR" });
+}

app/messages/components/new-message-area.tsx

@@ -59,14 +59,20 @@ const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
 			(conversations) => {
 				const nextConversations = { ...conversations };
 				if (!nextConversations[recipient]) {
-					nextConversations[recipient] = [];
+					nextConversations[recipient] = {
+						recipient,
+						formattedPhoneNumber: recipient,
+						messages: [],
+					};
 				}
 
-				nextConversations[recipient] = [...nextConversations[recipient]!, message];
+				nextConversations[recipient]!.messages = [...nextConversations[recipient]!.messages, message];
 
 				return Object.fromEntries(
 					Object.entries(nextConversations).sort(
-						([, a], [, b]) => b[b.length - 1]!.sentAt.getTime() - a[a.length - 1]!.sentAt.getTime(),
+						([, a], [, b]) =>
+							b.messages[b.messages.length - 1]!.sentAt.getTime() -
+							a.messages[a.messages.length - 1]!.sentAt.getTime(),
 					),
 				);
 			},