Better error handling

app/routes/api.room.get.$roomId.tsx

@@ -26,6 +26,17 @@ export async function loader({ context, params, request }: LoaderFunctionArgs) {
     });
   }
 
+  const room = await db.query.rooms.findFirst({
+    where: eq(rooms.id, roomId),
+  });
+
+  if (!room) {
+    return json("Room is Missing!", {
+      status: 404,
+      statusText: "BAD REQUEST!",
+    });
+  }
+
   return eventStream(request.signal, function setup(send) {
     async function handler() {
       const roomFromDb = await db.query.rooms.findFirst({

app/routes/api.room.presence.get.$roomId.tsx

@@ -4,7 +4,7 @@ import { and, eq } from "drizzle-orm";
 import { eventStream } from "remix-utils/sse/server";
 import { db } from "~/services/db.server";
 import { emitter } from "~/services/emitter.server";
-import { presence } from "~/services/schema";
+import { presence, rooms } from "~/services/schema";
 import { createId } from "@paralleldrive/cuid2";
 
 export async function loader({ context, params, request }: LoaderFunctionArgs) {
@@ -26,6 +26,17 @@ export async function loader({ context, params, request }: LoaderFunctionArgs) {
     });
   }
 
+  const room = await db.query.rooms.findFirst({
+    where: eq(rooms.id, roomId),
+  });
+
+  if (!room) {
+    return json("Room is Missing!", {
+      status: 404,
+      statusText: "BAD REQUEST!",
+    });
+  }
+
   const name = sessionClaims.name as string;
   const image = sessionClaims.image as string;
   const metadata = sessionClaims.metadata as {

app/routes/api.votes.get.$roomId.tsx

@@ -4,7 +4,7 @@ import { eq } from "drizzle-orm";
 import { eventStream } from "remix-utils/sse/server";
 import { db } from "~/services/db.server";
 import { emitter } from "~/services/emitter.server";
-import { votes } from "~/services/schema";
+import { rooms, votes } from "~/services/schema";
 
 // Get Room List
 export async function loader({ context, params, request }: LoaderFunctionArgs) {
@@ -26,6 +26,17 @@ export async function loader({ context, params, request }: LoaderFunctionArgs) {
     });
   }
 
+  const room = await db.query.rooms.findFirst({
+    where: eq(rooms.id, roomId),
+  });
+
+  if (!room) {
+    return json("Room is Missing!", {
+      status: 404,
+      statusText: "BAD REQUEST!",
+    });
+  }
+
   return eventStream(request.signal, function setup(send) {
     async function handler() {
       const votesByRoomId = await db.query.votes.findMany({

app/routes/room.$roomId.tsx

@@ -47,7 +47,9 @@ export default function Room() {
     event: `${user?.id}-${params.roomId}`,
   });
 
-  let roomFromDbParsed = JSON.parse(roomFromDb!) as RoomResponse | undefined;
+  let roomFromDbParsed = (roomFromDb ? JSON.parse(roomFromDb!) : undefined) as
+    | RoomResponse
+    | undefined;
   let votesFromDbParsed = JSON.parse(votesFromDb!) as VoteResponse | undefined;
   let presenceDateParsed = JSON.parse(presenceData!) as
     | PresenceItem[]
@@ -124,7 +126,7 @@ export default function Room() {
   };
 
   const downloadLogs = () => {
-    if (roomFromDb && votesFromDb) {
+    if (roomFromDbParsed && votesFromDbParsed) {
       const jsonObject = roomFromDbParsed?.logs
         .map((item) => {
           return {
@@ -206,16 +208,16 @@ export default function Room() {
   // UI
   // =================================
   // Room is loading
-  if (!roomFromDbParsed) {
+  if (roomFromDbParsed === null) {
     return <LoadingIndicator />;
     // Room has been loaded
   } else {
     return roomFromDb ? (
       <div className="flex flex-col gap-4 text-center justify-center items-center">
-        <div className="text-2xl">{roomFromDbParsed.roomName}</div>
+        <div className="text-2xl">{roomFromDbParsed?.roomName}</div>
         <div className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md">
           <div>ID:</div>
-          <div>{roomFromDbParsed.id}</div>
+          <div>{roomFromDbParsed?.id}</div>
 
           <button>
             {copied ? (
@@ -233,7 +235,7 @@ export default function Room() {
           <div className="card card-compact bg-base-100 shadow-xl">
             <div className="card-body">
               <h2 className="card-title mx-auto">
-                Story: {roomFromDbParsed.storyName}
+                Story: {roomFromDbParsed?.storyName}
               </h2>
 
               <ul className="p-0 flex flex-row flex-wrap justify-center items-center text-ceter gap-4">
@@ -304,7 +306,7 @@ export default function Room() {
               </ul>
 
               <div className="join md:btn-group-horizontal mx-auto">
-                {roomFromDbParsed.scale?.split(",").map((scaleItem, index) => {
+                {roomFromDbParsed?.scale?.split(",").map((scaleItem, index) => {
                   return (
                     <button
                       key={index}