$

src/pages/rooms/Rooms.jsx

@@ -5,13 +5,17 @@ import { Link } from "react-router-dom";
 import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
 import AddBtn from "./../../components/AddBtn/AddBtn";
 import { useAuth } from "../../hooks";
+import { useParams } from "react-router-dom";
+import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
 
 export default function Rooms() {
   const { _user } = useAuth();
   const [rooms, setRooms] = useState(null);
   const [isLoad, setIsLoad] = useState(true);
   const [isErr, setIsErr] = useState(false);
-  const [splicedRooms, setSplicedRooms] = useState(null);
+  const [displayRooms, setDisplayRooms] = useState(null);
+  const { pageIndex } = useParams();
+  const [virtualIndex, setVirtualIndex] = useState(0);
 
   const onClickCreate = () => {
     const name = prompt("Nom de la piece ?");
@@ -37,7 +41,44 @@ export default function Rooms() {
       return partitions;
     };
 
-    console.log(splicer(data, 8));
+    const newData = splicer(data, 8);
+    const blabla = newData[pageIndex ? pageIndex : 0];
+
+    if (pageIndex) {
+      setVirtualIndex(parseInt(pageIndex, 10));
+    }
+
+    setRooms(newData);
+
+    console.log(newData[pageIndex ? pageIndex : 0]);
+    setDisplayRooms(newData[pageIndex ? pageIndex : 0]);
+
+    if (!blabla) {
+      window.location.href = "/rooms/0";
+      setVirtualIndex(0);
+    }
+  };
+
+  const handleBefore = () => {
+    if (virtualIndex === 0) {
+      return;
+    }
+
+    const index = virtualIndex - 1;
+    console.log(rooms[index]);
+    setDisplayRooms(rooms[index]);
+    setVirtualIndex(index);
+  };
+
+  const handleNext = () => {
+    if (virtualIndex >= rooms.length - 1) {
+      return;
+    }
+
+    const index = virtualIndex + 1;
+    console.log(rooms[index]);
+    setDisplayRooms(rooms[index]);
+    setVirtualIndex(index);
   };
 
   const onClickDelete = (id, name) => {
@@ -70,9 +111,9 @@ export default function Rooms() {
 
   return (
     <div id="rooms-container">
-      {rooms ? (
+      {displayRooms ? (
         <div id="rooms-list-container">
-          {rooms.map((i, j) => (
+          {displayRooms.map((i, j) => (
             <div className="room" key={j}>
               <div
                 className="room-delete"
@@ -86,12 +127,7 @@ export default function Rooms() {
               <div className="room-id-container">
                 <span className="label-id">ID</span>
                 <span className="room-id">
-                  {i._id[0]}
-                  {i._id[1]}
-                  {i._id[2]}
-                  {i._id[3]}
-                  {i._id[4]}
-                  {i._id[5]}
+                  {i._id.slice(0, 5)}
                   ...
                 </span>
               </div>
@@ -109,6 +145,28 @@ export default function Rooms() {
         <LoaderSpace isVisible={isLoad} isCenterLoader={true} />
       )}
 
+      {rooms ? (
+        <div id="pagination-container">
+          {virtualIndex > 0 ? (
+            <StylizedBtn
+              perso_style={{ width: "90px", height: "40px" }}
+              text="Precedent"
+              handle={handleBefore}
+            />
+          ) : null}
+
+          <div id="pagination-index">{virtualIndex}</div>
+
+          {virtualIndex < rooms.length - 1 ? (
+            <StylizedBtn
+              perso_style={{ width: "90px", height: "40px" }}
+              text="Suivant"
+              handle={handleNext}
+            />
+          ) : null}
+        </div>
+      ) : null}
+
       {isErr && !isLoad ? (
         <span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
       ) : null}