From 2b6c27962438c704cf309c3ed7cd4f325e946694 Mon Sep 17 00:00:00 2001
From: etienne <etienne.mentrel@scafe.io>
Date: Fri, 16 Feb 2024 18:19:18 +0100
Subject: [PATCH] Fix login form and add animation to show/hide AddRoomPanel

---
 frontend/src/components/Home/LoginForm.tsx    |  1 -
 frontend/src/components/Room/AddRoomPanel.tsx |  8 +++++--
 frontend/src/components/Room/RoomSideBar.tsx  | 22 ++++++++++++++++---
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Home/LoginForm.tsx b/frontend/src/components/Home/LoginForm.tsx
index 7c1877f..fb401f2 100644
--- a/frontend/src/components/Home/LoginForm.tsx
+++ b/frontend/src/components/Home/LoginForm.tsx
@@ -11,7 +11,6 @@ function LoginForm() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const { setUsername } = useUser();
   const router = useRouter();
-  const { socket } = useSocket();
 
   const handleInputChange = (e: any) => {
     setName(e.target.value);
diff --git a/frontend/src/components/Room/AddRoomPanel.tsx b/frontend/src/components/Room/AddRoomPanel.tsx
index f798311..a3b805d 100644
--- a/frontend/src/components/Room/AddRoomPanel.tsx
+++ b/frontend/src/components/Room/AddRoomPanel.tsx
@@ -42,7 +42,9 @@ function AddRoomPanel({ hideAddRoomPanel }: any) {
     setMyRooms([...myRooms, newRoom]);
     hideAddRoomPanel(true);
     socket?.emit("join_room", joinId);
-    router.replace(`/chat/${joinId}`);
+    setTimeout(() => {
+      router.replace(`/chat/${joinId}`);
+    }, 50);
   };
 
   const handleSubmitCreate = (e: any) => {
@@ -58,7 +60,9 @@ function AddRoomPanel({ hideAddRoomPanel }: any) {
     setMyRooms([...myRooms, newRoom]);
     hideAddRoomPanel(true);
     socket?.emit("join_room", id, title);
-    router.replace(`/chat/${id}`);
+    setTimeout(() => {
+      router.replace(`/chat/${id}`);
+    }, 50);
   };
 
   return (
diff --git a/frontend/src/components/Room/RoomSideBar.tsx b/frontend/src/components/Room/RoomSideBar.tsx
index 6ffc42a..32225c6 100644
--- a/frontend/src/components/Room/RoomSideBar.tsx
+++ b/frontend/src/components/Room/RoomSideBar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import RoomCard from "./RoomCard";
 import IRoom from "@/interfaces/IRoom";
 import { useRoom } from "@/contexts/RoomContext";
@@ -9,6 +9,7 @@ import AddRoomPanel from "./AddRoomPanel";
 import ThemeSwitcher from "../shared/themeswitcher";
 import { useRouter } from "next/navigation";
 import { useUser } from "@/contexts/UserContext";
+import anime from "animejs";
 
 function RoomSideBar() {
   const [showAddRoomPanel, setShowAddRoomPanel] = useState(false);
@@ -16,6 +17,7 @@ function RoomSideBar() {
   const { socket, roomUsers } = useSocket();
   const router = useRouter();
   const { username } = useUser();
+  const addRoomPanelRef = useRef<HTMLDivElement>(null);
 
   const hideAddRoomPanel = () => setShowAddRoomPanel(false);
 
@@ -36,6 +38,17 @@ function RoomSideBar() {
     router.push("/");
   };
 
+  useEffect(() => {
+    if (showAddRoomPanel) {
+      anime({
+        targets: addRoomPanelRef.current,
+        opacity: [0, 1],
+        translateY: [-100, 0],
+        duration: 1000,
+      });
+    }
+  }, [showAddRoomPanel]);
+
   return (
     <div className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg">
       <div className="flex justify-center">
@@ -79,8 +92,11 @@ function RoomSideBar() {
         <BiMessageAdd size={30} />
       </div>
       {showAddRoomPanel && (
-        <div>
-          <AddRoomPanel hideAddRoomPanel={hideAddRoomPanel} />
+        <div className="fixed top-0 left-0 w-full h-full z-50">
+          <div className="absolute inset-0 backdrop-blur-md"></div>
+          <div ref={addRoomPanelRef}>
+            <AddRoomPanel hideAddRoomPanel={hideAddRoomPanel} />
+          </div>
         </div>
       )}
     </div>