dashboard CRUD operations done

app/routes/api.room.create.tsx

@@ -0,0 +1,36 @@
+import { getAuth } from "@clerk/remix/ssr.server";
+import { ActionFunctionArgs, json } from "@remix-run/node";
+import { createId } from "@paralleldrive/cuid2";
+import { db } from "~/services/db";
+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 });
+
+  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.delete.$roomId.tsx

@@ -0,0 +1,35 @@
+import { getAuth } from "@clerk/remix/ssr.server";
+import { ActionFunctionArgs, json } from "@remix-run/node";
+import { eq } from "drizzle-orm";
+import { db } from "~/services/db";
+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 });
+
+  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",
+    });
+  }
+}

app/routes/api.room.get.all.tsx

@@ -6,35 +6,26 @@ import { db } from "~/services/db";
 import { emitter } from "~/services/emitter.server";
 import { rooms } from "~/services/schema";
 
+// Get Room List
 export async function loader({ context, params, request }: LoaderFunctionArgs) {
   const { userId } = await getAuth({ context, params, request });
 
+  return eventStream(request.signal, function setup(send) {
+    async function handler() {
       const roomList = await db.query.rooms.findMany({
         where: eq(rooms.userId, userId || ""),
       });
-
-  console.log(roomList);
-
-  //   return NextResponse.json(roomList, {
-  //     status: 200,
-  //     statusText: "SUCCESS",
-  //   });
-  return eventStream(request.signal, function setup(send) {
-    function handler(
-      roomList: {
-        userId: string;
-        id: string;
-        created_at: string | null;
-        roomName: string | null;
-        storyName: string | null;
-        visible: number;
-        scale: string;
-      }[]
-    ) {
       send({ event: "roomlist", data: JSON.stringify(roomList) });
     }
 
+    // Initial fetch
+    db.query.rooms
+      .findMany({
+        where: eq(rooms.userId, userId || ""),
+      })
+      .then((roomList) => {
         send({ event: "roomlist", data: JSON.stringify(roomList) });
+      });
 
     emitter.on("roomlist", handler);
 

app/routes/dashboard.tsx

@@ -35,16 +35,14 @@ type RoomsResponse =
   | undefined;
 
 export default function Index() {
-  const { user } = useUser();
+  let roomsFromDb = useEventSource("/api/room/get/all", { event: "roomlist" });
-  let roomsFromDb = useEventSource("/api/room", { event: "roomlist" });
 
   let roomsFromDbParsed = JSON.parse(roomsFromDb!) as RoomsResponse;
 
   const [roomName, setRoomName] = useState<string>("");
-  // const [roomsFromDb, setRoomsFromDb] = useState<RoomsResponse>(undefined);
 
   const createRoomHandler = async () => {
-    await fetch("/api/room", {
+    await fetch("/api/room/create", {
       cache: "no-cache",
       method: "POST",
       body: JSON.stringify({ name: roomName }),
@@ -56,26 +54,13 @@ export default function Index() {
       false;
   };
 
-  // const getRoomsHandler = async () => {
-  //   const dbRoomsResponse = await fetch("/api/room", {
-  //     cache: "no-cache",
-  //     method: "GET",
-  //   });
-  //   const dbRooms = (await dbRoomsResponse.json()) as RoomsResponse;
-  //   setRoomsFromDb(dbRooms);
-  // };
-
   const deleteRoomHandler = async (roomId: string) => {
-    await fetch(`/api/room/${roomId}`, {
+    await fetch(`/api/room/delete/${roomId}`, {
       cache: "no-cache",
       method: "DELETE",
     });
   };
 
-  // useEffect(() => {
-  //   void getRoomsHandler();
-  // }, []);
-
   return (
     <div className="flex flex-col items-center justify-center gap-8">
       {/* Modal for Adding Rooms */}
@@ -163,7 +148,7 @@ export default function Index() {
         New Room
       </label>
 
-      {roomsFromDb === undefined && <LoadingIndicator />}
+      {!roomsFromDbParsed && <LoadingIndicator />}
     </div>
   );
 }

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@clerk/remix": "^3.1.5",
     "@libsql/client": "0.4.0-pre.2",
+    "@paralleldrive/cuid2": "^2.2.2",
     "@remix-run/css-bundle": "^2.3.0",
     "@remix-run/node": "^2.3.0",
     "@remix-run/react": "^2.3.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@libsql/client':
     specifier: 0.4.0-pre.2
     version: 0.4.0-pre.2
+  '@paralleldrive/cuid2':
+    specifier: ^2.2.2
+    version: 2.2.2
   '@remix-run/css-bundle':
     specifier: ^2.3.0
     version: 2.3.0
@@ -1498,6 +1501,11 @@ packages:
       eslint-scope: 5.1.1
     dev: true
 
+  /@noble/hashes@1.3.2:
+    resolution: {integrity: sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==}
+    engines: {node: '>= 16'}
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1564,6 +1572,12 @@ packages:
       which: 3.0.1
     dev: true
 
+  /@paralleldrive/cuid2@2.2.2:
+    resolution: {integrity: sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==}
+    dependencies:
+      '@noble/hashes': 1.3.2
+    dev: false
+
   /@peculiar/asn1-schema@2.3.8:
     resolution: {integrity: sha512-ULB1XqHKx1WBU/tTFIA+uARuRoBVZ4pNdOA878RDrRbBfBGcSzi5HBkdScC6ZbHn8z7L8gmKCgPC1LHRrP46tA==}
     dependencies: