From 4c73ee78ce70e5eeee9a3de67dbd44f4df163f4d Mon Sep 17 00:00:00 2001 From: atridadl Date: Tue, 21 Nov 2023 18:08:19 -0700 Subject: [PATCH] dashboard CRUD operations done --- app/routes/api.room.create.tsx | 36 +++++++++++++++++++ app/routes/api.room.delete.$roomId.tsx | 35 ++++++++++++++++++ .../{api.room.tsx => api.room.get.all.tsx} | 35 +++++++----------- app/routes/dashboard.tsx | 23 +++--------- package.json | 1 + pnpm-lock.yaml | 14 ++++++++ 6 files changed, 103 insertions(+), 41 deletions(-) create mode 100644 app/routes/api.room.create.tsx create mode 100644 app/routes/api.room.delete.$roomId.tsx rename app/routes/{api.room.tsx => api.room.get.all.tsx} (56%) diff --git a/app/routes/api.room.create.tsx b/app/routes/api.room.create.tsx new file mode 100644 index 0000000..f21f58e --- /dev/null +++ b/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", + }); + } +} diff --git a/app/routes/api.room.delete.$roomId.tsx b/app/routes/api.room.delete.$roomId.tsx new file mode 100644 index 0000000..98a6c5c --- /dev/null +++ b/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", + }); + } +} diff --git a/app/routes/api.room.tsx b/app/routes/api.room.get.all.tsx similarity index 56% rename from app/routes/api.room.tsx rename to app/routes/api.room.get.all.tsx index dd05087..fc20888 100644 --- a/app/routes/api.room.tsx +++ b/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 }); - 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; - }[] - ) { + async function handler() { + const roomList = await db.query.rooms.findMany({ + where: eq(rooms.userId, userId || ""), + }); send({ event: "roomlist", data: JSON.stringify(roomList) }); } - 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); diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx index 59ea458..069b37f 100644 --- a/app/routes/dashboard.tsx +++ b/app/routes/dashboard.tsx @@ -35,16 +35,14 @@ type RoomsResponse = | undefined; export default function Index() { - const { user } = useUser(); - let roomsFromDb = useEventSource("/api/room", { event: "roomlist" }); + let roomsFromDb = useEventSource("/api/room/get/all", { event: "roomlist" }); let roomsFromDbParsed = JSON.parse(roomsFromDb!) as RoomsResponse; const [roomName, setRoomName] = useState(""); - // const [roomsFromDb, setRoomsFromDb] = useState(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 (
{/* Modal for Adding Rooms */} @@ -163,7 +148,7 @@ export default function Index() { New Room - {roomsFromDb === undefined && } + {!roomsFromDbParsed && }
); } diff --git a/package.json b/package.json index ec84e33..b54f07d 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8fef1b..3767f57 100644 --- a/pnpm-lock.yaml +++ b/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: