changes

src/Components/DashboardPage/TechnicianButtons.tsx

@@ -1,6 +1,4 @@
-import { useQueries } from "@tanstack/react-query";
 import styles from "../../styles";
-import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@mui/material";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
@@ -10,30 +8,14 @@ import NoteIcon from "@mui/icons-material/Note";
 import { colors } from "../../styles";
 import ScienceIcon from "@mui/icons-material/Science";
 import ColorizeIcon from "@mui/icons-material/Colorize";
-import { Dispatch, SetStateAction } from "react";
-
-type props = {
-  SetAddSKUModalOpen: Dispatch<SetStateAction<boolean>>;
-  SetAddItemModalOpen: Dispatch<SetStateAction<boolean>>;
-};
-export default function TechnicianButtons(props: props) {
+import Popup from "reactjs-popup";
+import AddItemModal from "../AddItemModal/AddItemModal";
+import AddSKUModal from "../AddSKUModal/AddSKUModal";
+import { useState } from "react";
+export default function TechnicianButtons() {
+  const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
+  const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
   const navigate = useNavigate();
-  const queries = useQueries({
-    queries: [
-      {
-        queryKey: ["equipments"],
-        queryFn: EquipmentsAPI,
-      },
-      {
-        queryKey: ["equipment_instances"],
-        queryFn: EquipmentInstancesAPI,
-      },
-      {
-        queryKey: ["user"],
-        queryFn: UserAPI,
-      },
-    ],
-  });
   return (
     <>
       <p
@@ -61,10 +43,6 @@ export default function TechnicianButtons(props: props) {
               alignSelf: "center",
               justifyContent: "center",
               flexWrap: "wrap",
-              display:
-                queries[2].data && queries[2].data.is_technician
-                  ? "initial"
-                  : "none",
             },
           }}
           onClick={() => {
@@ -99,7 +77,7 @@ export default function TechnicianButtons(props: props) {
             },
           }}
           onClick={() => {
-            props.SetAddItemModalOpen(true);
+            SetAddItemModalOpen(true);
           }}
         >
           <AddToQueueIcon
@@ -130,7 +108,7 @@ export default function TechnicianButtons(props: props) {
             },
           }}
           onClick={() => {
-            props.SetAddSKUModalOpen(true);
+            SetAddSKUModalOpen(true);
           }}
         >
           <NoteAddIcon
@@ -256,6 +234,44 @@ export default function TechnicianButtons(props: props) {
           </p>
         </Button>
       </div>
+      <Popup
+        open={addSKUmodalOpen}
+        onClose={() => SetAddSKUModalOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={{
+          width: "32rem",
+          borderRadius: 16,
+          borderColor: "grey",
+          borderStyle: "solid",
+          borderWidth: 1,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <AddSKUModal />
+      </Popup>
+      <Popup
+        open={additemmodalOpen}
+        onClose={() => SetAddItemModalOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={{
+          width: "32rem",
+          borderRadius: 16,
+          borderColor: "grey",
+          borderStyle: "solid",
+          borderWidth: 1,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <AddItemModal />
+      </Popup>
     </>
   );
 }

src/Components/DashboardPage/TechnicianWidgets.tsx

@@ -1,6 +1,7 @@
 import { useQueries } from "@tanstack/react-query";
 import styles from "../../styles";
 import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
+import CircularProgress from "@mui/material/CircularProgress";
 
 export default function TechnicianWidgets() {
   const queries = useQueries({
@@ -19,6 +20,22 @@ export default function TechnicianWidgets() {
       },
     ],
   });
+  const isLoading = queries.some((result) => result.isLoading);
+  if (isLoading) {
+    return (
+      <>
+        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_L,
+          }}
+        >
+          Loading
+        </p>
+      </>
+    );
+  }
   return (
     <div style={styles.flex_column}>
       <div

src/Components/RestrictedComponent/RestrictedComponent.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { UserAPI } from "../API/API";
 import { useQuery } from "@tanstack/react-query";
+import { CircularProgress } from "@mui/material";
+import styles from "../../styles";
 
 type props = {
   allow_only: string;
@@ -8,6 +10,21 @@ type props = {
 };
 export default function RestrictedComponent(props: props) {
   const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
+  if (user.isLoading) {
+    return (
+      <>
+        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_L,
+          }}
+        >
+          Loading
+        </p>
+      </>
+    );
+  }
   if (props.allow_only === "Teacher") {
     if (user.data && user.data.is_teacher) {
       return <>{props.children}</>;
@@ -16,6 +33,10 @@ export default function RestrictedComponent(props: props) {
     if (user.data && user.data.is_technician) {
       return <>{props.children}</>;
     }
+  } else if (props.allow_only === "Student") {
+    if (user.data && !user.data.is_technician && !user.data.is_teacher) {
+      return <>{props.children}</>;
+    }
   }
   return <></>;
 }

src/Components/RestrictedPage/RestrictedPage.tsx

@@ -39,6 +39,20 @@ export default function RestrictedPage(props: props) {
           theme: "light",
         });
       }
+    } else if (props.allow_only == "Student") {
+      if (user.data && (user.data.is_technician || user.data.is_teacher)) {
+        navigate("/");
+        toast("You are not a student!", {
+          position: "bottom-center",
+          autoClose: 2000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+        });
+      }
     }
   }, [navigate, props.allow_only, user.data]);
 

src/Pages/DashboardPage/DashboardPage.tsx

@@ -1,21 +1,11 @@
 import Header from "../../Components/Header/Header";
 import styles from "../../styles";
-import { useQueries } from "@tanstack/react-query";
-import {
-  EquipmentsAPI,
-  EquipmentInstancesAPI,
-  UserAPI,
-} from "../../Components/API/API";
-import { useState } from "react";
-import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
-import Popup from "reactjs-popup";
-import AddItemModal from "../../Components/AddItemModal/AddItemModal";
 import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
 import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets";
 import TechnicianButtons from "../../Components/DashboardPage/TechnicianButtons";
 import TechnicianLogs from "../../Components/DashboardPage/TechnicianLogs";
-import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 export default function Dashboard() {
+<<<<<<< HEAD
   const queries = useQueries({
     queries: [
       {
@@ -65,6 +55,8 @@ export default function Dashboard() {
       </div>
     );
   }
+=======
+>>>>>>> be6e1ba229d5ab71d64626e470d43ab9169f1758
   return (
     <div style={styles.background}>
       <Header  label={"Dashboard"} />
@@ -72,52 +64,11 @@ export default function Dashboard() {
         <TechnicianWidgets />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Technician"}>
-        <TechnicianButtons
-          SetAddItemModalOpen={SetAddItemModalOpen}
-          SetAddSKUModalOpen={SetAddSKUModalOpen}
-        />
+        <TechnicianButtons />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Technician"}>
         <TechnicianLogs />
       </RestrictedComponent>
-      <Popup
-        open={addSKUmodalOpen}
-        onClose={() => SetAddSKUModalOpen(false)}
-        modal
-        position={"top center"}
-        contentStyle={{
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-        }}
-      >
-        <AddSKUModal />
-      </Popup>
-      <Popup
-        open={additemmodalOpen}
-        onClose={() => SetAddItemModalOpen(false)}
-        modal
-        position={"top center"}
-        contentStyle={{
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-        }}
-      >
-        <AddItemModal />
-      </Popup>
     </div>
   );
 }