[frontend] Enable Leave in room drop-down menu (#187)

usatie · Jan 3, 2024 · b3b2643 · b3b2643
1 parent 7e8dbc2
commit b3b2643
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/frontend/app/lib/actions.ts b/frontend/app/lib/actions.ts
@@ -633,3 +633,19 @@ export async function unbanUser(roomId: number, userId: number) {
     return "Success";
   }
 }
+
+export async function leaveRoom(roomId: number) {
+  const res = await fetch(`${process.env.API_URL}/room/${roomId}/leave`, {
+    method: "DELETE",
+    headers: {
+      Authorization: "Bearer " + getAccessToken(),
+    },
+  });
+  if (!res.ok) {
+    console.error("leaveRoom error: ", await res.json());
+    return "Error";
+  } else {
+    redirect(`/room`, RedirectType.push);
+    return "Success";
+  }
+}
diff --git a/frontend/app/room/[id]/sidebar-menu.tsx b/frontend/app/room/[id]/sidebar-menu.tsx
@@ -11,6 +11,7 @@ import { ChevronDown, UserPlus, Settings, Ban, LogOut } from "lucide-react";
 import { useModal } from "@/app/lib/hooks/use-modal-store";
 import { BanModal } from "@/app/ui/room/ban-modal";
 import { UserOnRoomEntity, PublicUserEntity } from "@/app/lib/dtos";
+import { leaveRoom } from "@/app/lib/actions";
 
 export const SidebarMenu = ({
   roomId,
@@ -25,6 +26,10 @@ export const SidebarMenu = ({
 }) => {
   const { onOpen } = useModal();
 
+  const handleLeave = () => {
+    leaveRoom(roomId);
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className="focus:outline-none" asChild>
@@ -54,7 +59,10 @@ export const SidebarMenu = ({
             <BanModal />
           </DropdownMenuItem>
         )}
-        <DropdownMenuItem className="text-rose-500 px-3 py-2 text-sm cursor-pointer">
+        <DropdownMenuItem
+          onClick={handleLeave}
+          className="text-rose-500 px-3 py-2 text-sm cursor-pointer"
+        >
           Leave
           <LogOut className="h-4 w-4 ml-auto" />
         </DropdownMenuItem>