From d220078e69ef9fb9262900c9ad48184206b2eae6 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 14 Dec 2023 18:00:58 +0800 Subject: [PATCH 1/3] Move modal states to respective components --- .../DashboardPage/TechnicianButtons.tsx | 56 ++++++++++++++++--- src/Pages/DashboardPage/DashboardPage.tsx | 50 +---------------- 2 files changed, 48 insertions(+), 58 deletions(-) diff --git a/src/Components/DashboardPage/TechnicianButtons.tsx b/src/Components/DashboardPage/TechnicianButtons.tsx index c388b58..793c782 100644 --- a/src/Components/DashboardPage/TechnicianButtons.tsx +++ b/src/Components/DashboardPage/TechnicianButtons.tsx @@ -10,13 +10,13 @@ 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>; - SetAddItemModalOpen: Dispatch>; -}; -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: [ @@ -99,7 +99,7 @@ export default function TechnicianButtons(props: props) { }, }} onClick={() => { - props.SetAddItemModalOpen(true); + SetAddItemModalOpen(true); }} > { - props.SetAddSKUModalOpen(true); + SetAddSKUModalOpen(true); }} > + 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", + }} + > + + + 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", + }} + > + + ); } diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index ec58fa6..f5b89fd 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -6,10 +6,6 @@ import { 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"; @@ -34,9 +30,6 @@ export default function Dashboard() { }); const isLoading = queries.some((result) => result.isLoading); - const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); - const [additemmodalOpen, SetAddItemModalOpen] = useState(false); - if (isLoading) { return (
@@ -71,52 +64,11 @@ export default function Dashboard() { - + - 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", - }} - > - - - 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", - }} - > - -
); } From fce4725ff9f2eeaefae7cbb0a5e31222b4f80f41 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 14 Dec 2023 18:05:27 +0800 Subject: [PATCH 2/3] Further simplified the dashboard page and moved functionality to separate components --- .../DashboardPage/TechnicianButtons.tsx | 22 -------- .../DashboardPage/TechnicianWidgets.tsx | 17 ++++++ .../RestrictedComponent.tsx | 17 ++++++ src/Pages/DashboardPage/DashboardPage.tsx | 52 ------------------- 4 files changed, 34 insertions(+), 74 deletions(-) diff --git a/src/Components/DashboardPage/TechnicianButtons.tsx b/src/Components/DashboardPage/TechnicianButtons.tsx index 793c782..a9aa1a4 100644 --- a/src/Components/DashboardPage/TechnicianButtons.tsx +++ b/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"; @@ -18,22 +16,6 @@ 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 ( <>

{ diff --git a/src/Components/DashboardPage/TechnicianWidgets.tsx b/src/Components/DashboardPage/TechnicianWidgets.tsx index ee9f39e..15b132c 100644 --- a/src/Components/DashboardPage/TechnicianWidgets.tsx +++ b/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 ( + <> + +

+ Loading +

+ + ); + } return (
+ +

+ Loading +

+ + ); + } if (props.allow_only === "Teacher") { if (user.data && user.data.is_teacher) { return <>{props.children}; diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index f5b89fd..1c77d0e 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -1,62 +1,10 @@ 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 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() { - const queries = useQueries({ - queries: [ - { - queryKey: ["equipments"], - queryFn: EquipmentsAPI, - }, - { - queryKey: ["equipment_instances"], - queryFn: EquipmentInstancesAPI, - }, - { - queryKey: ["user"], - queryFn: UserAPI, - }, - ], - }); - const isLoading = queries.some((result) => result.isLoading); - - if (isLoading) { - return ( -
-
-
- -

- Loading -

-
-
- ); - } return (
From be6e1ba229d5ab71d64626e470d43ab9169f1758 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 14 Dec 2023 18:08:27 +0800 Subject: [PATCH 3/3] Added student type to component and page restrictions --- .../RestrictedComponent/RestrictedComponent.tsx | 4 ++++ src/Components/RestrictedPage/RestrictedPage.tsx | 14 ++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/Components/RestrictedComponent/RestrictedComponent.tsx b/src/Components/RestrictedComponent/RestrictedComponent.tsx index 8539599..8517d54 100644 --- a/src/Components/RestrictedComponent/RestrictedComponent.tsx +++ b/src/Components/RestrictedComponent/RestrictedComponent.tsx @@ -33,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 <>; } diff --git a/src/Components/RestrictedPage/RestrictedPage.tsx b/src/Components/RestrictedPage/RestrictedPage.tsx index f8cf63f..8e9f6a0 100644 --- a/src/Components/RestrictedPage/RestrictedPage.tsx +++ b/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]);