$

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">
-                  {i._id.slice(0, 5)}
-                  ...
-                </span>
+                <span className="room-id">{i._id.slice(0, 6)}...</span>
               </div>
 
               <div className="room-name-container">