Further simplified the dashboard page and moved functionality to separate components

This commit is contained in:
Keannu Christian Bernasol 2023-12-14 18:05:27 +08:00
parent d220078e69
commit fce4725ff9
4 changed files with 34 additions and 74 deletions

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"} />