remove current phone number from session

app/features/messages/actions/messages.$recipient.tsx

@@ -8,12 +8,17 @@ import getTwilioClient, { translateMessageDirection, translateMessageStatus } fr
 export type NewMessageActionData = {};
 
 const action: ActionFunction = async ({ params, request }) => {
-	const { phoneNumber, twilio } = await requireLoggedIn(request);
+	const { twilio } = await requireLoggedIn(request);
 	if (!twilio) {
 		throw new Error("unreachable");
 	}
-	const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
-	if (!twilioAccount) {
+	const [phoneNumber, twilioAccount] = await Promise.all([
+		db.phoneNumber.findUnique({
+			where: { twilioAccountSid_isCurrent: { twilioAccountSid: twilio.accountSid ?? "", isCurrent: true } },
+		}),
+		db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } }),
+	]);
+	if (!phoneNumber || !twilioAccount) {
 		throw new Error("unreachable");
 	}
 
@@ -24,11 +29,11 @@ const action: ActionFunction = async ({ params, request }) => {
 		const message = await twilioClient.messages.create({
 			body: formData.content.toString(),
 			to: recipient,
-			from: phoneNumber!.number,
+			from: phoneNumber.number,
 		});
 		await db.message.create({
 			data: {
-				phoneNumberId: phoneNumber!.id,
+				phoneNumberId: phoneNumber.id,
 				id: message.sid,
 				to: message.to,
 				recipient: message.to,

app/features/messages/components/conversation.tsx

@@ -7,13 +7,11 @@ import { Direction } from "@prisma/client";
 import NewMessageArea from "./new-message-area";
 import { formatDate, formatTime } from "~/features/core/helpers/date-formatter";
 import { type ConversationLoaderData } from "~/features/messages/loaders/messages.$recipient";
-import useSession from "~/features/core/hooks/use-session";
 
 export default function Conversation() {
-	const { phoneNumber } = useSession();
 	const params = useParams<{ recipient: string }>();
 	const recipient = decodeURIComponent(params.recipient ?? "");
-	const { conversation } = useLoaderData<ConversationLoaderData>();
+	const { conversation, currentPhoneNumber } = useLoaderData<ConversationLoaderData>();
 	const transition = useTransition();
 	const messagesListRef = useRef<HTMLUListElement>(null);
 
@@ -21,8 +19,8 @@ export default function Conversation() {
 	if (transition.submission) {
 		messages.push({
 			id: "temp",
-			phoneNumberId: phoneNumber!.id,
-			from: phoneNumber!.number,
+			phoneNumberId: currentPhoneNumber!.id,
+			from: currentPhoneNumber!.number,
 			to: recipient,
 			recipient,
 			sentAt: new Date(),

app/features/messages/loaders/messages.$recipient.ts

@@ -1,7 +1,7 @@
 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 } from "~/utils/auth.server";
@@ -15,6 +15,7 @@ type ConversationType = {
 
 export type ConversationLoaderData = {
 	conversation: ConversationType;
+	currentPhoneNumber: Pick<PhoneNumber, "id" | "number">;
 };
 
 const loader: LoaderFunction = async ({ request, params }) => {
@@ -24,10 +25,26 @@ const loader: LoaderFunction = async ({ request, params }) => {
 	}
 
 	const twilioAccountSid = twilio.accountSid;
+	const currentPhoneNumber = await db.phoneNumber.findUnique({
+		where: {
+			twilioAccountSid_isCurrent: {
+				twilioAccountSid,
+				isCurrent: true,
+			},
+		},
+		select: {
+			id: true,
+			number: true,
+		},
+	});
+	if (!currentPhoneNumber) {
+		return redirect("/messages");
+	}
+
 	const recipient = decodeURIComponent(params.recipient ?? "");
 	const conversation = await getConversation(recipient);
 
-	return json<ConversationLoaderData>({ conversation });
+	return json<ConversationLoaderData>({ conversation, currentPhoneNumber });
 
 	async function getConversation(recipient: string): Promise<ConversationType> {
 		const phoneNumber = await db.phoneNumber.findUnique({

app/features/messages/loaders/messages.ts

@@ -19,12 +19,10 @@ type Conversation = {
 };
 
 const loader: LoaderFunction = async ({ request }) => {
-	const sessionData = await requireLoggedIn(request);
-	const phoneNumber =
-		sessionData.phoneNumber &&
-		(await db.phoneNumber.findUnique({
-			where: { id: sessionData.phoneNumber.id },
-		}));
+	const { twilio } = await requireLoggedIn(request);
+	const phoneNumber = await db.phoneNumber.findUnique({
+		where: { twilioAccountSid_isCurrent: { twilioAccountSid: twilio?.accountSid ?? "", isCurrent: true } },
+	});
 	return json<MessagesLoaderData>({
 		hasPhoneNumber: Boolean(phoneNumber),
 		isFetchingMessages: phoneNumber?.isFetchingMessages ?? null,