Finished!

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

@@ -4,10 +4,11 @@ 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, rooms } from "~/services/schema";
+import { presence } from "~/services/schema";
+import { createId } from "@paralleldrive/cuid2";
 
 export async function loader({ context, params, request }: LoaderFunctionArgs) {
-  const { userId } = await getAuth({ context, params, request });
+  const { userId, sessionClaims } = await getAuth({ context, params, request });
 
   const roomId = params.roomId;
 
@@ -25,13 +26,13 @@ export async function loader({ context, params, request }: LoaderFunctionArgs) {
     });
   }
 
+  const name = sessionClaims.name as string;
+  const image = sessionClaims.image as string;
+
   return eventStream(request.signal, function setup(send) {
     async function handler() {
       const presenceData = await db.query.presence.findMany({
-        where: and(
-          eq(presence.userId, userId || ""),
-          eq(presence.roomId, roomId || "")
-        ),
+        where: and(eq(presence.roomId, roomId || "")),
       });
 
       send({
@@ -40,24 +41,41 @@ export async function loader({ context, params, request }: LoaderFunctionArgs) {
       });
     }
 
-    // Initial fetch
-    db.query.presence
-      .findMany({
-        where: and(
-          eq(presence.userId, userId || ""),
-          eq(presence.roomId, roomId || "")
-        ),
+    db.insert(presence)
+      .values({
+        id: `presence_${createId()}`,
+        roomId: roomId || "",
+        userFullName: name,
+        userId: userId,
+        userImageUrl: image,
+        isAdmin: 0,
+        isVIP: 0,
       })
-      .then((presenceData) => {
-        return send({
-          event: `${userId}-${params.roomId}`,
-          data: JSON.stringify(presenceData),
-        });
+      .onConflictDoUpdate({
+        target: [presence.userId, presence.roomId],
+        set: {
+          roomId: roomId || "",
+          userFullName: name,
+          userId: userId,
+          userImageUrl: image,
+          isAdmin: 0,
+          isVIP: 0,
+        },
+      })
+      .then(async () => {
+        emitter.emit("presence");
       });
 
+    // Initial fetch
     emitter.on("presence", handler);
 
     return function clear() {
+      db.delete(presence)
+        .where(and(eq(presence.roomId, roomId), eq(presence.userId, userId)))
+        .returning()
+        .then(async () => {
+          emitter.emit("presence");
+        });
       emitter.off("presence", handler);
     };
   });

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

@@ -1,43 +0,0 @@
-import { getAuth } from "@clerk/remix/ssr.server";
-import { ActionFunctionArgs, json } from "@remix-run/node";
-import { createId } from "@paralleldrive/cuid2";
-import { db } from "~/services/db.server";
-import { emitter } from "~/services/emitter.server";
-import { rooms } from "~/services/schema";
-
-export async function action({ request, params, context }: ActionFunctionArgs) {
-  const { userId } = await getAuth({ context, params, request });
-
-  if (!userId) {
-    return json("Not Signed In!", {
-      status: 403,
-      statusText: "UNAUTHORIZED!",
-    });
-  }
-
-  const data = await request.json();
-
-  const room = await db
-    .insert(rooms)
-    .values({
-      id: `room_${createId()}`,
-      created_at: Date.now().toString(),
-      userId: userId || "",
-      roomName: data.name,
-      storyName: "First Story!",
-      scale: "0.5,1,2,3,5,8",
-      visible: 0,
-    })
-    .returning();
-
-  const success = room.length > 0;
-
-  if (success) {
-    emitter.emit("roomlist");
-
-    return json(room, {
-      status: 200,
-      statusText: "SUCCESS",
-    });
-  }
-}

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

@@ -1,42 +0,0 @@
-import { getAuth } from "@clerk/remix/ssr.server";
-import { ActionFunctionArgs, json } from "@remix-run/node";
-import { eq } from "drizzle-orm";
-import { db } from "~/services/db.server";
-import { emitter } from "~/services/emitter.server";
-import { rooms } from "~/services/schema";
-
-export async function action({ request, params, context }: ActionFunctionArgs) {
-  const { userId } = await getAuth({ context, params, request });
-
-  if (!userId) {
-    return json("Not Signed In!", {
-      status: 403,
-      statusText: "UNAUTHORIZED!",
-    });
-  }
-
-  const roomId = params.roomId;
-
-  if (!roomId) {
-    return json("RoomId Missing!", {
-      status: 400,
-      statusText: "BAD REQUEST!",
-    });
-  }
-
-  const deletedRoom = await db
-    .delete(rooms)
-    .where(eq(rooms.id, roomId))
-    .returning();
-
-  const success = deletedRoom.length > 0;
-
-  if (success) {
-    emitter.emit("roomlist");
-
-    return json(deletedRoom, {
-      status: 200,
-      statusText: "SUCCESS",
-    });
-  }
-}