prefetch stuff

app/features/messages/components/conversations-list.tsx

@@ -5,7 +5,7 @@ import { IoChevronForward } from "react-icons/io5";
 import { formatRelativeDate } from "~/features/core/helpers/date-formatter";
 import PhoneInitLoader from "~/features/core/components/phone-init-loader";
 import EmptyMessages from "./empty-messages";
-import type { MessagesLoaderData } from "~/routes/__app/messages";
+import type { MessagesLoaderData } from "~/features/messages/loaders/messages";
 
 export default function ConversationsList() {
 	const { conversations } = useLoaderData<MessagesLoaderData>();
@@ -24,7 +24,7 @@ export default function ConversationsList() {
 			{Object.values(conversations).map(({ recipient, formattedPhoneNumber, lastMessage }) => {
 				return (
 					<li key={`sms-conversation-${recipient}`} className="py-2 px-4">
-						<Link to={`/messages/${recipient}`} className="flex flex-col">
+						<Link prefetch="intent" to={`/messages/${recipient}`} className="flex flex-col">
 							<div className="flex flex-row justify-between">
 								<span className="font-medium">{formattedPhoneNumber ?? recipient}</span>
 								<div className="text-gray-700 flex flex-row gap-x-1">

app/features/messages/loaders/messages.ts

@@ -1,21 +1,20 @@
 import type { LoaderFunction } from "@remix-run/node";
+import { json } from "superjson-remix";
+import { parsePhoneNumber } from "awesome-phonenumber";
 import { type Message, Prisma, Direction, SubscriptionStatus } from "@prisma/client";
 
 import db from "~/utils/db.server";
 import { requireLoggedIn } from "~/utils/auth.server";
 
 export type MessagesLoaderData = {
-	user: {
-		hasFilledTwilioCredentials: boolean;
-		hasPhoneNumber: boolean;
-	};
+	user: { hasPhoneNumber: boolean };
 	conversations: Record<string, Conversation> | undefined;
 };
 
 type Conversation = {
 	recipient: string;
 	formattedPhoneNumber: string;
-	messages: Message[];
+	lastMessage: Message;
 };
 
 const loader: LoaderFunction = async ({ request }) => {
@@ -49,8 +48,65 @@ const loader: LoaderFunction = async ({ request }) => {
 			},
 		},
 	});
-	const organization = user!.memberships[0]!.organization;
-	// const hasFilledTwilioCredentials = Boolean(organization?.twilioAccountSid && organization?.twilioAuthToken);
+	const organization = user!.memberships[0].organization;
+	const phoneNumber = await db.phoneNumber.findUnique({
+		where: { organizationId_isCurrent: { organizationId: organization.id, isCurrent: true } },
+		select: {
+			id: true,
+			organizationId: true,
+			number: true,
+		},
+	});
+	const conversations = await getConversations();
+
+	return json<MessagesLoaderData>({
+		user: { hasPhoneNumber: Boolean(phoneNumber) },
+		conversations,
+	});
+
+	async function getConversations() {
+		const organizationId = organizations[0].id;
+		const phoneNumber = await db.phoneNumber.findUnique({
+			where: { organizationId_isCurrent: { organizationId, isCurrent: true } },
+		});
+		if (!phoneNumber || phoneNumber.isFetchingMessages) {
+			return;
+		}
+
+		const messages = await db.message.findMany({
+			where: { phoneNumberId: phoneNumber.id },
+			orderBy: { sentAt: Prisma.SortOrder.desc },
+		});
+
+		let conversations: Record<string, Conversation> = {};
+		for (const message of messages) {
+			let recipient: string;
+			if (message.direction === Direction.Outbound) {
+				recipient = message.to;
+			} else {
+				recipient = message.from;
+			}
+			const formattedPhoneNumber = parsePhoneNumber(recipient).getNumber("international");
+
+			if (!conversations[recipient]) {
+				conversations[recipient] = {
+					recipient,
+					formattedPhoneNumber,
+					lastMessage: message,
+				};
+			}
+
+			if (message.sentAt > conversations[recipient].lastMessage.sentAt) {
+				conversations[recipient].lastMessage = message;
+			}
+			/*conversations[recipient]!.messages.push({
+				...message,
+				content: decrypt(message.content, organization.encryptionKey),
+			});*/
+		}
+
+		return conversations;
+	}
 };
 
 export default loader;