keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Further simplified the dashboard page and moved functionality to separate components

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-14 18:05:27 +08:00
parent d220078e69
commit fce4725ff9
4 changed files with 34 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/Components/DashboardPage/TechnicianButtons.tsx
View file

@ -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 (
<>
<p
@ -61,10 +43,6 @@ export default function TechnicianButtons() {
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
display:
queries[2].data && queries[2].data.is_technician
? "initial"
: "none",
},
}}
onClick={() => {

17
src/Components/DashboardPage/TechnicianWidgets.tsx
View file

@ -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

17
src/Components/RestrictedComponent/RestrictedComponent.tsx
View file

@ -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}</>;

52
src/Pages/DashboardPage/DashboardPage.tsx
View file

@ -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 (
<div style={styles.background}>
<Header label={"Dashboard"} />
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
</div>
);
}
return (
<div style={styles.background}>
<Header label={"Dashboard"} />