$

src/components/NavBar/NavBar.jsx

@@ -2,37 +2,60 @@ 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) => {
       if (res === "Ok") {
-        window.location.reload();
+        refresh();
       }
     });
   };
 
+  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 to="/">Accueil</Link>
+            <Link onClick={refreshAllDatas} to="/">
+              Accueil
+            </Link>
           </li>
         )}
 
         {user && (
           <li className="leaf">
-            <Link to="rooms">Pieces</Link>
+            <Link onClick={refreshAllDatas} to="rooms">
+              Pieces {roomsLength ? `(${roomsLength})` : "(██)"}
+            </Link>
           </li>
         )}
 
         {user ? (
           <div className="leaf-into">
             <li className="leaf">
-              <Link to="profile">Profil</Link>
+              <Link onClick={refreshAllDatas} to="profile">
+                Profil
+              </Link>
             </li>
 
             <button className="leaf-btn" onClick={onLogout}>