From b61016d618a8377275f893abd91b937403a08dcf Mon Sep 17 00:00:00 2001
From: etienne <etienne.mentrel@scafe.io>
Date: Tue, 13 Feb 2024 14:01:20 +0100
Subject: [PATCH] Add quit_room and logout functionality

---
 backend/src/routes/socket.ts                 | 46 +++++++++++++++++++-
 frontend/src/components/Room/RoomCard.tsx    | 22 +++++++++-
 frontend/src/components/Room/RoomSideBar.tsx | 21 ++++++++-
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/backend/src/routes/socket.ts b/backend/src/routes/socket.ts
index ede3206..d3da915 100644
--- a/backend/src/routes/socket.ts
+++ b/backend/src/routes/socket.ts
@@ -151,6 +151,51 @@ io.on("connection", (socket) => {
     log(`User with ID: ${socket.id} left room: ${roomId}`);
   });
 
+  socket.on("quit_room", async ({ username, roomId }) => {
+    socket.leave(roomId);
+    if (roomUsers[roomId]) {
+      roomUsers[roomId] = roomUsers[roomId].filter((id) => id !== socket.id);
+    }
+
+    io.emit("receive_message", {
+      text: username + " quit the room. ➡️🚪",
+      socketId: "Kurama-chat",
+      roomId: roomId,
+      systemMessage: true,
+    });
+
+    io.emit("users_response", roomUsers);
+
+    if (roomUsers[roomId] && roomUsers[roomId].length === 0) {
+      try {
+        await Room.findByIdAndDelete(roomId);
+        console.log(`Room with ID: ${roomId} was deleted`);
+      } catch (error) {
+        console.log(
+          `Failed to delete room with ID: ${roomId}. Error: ${error}`
+        );
+      }
+    }
+  });
+
+  socket.on("logout", ({ username, roomId }) => {
+    socket.leave(roomId);
+    if (roomUsers[roomId]) {
+      roomUsers[roomId] = roomUsers[roomId].filter((id) => id !== socket.id);
+    }
+
+    io.emit("receive_message", {
+      text: username + " left the room. ➡️🚪",
+      socketId: "Kurama-chat",
+      roomId: roomId,
+      systemMessage: true,
+    });
+
+    io.emit("users_response", roomUsers);
+    log(`User with ID: ${socket.id} left room: ${roomId}`);
+    delete userNames[socket.id];
+  });
+
   socket.on("disconnect", () => {
     for (const [roomId, users] of Object.entries(roomUsers)) {
       if (users.includes(socket.id)) {
@@ -162,7 +207,6 @@ io.on("connection", (socket) => {
           roomId: roomId,
           systemMessage: true,
         });
-        delete userNames[socket.id];
       }
     }
     io.emit("users_response", roomUsers);
diff --git a/frontend/src/components/Room/RoomCard.tsx b/frontend/src/components/Room/RoomCard.tsx
index 2b9b6e7..854baa8 100644
--- a/frontend/src/components/Room/RoomCard.tsx
+++ b/frontend/src/components/Room/RoomCard.tsx
@@ -3,13 +3,31 @@ import IRoom from "@/interfaces/IRoom";
 import Image from "next/image";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import React from "react";
+import React, { useEffect } from "react";
 import Avatar from "react-avatar";
 import { ImExit } from "react-icons/im";
+import { useSocket } from "@/contexts/SocketContext";
+import { useRouter } from "next/navigation";
 
 function RoomCard({ room, users }: { room: IRoom; users: string[] }) {
   const { roomId } = useParams();
   const { myRooms, setMyRooms } = useRoom();
+  const { socket } = useSocket();
+  const username = localStorage.getItem("name");
+  const router = useRouter();
+
+  const handleQuitRoom = () => {
+    socket?.emit("quit_room", { username, roomId: room.id });
+
+    setMyRooms(myRooms.filter((r) => r.id != room.id));
+  };
+
+  useEffect(() => {
+    if (myRooms.find((r) => r.id === roomId) === undefined) {
+      router.push("/chat/1");
+    }
+  }, [myRooms]);
+
   return (
     <Link
       href={`chat/${room.id}`}
@@ -47,7 +65,7 @@ function RoomCard({ room, users }: { room: IRoom; users: string[] }) {
         <span
           className="hidden absolute right-3 justify-center items-center p-2 bg-red-500 rounded-full group-hover:flex hover:bg-red-700"
           onClick={() => {
-            setMyRooms(myRooms.filter((r) => r.id != room.id));
+            handleQuitRoom();
           }}
         >
           <ImExit className="text-white" />
diff --git a/frontend/src/components/Room/RoomSideBar.tsx b/frontend/src/components/Room/RoomSideBar.tsx
index 0e39e20..795f538 100644
--- a/frontend/src/components/Room/RoomSideBar.tsx
+++ b/frontend/src/components/Room/RoomSideBar.tsx
@@ -7,11 +7,13 @@ import { useSocket } from "@/contexts/SocketContext";
 import { BiMessageAdd } from "react-icons/bi";
 import AddRoomPanel from "./AddRoomPanel";
 import ThemeSwitcher from "../shared/themeswitcher";
+import { useRouter } from "next/navigation";
 
 function RoomSideBar() {
   const [showAddRoomPanel, setShowAddRoomPanel] = useState(false);
   const { rooms, myRooms, currentRoomId, setCurrentRoomId } = useRoom();
   const { socket, roomUsers } = useSocket();
+  const router = useRouter();
 
   const hideAddRoomPanel = () => setShowAddRoomPanel(false);
 
@@ -22,10 +24,25 @@ function RoomSideBar() {
     setCurrentRoomId(newRoomId);
   };
 
+  const logout = () => {
+    let username = localStorage.getItem("name");
+    socket?.emit("logout", { username, currentRoomId });
+    router.push("/");
+  };
+
   return (
     <div className="overflow-y-scroll w-20 h-screen border-r-2 sm:w-1/4">
+      <div className="flex justify-center">
+        <button
+          type="submit"
+          className="px-4 pt-1 h-10 text-lg font-semibold text-white rounded-full bg-primary hover:bg-secondary transition duration-300"
+          onClick={logout}
+        >
+          Leave
+        </button>
+      </div>
       <ThemeSwitcher />
-      <p className="px-2 py-5 sm:px-5 h-[56px] text-xl sm:text-2xl font-semibold dark:text-white">
+      <p className="flex flex-col px-2 py-5 sm:px-5 h-[56px] text-xl sm:text-2xl font-semibold dark:text-white">
         Rooms 🌐
       </p>
       {rooms.map((room: IRoom, index) => {
@@ -35,7 +52,7 @@ function RoomSideBar() {
           </div>
         );
       })}
-      <p className="px-2 pt-3 text-lg font-semibold sm:text-xl sm:px-5 dark:text-white">
+      <p className="flex flex-col px-2 pt-3 text-lg font-semibold sm:text-xl sm:px-5 dark:text-white">
         Rooms 🔒
       </p>
       <div className="py-1">