$

src/pages/rooms/Rooms.jsx

@@ -2,14 +2,18 @@ import "./Rooms.scss";
 import { useState, useEffect } from "react";
 import { createRoom, getRooms, deleteRoom } from "../../api";
 import { Link } from "react-router-dom";
+import { MagnifyingGlass } from "react-loader-spinner";
 
 export default function Rooms() {
-  const [rooms, setRooms] = useState([]);
+  const [rooms, setRooms] = useState(null);
+  const [isLoad, setIsLoad] = useState(true);
+  const [isErr, setIsErr] = useState(false);
 
   const onClickCreate = () => {
     const name = prompt("Nom de la piece ?");
 
     createRoom(name).then((res) => {
+      setIsErr(false);
       const values = [...rooms];
       values.push(res);
       setRooms(values);
@@ -22,7 +26,7 @@ export default function Rooms() {
       "non",
     );
 
-    if (confirmation.toLocaleLowerCase() !== "oui") return;
+    if (!confirmation || !confirmation.toLocaleLowerCase() !== "oui") return;
 
     deleteRoom(id).then((res) => {
       const values = rooms.filter((e) => e._id !== id);
@@ -32,15 +36,18 @@ export default function Rooms() {
 
   useEffect(() => {
     getRooms().then((res) => {
+      if (res.length === 0) {
+        setIsLoad(false);
+        setIsErr(true);
+      }
+
       setRooms(res);
     });
   }, []);
 
   return (
     <div id="rooms-container">
-      {rooms.length === 0 ? (
-        <span id="err-no-rooms">Aucune piece enregistree</span>
-      ) : (
+      {rooms ? (
         <div id="rooms-list-container">
           {rooms.map((i, j) => (
             <div className="room" key={j}>
@@ -75,8 +82,25 @@ export default function Rooms() {
             </div>
           ))}
         </div>
+      ) : (
+        <div>
+          <MagnifyingGlass
+            visible={isLoad}
+            height="100"
+            width="100"
+            ariaLabel="magnifying-glass-loading"
+            wrapperStyle={{}}
+            wrapperClass="magnifying-glass-wrapper"
+            glassColor="#ffffff"
+            color="#7B6A9C"
+          />
+        </div>
       )}
 
+      {isErr && !isLoad ? (
+        <span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
+      ) : null}
+
       <div id="rooms-add-container">
         <div id="rooms-text-on">Creer une nouvelle piece</div>
         <button id="add-rooms" onClick={onClickCreate}>

src/pages/rooms/Rooms.scss

@@ -1,3 +1,5 @@
+@import "../../assets/styles/vars.scss";
+
 #rooms-container {
     height: 100%;
     width: 100%;
@@ -5,7 +7,7 @@
     #err-no-rooms {
         height: 100%;
         display: flex;
-        color: red;
+        color: $red;
         font-weight: bold;
         justify-content: center;
         align-items: center;
@@ -26,7 +28,8 @@
             justify-content: center;
             align-items: center;
             flex-direction: column;
-            border: 1px dashed rgb(54, 54, 54);
+            border: 1px dashed $good_black;
+            border-radius: $my_border_rad;
             position: relative;
 
             &:hover {
@@ -41,8 +44,9 @@
                 position: absolute;
                 top: 0;
                 right: 0;
-                background: red;
+                background: $red;
                 display: none;
+                border-top-right-radius: $my_border_rad;
 
                 .room-delete-ascii {
                     display: flex;
@@ -50,7 +54,7 @@
                     height: 100%;
                     justify-content: center;
                     align-items: center;
-                    color: white;
+                    color: $white;
                     font-weight: bold;
                 }
             }
@@ -95,8 +99,8 @@
 
         #rooms-text-on {
             width: 100px;
-            background: rgb(123, 106, 156);
-            color: white;
+            background: $primary;
+            color: $white;
             display: none;
         }
 
@@ -106,8 +110,8 @@
             height: 40px;
             border-radius: 50px;
             border: none;
-            background: rgb(123, 106, 156);
-            color: white;
+            background: $primary;
+            color: $white;
             font-size: 1em;
             font-weight: bold;