Add useRouter hook and update ChatFooter component

frontend/src/components/Chat/ChatFooter.tsx

@@ -10,6 +10,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import { toast, ToastContainer } from 'react-toastify';
 import { v4 as uuidv4 } from 'uuid';
 import { useRoom } from "@/contexts/RoomContext";
+import { useRouter } from "next/navigation";
 
 
 function ChatFooter({ roomId }: { roomId: string }) {
@@ -26,6 +27,7 @@ function ChatFooter({ roomId }: { roomId: string }) {
   const [image, setImage] = useState<string | null>(null);
   const [showToast, setShowToast] = useState<boolean>(false);
   const [toastMessage, setToastMessage] = useState<string>("");
+  const router = useRouter();
   const onEmojiPick = (emojiObj: any) => {
     setMessage((prevInput) => prevInput + emojiObj.emoji);
     inputRef.current.focus();
@@ -134,6 +136,8 @@ function ChatFooter({ roomId }: { roomId: string }) {
     case "quit":
       const username = localStorage.getItem("name");
       socket?.emit("leave_room", username, roomId);
+      setMyRooms(myRooms.filter((room) => room.id !== roomId));
+      router.push("/chat/1");
       break;
     case "users":
       socket?.emit("users");