diff --git a/app/features/core/components/phone-init-loader.tsx b/app/features/core/components/phone-init-loader.tsx
index cf92795..bf02075 100644
--- a/app/features/core/components/phone-init-loader.tsx
+++ b/app/features/core/components/phone-init-loader.tsx
@@ -16,6 +16,7 @@ export default function PhoneInitLoader() {
We're finalizing your 🐚phone initialization.
+ {/* TODO */}
You don't have to refresh this page, we will do it automatically for you when your phone is ready.
diff --git a/app/features/messages/components/conversations-list.tsx b/app/features/messages/components/conversations-list.tsx
index d877234..a6c8f58 100644
--- a/app/features/messages/components/conversations-list.tsx
+++ b/app/features/messages/components/conversations-list.tsx
@@ -8,9 +8,9 @@ import EmptyMessages from "./empty-messages";
import type { MessagesLoaderData } from "~/features/messages/loaders/messages";
export default function ConversationsList() {
- const { conversations } = useLoaderData();
+ const { conversations, isFetchingMessages } = useLoaderData();
- if (!conversations) {
+ if (isFetchingMessages || !conversations) {
// we're still importing messages from twilio
return ;
}
diff --git a/app/features/messages/loaders/messages.ts b/app/features/messages/loaders/messages.ts
index a26c45c..ced9155 100644
--- a/app/features/messages/loaders/messages.ts
+++ b/app/features/messages/loaders/messages.ts
@@ -1,13 +1,14 @@
import type { LoaderFunction } from "@remix-run/node";
import { json } from "superjson-remix";
import { parsePhoneNumber } from "awesome-phonenumber";
-import { type Message, Prisma } from "@prisma/client";
+import { type Message, type PhoneNumber, Prisma } from "@prisma/client";
import db from "~/utils/db.server";
-import { requireLoggedIn, type SessionData } from "~/utils/auth.server";
+import { requireLoggedIn } from "~/utils/auth.server";
export type MessagesLoaderData = {
- user: { hasPhoneNumber: boolean };
+ hasPhoneNumber: boolean;
+ isFetchingMessages: boolean | null;
conversations: Conversations | undefined;
};
@@ -18,9 +19,15 @@ type Conversation = {
};
const loader: LoaderFunction = async ({ request }) => {
- const { phoneNumber } = await requireLoggedIn(request);
+ const sessionData = await requireLoggedIn(request);
+ const phoneNumber =
+ sessionData.phoneNumber &&
+ (await db.phoneNumber.findUnique({
+ where: { id: sessionData.phoneNumber.id },
+ }));
return json({
- user: { hasPhoneNumber: Boolean(phoneNumber) },
+ hasPhoneNumber: Boolean(phoneNumber),
+ isFetchingMessages: phoneNumber?.isFetchingMessages ?? null,
conversations: await getConversations(phoneNumber),
});
};
@@ -29,13 +36,8 @@ export default loader;
type Conversations = Record;
-async function getConversations(sessionPhoneNumber: SessionData["phoneNumber"]) {
- if (!sessionPhoneNumber) {
- return;
- }
-
- const phoneNumber = await db.phoneNumber.findUnique({ where: { id: sessionPhoneNumber.id } });
- if (!phoneNumber || phoneNumber.isFetchingMessages) {
+async function getConversations(phoneNumber: PhoneNumber | null) {
+ if (!phoneNumber) {
return;
}
diff --git a/app/routes/__app/messages.tsx b/app/routes/__app/messages.tsx
index 826197a..e9af71e 100644
--- a/app/routes/__app/messages.tsx
+++ b/app/routes/__app/messages.tsx
@@ -1,3 +1,4 @@
+import type { MetaFunction } from "@remix-run/node";
import { useLoaderData } from "superjson-remix";
import { atom, useAtom } from "jotai";
@@ -7,14 +8,19 @@ import MissingTwilioCredentials from "~/features/core/components/missing-twilio-
import ConversationsList from "~/features/messages/components/conversations-list";
import NewMessageButton from "~/features/messages/components/new-message-button";
import NewMessageBottomSheet from "~/features/messages/components/new-message-bottom-sheet";
+import { getSeoMeta } from "~/utils/seo";
+
+export const meta: MetaFunction = () => ({
+ ...getSeoMeta({ title: "Messages" }),
+});
export const loader = messagesLoader;
export default function MessagesPage() {
- const { user } = useLoaderData();
+ const { hasPhoneNumber } = useLoaderData();
const setIsNewMessageSheetOpen = useAtom(bottomSheetOpenAtom)[1];
- if (!user.hasPhoneNumber) {
+ if (!hasPhoneNumber) {
return (
<>