$

src/components/NavBar/NavBar.jsx

@@ -2,14 +2,10 @@ import { useAuth } from "../../hooks";
 import "./NavBar.scss";
 import { logout } from "../../api";
 import { Link } from "react-router-dom/";
-import { getRoomsLength } from "../../api";
-import { useEffect } from "react";
-import { useState } from "react";
 import refresh from "../../services/pageManagement";
 
 export default function NavBar() {
   const { user } = useAuth();
-  const [roomsLength, setRoomsLength] = useState(null);
 
   const onLogout = () => {
     logout().then((res) => {
@@ -19,43 +15,25 @@ export default function NavBar() {
     });
   };
 
-  const refreshAllDatas = async () => {
-    const roomsLen = await getRoomsLength();
-    if (!roomsLen) {
-      return;
-    }
-    setRoomsLength(roomsLen);
-  };
-
-  useEffect(() => {
-    refreshAllDatas();
-  }, []);
-
   return (
     <nav id="nav-container">
       <ul id="leafs-container">
         {user && (
           <li className="leaf">
-            <Link onClick={refreshAllDatas} to="/">
+            <Link to="/">Accueil</Link>
-              Accueil
-            </Link>
           </li>
         )}
 
         {user && (
           <li className="leaf">
-            <Link onClick={refreshAllDatas} to="rooms">
+            <Link to="rooms">Pieces</Link>
-              Pieces {roomsLength ? `(${roomsLength})` : "(██)"}
-            </Link>
           </li>
         )}
 
         {user ? (
           <div className="leaf-into">
             <li className="leaf">
-              <Link onClick={refreshAllDatas} to="profile">
+              <Link to="profile">Profil</Link>
-                Profil
-              </Link>
             </li>
 
             <button className="leaf-btn" onClick={onLogout}>

src/layout/Layout.scss

@@ -1,5 +1,5 @@
 #layout-container {
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 }

src/pages/home/home.scss

@@ -35,13 +35,13 @@
                 display: flex;
                 flex-direction: column;
                 gap: 10px;
-                margin-top: 20px;
-                max-height: 500px;
                 overflow: auto;
+                flex-wrap: wrap;
 
                 .rooms {
-                    border: 1px dashed $good_black;
+                    width: 50%;
                     padding: 10px;
+                    border: 1px dashed $good_black;
                 }
             }
 

src/pages/profile/Profile.jsx

@@ -131,9 +131,9 @@ export default function Profile() {
   return (
     <div id="profile-container">
       <div id="title-container">
-        <span id="title">
+        <h3 id="title">
           Heureux de vous voir <b>{user.user.username}</b> !
-        </span>
+        </h3>
 
         <StylizedBtn
           perso_style={{

src/pages/profile/Profile.scss

@@ -6,7 +6,7 @@
     justify-content: center;
     align-items: center;
     gap: 20px;
-    margin-top: 15px;
+    margin-top: 30px;
 
     #title-container {
         display: flex;

src/pages/room/Room.jsx

@@ -121,9 +121,9 @@ export default function Room() {
     <div id="room-container">
       {data.name ? (
         <div id="room-title-container">
-          <span id="room-title">
+          <h3 id="room-title">
             <u>{data.name}</u>
-          </span>
+          </h3>
         </div>
       ) : null}
 

src/pages/rooms/Rooms.jsx

@@ -6,6 +6,7 @@ import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
 import AddBtn from "./../../components/AddBtn/AddBtn";
 import { useAuth } from "../../hooks";
 import { useParams } from "react-router-dom";
+import { getRoomsLength } from "../../api";
 import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
 
 export default function Rooms() {
@@ -16,15 +17,22 @@ export default function Rooms() {
   const [displayRooms, setDisplayRooms] = useState(null);
   const { pageIndex } = useParams();
   const [virtualIndex, setVirtualIndex] = useState(0);
+  const [roomsLen, setRoomLen] = useState(null);
 
   const onClickCreate = () => {
     const name = prompt("Nom de la piece ?");
 
+    if (!name || name.length > 15) {
+      alert("Assurez-vous que le nombre de characteres est inferieur a 15");
+      return;
+    }
+
     createRoom(name).then((res) => {
       setIsErr(false);
       const values = [...rooms];
       values.push(res);
       setRooms(values);
+      alert(`Creation de la piece ${name} reussite !`);
     });
   };
 
@@ -90,14 +98,29 @@ export default function Rooms() {
     if (!confirmation || confirmation.toLocaleLowerCase() !== "oui") return;
 
     deleteRoom(id).then((res) => {
-      const values = rooms.filter((e) => e._id !== id);
+      const values = rooms.map((subRooms) => {
+        return subRooms.filter((e) => {
+          return e._id !== id;
+        });
+      });
+
       setRooms(values);
+      setDisplayRooms(values[virtualIndex]);
+      console.log(res);
+
+      setRoomLen(roomsLen - 1);
+
+      alert(`Vous venez de supprimer la piece ${name}`);
     });
   };
 
   useEffect(() => {
     document.title = `Pieces`;
 
+    getRoomsLength().then((res) => {
+      setRoomLen(res);
+    });
+
     getRooms().then((res) => {
       if (res.length === 0) {
         setIsLoad(false);
@@ -111,6 +134,14 @@ export default function Rooms() {
 
   return (
     <div id="rooms-container">
+      <div id="rooms-headers">
+        <h3 id="rooms-title">
+          Voici vos{" "}
+          {roomsLen ? roomsLen : <span id="rooms-title-loading">██</span>}{" "}
+          pieces
+        </h3>
+      </div>
+
       {displayRooms ? (
         <div id="rooms-list-container">
           {displayRooms.map((i, j) => (
@@ -126,10 +157,7 @@ export default function Rooms() {
 
               <div className="room-id-container">
                 <span className="label-id">ID</span>
-                <span className="room-id">
+                <span className="room-id">{i._id.slice(0, 6)}...</span>
-                  {i._id.slice(0, 5)}
-                  ...
-                </span>
               </div>
 
               <div className="room-name-container">

src/pages/rooms/Rooms.scss

@@ -5,8 +5,19 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
     gap: 30px;
 
+    #rooms-headers {
+        margin-top: 30px;
+        #rooms-title {
+            #rooms-title-loading {
+                color: $primary;
+            }
+        }
+    }
+
     #pagination-container {
         display: flex;
         flex-direction: row;
@@ -53,6 +64,7 @@
         flex-wrap: wrap;
         gap: 50px;
         margin-top: 20px;
+        width: 50%;
 
         .room {
             width: 200px;

src/router.jsx

@@ -8,6 +8,7 @@ import { Home, Login, Register } from "./pages";
 export const Router = () => (
   <Routes>
     <Route index element={<Home />} />
+    <Route path="*" element={<Home />}></Route>
     <Route path="home" element={<Home />} />
     <Route path="stats" element={<Home />} />
     <Route path="login" element={<Login />} />