From b3b2643005aa7c063735c219a62ec6be07ab2c27 Mon Sep 17 00:00:00 2001
From: lim396 <90199432+lim396@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:04:23 +0900
Subject: [PATCH] [frontend] Enable Leave in room drop-down menu (#187)

---
 frontend/app/lib/actions.ts             | 16 ++++++++++++++++
 frontend/app/room/[id]/sidebar-menu.tsx | 10 +++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/app/lib/actions.ts b/frontend/app/lib/actions.ts
index 0d8bb332..6f974c74 100644
--- 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
index 1b0c19ec..90e9d070 100644
--- 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>