send formatter recipient phone number in conversations

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 isSameNext = message.from === nextMessage?.from;
 						const isSamePrevious = message.from === previousMessage?.from;
 						const differenceInMinutes = previousMessage

app/messages/components/conversations-list.tsx

@@ -14,18 +14,14 @@ 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 p-4">
-						<Link
-							href={Routes.ConversationPage({
-								recipient: encodeURIComponent(recipient),
-							})}
-						>
+						<Link href={Routes.ConversationPage({ recipient })}>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
-									<strong>{recipient}</strong>
+									<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} />

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(),
 					),
 				);
 			},

app/messages/hooks/use-conversation.ts

@@ -9,7 +9,7 @@ export default function useConversation(recipient: string) {
 		{
 			select(conversations) {
 				if (!conversations[recipient]) {
-					return [];
+					return null;
 				}
 
 				return conversations[recipient]!;

app/messages/pages/messages/[recipient].tsx

@@ -7,12 +7,14 @@ import { faLongArrowLeft, faInfoCircle, faPhoneAlt as faPhone } from "@fortaweso
 import Layout from "../../../core/layouts/layout";
 import Conversation from "../../components/conversation";
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
+import useConversation from "../../hooks/use-conversation";
 
 const ConversationPage: BlitzPage = () => {
 	useRequireOnboarding();
 
 	const router = useRouter();
 	const recipient = decodeURIComponent(router.params.recipient);
+	const conversation = useConversation(recipient)[0];
 
 	return (
 		<>
@@ -20,7 +22,7 @@ const ConversationPage: BlitzPage = () => {
 				<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
 				</span>
-				<strong className="col-span-1">{recipient}</strong>
+				<strong className="col-span-1">{conversation?.formattedPhoneNumber ?? recipient}</strong>
 				<span className="col-span-1 flex justify-end space-x-4 pr-2">
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faPhone} />
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />

app/messages/queries/get-conversations.ts

@@ -6,6 +6,12 @@ import db, { Direction, Message, Prisma } from "../../../db";
 import { decrypt } from "../../../db/_encryption";
 import { enforceSuperAdminIfNotCurrentOrganization, setDefaultOrganizationId } from "../../core/utils";
 
+type Conversation = {
+	recipient: string;
+	formattedPhoneNumber: string;
+	messages: Message[];
+};
+
 export default resolver.pipe(
 	resolver.zod(z.object({ organizationId: z.string().optional() })),
 	resolver.authorize(),
@@ -26,7 +32,7 @@ export default resolver.pipe(
 			orderBy: { sentAt: Prisma.SortOrder.asc },
 		});
 
-		let conversations: Record<string, Message[]> = {};
+		let conversations: Record<string, Conversation> = {};
 		for (const message of messages) {
 			let recipient: string;
 			if (message.direction === Direction.Outbound) {
@@ -34,23 +40,28 @@ export default resolver.pipe(
 			} else {
 				recipient = message.from;
 			}
-			const parsedPhoneNumber = new PhoneNumber(recipient);
-			recipient = parsedPhoneNumber.getNumber("international");
+			const formattedPhoneNumber = new PhoneNumber(recipient).getNumber("international");
 
 			if (!conversations[recipient]) {
-				conversations[recipient] = [];
+				conversations[recipient] = {
+					recipient,
+					formattedPhoneNumber,
+					messages: [],
+				};
 			}
 
-			conversations[recipient]!.push({
+			conversations[recipient]!.messages.push({
 				...message,
 				content: decrypt(message.content, organization.encryptionKey),
 			});
 
-			conversations[recipient]!.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
+			conversations[recipient]!.messages.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
 		}
 		conversations = Object.fromEntries(
 			Object.entries(conversations).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(),
 			),
 		);