room deletion: add manual room deletion

Author: te-ce

src/app/api/[[...slugs]]/rooms.ts

@@ -3,6 +3,7 @@ import Elysia from "elysia";
 import { nanoid } from "nanoid";
 import { authMiddleware } from "./auth";
 import z from "zod";
+import { realtime } from "@/lib/realtime";
 
 const ROOM_TTL_SECONDS = 10 * 60;
 
@@ -27,4 +28,19 @@ export const rooms = new Elysia({ prefix: "/room" })
       return { ttl: ttl > 0 ? ttl : 0 };
     },
     { query: z.object({ roomId: z.string() }) },
+  )
+  .delete(
+    "/",
+    async ({ auth }) => {
+      await realtime
+        .channel(auth.roomId)
+        .emit("chat.destroy", { isDestroyed: true });
+
+      await Promise.all([
+        redis.del(auth.roomId),
+        redis.del(`meta:${auth.roomId}`),
+        redis.del(`messages:${auth.roomId}`),
+      ]);
+    },
+    { query: z.object({ roomId: z.string() }) },
   );

src/app/api/[[...slugs]]/route.ts

@@ -7,5 +7,6 @@ const app = new Elysia({ prefix: "/api" }).use(rooms).use(messages);
 
 export const GET = app.fetch;
 export const POST = app.fetch;
+export const DELETE = app.fetch;
 
 export type App = typeof app;

src/components/room/roomHeader.tsx

@@ -1,4 +1,5 @@
 import { useRoomStore } from "@/app/store/roomStore";
+import { useDeleteRoom } from "@/hooks/useDeleteRoom";
 import { useGetRemainingTime } from "@/hooks/useGetRemainingTime";
 import { useState } from "react";
 
@@ -12,6 +13,7 @@ export const RoomHeader = () => {
   const roomId = useRoomStore((state) => state.roomId);
   const { timeRemaining } = useGetRemainingTime(roomId);
   const [copyStatus, setCopyStatus] = useState<"copy" | "copied">("copy");
+  const { destroyRoom } = useDeleteRoom();
 
   const copyLink = () => {
     navigator.clipboard.writeText(`${window.location.origin}/room/${roomId}`);
@@ -22,10 +24,6 @@ export const RoomHeader = () => {
     }, 2000);
   };
 
-  const destroyRoom = () => {
-    // TODO: Implement destroy room
-  };
-
   return (
     <header className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900/30 p-4">
       <div className="flex items-center gap-4">
@@ -63,7 +61,7 @@ export const RoomHeader = () => {
       </div>
 
       <button
-        onClick={() => destroyRoom()}
+        onClick={() => destroyRoom(roomId)}
         className="group flex items-center gap-2 rounded bg-zinc-800 px-3 py-1.5 text-xs font-bold text-zinc-400 transition-all hover:bg-red-600 hover:text-white disabled:opacity-50"
       >
         <span className="group-hover:animate-pulse">💣</span>

src/hooks/useDeleteRoom.ts

@@ -0,0 +1,11 @@
+import { client } from "@/lib/client";
+import { useMutation } from "@tanstack/react-query";
+
+export const useDeleteRoom = () => {
+  const { mutate: destroyRoom } = useMutation({
+    mutationFn: async (roomId: string) => {
+      await client.room.delete(null, { query: { roomId } });
+    },
+  });
+  return { destroyRoom };
+};