Qubasa-Qubasa-main (#262)

UI: Connected UI to API

pkgs/ui/src/components/table/nodeTable.tsx

@@ -1,28 +1,22 @@
 "use client";
 
-import { useState, ChangeEvent, SetStateAction, Dispatch } from "react";
+import { useState, ChangeEvent, useMemo } from "react";
 import Box from "@mui/material/Box";
 import TablePagination from "@mui/material/TablePagination";
 import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import SearchIcon from "@mui/icons-material/Search";
-import { useTheme } from "@mui/material";
+import { CircularProgress, Grid, useTheme } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
-import { TableData } from "@/data/nodeData";
 import { EnhancedTableToolbar } from "./enhancedTableToolbar";
 import { StickySpeedDial } from "./stickySpeedDial";
 import { NodeTableContainer } from "./nodeTableContainer";
 import { SearchBar } from "./searchBar";
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
+import { useMachines } from "../hooks/useMachines";
+import { Machine } from "@/api/model/machine";
 
-export interface NodeTableProps {
-  tableData: TableData[];
-}
-
-export function NodeTable(props: NodeTableProps) {
-  let { tableData } = props;
+export function NodeTable() {
+  const machines = useMachines();
 
   const theme = useTheme();
   const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
@@ -30,7 +24,15 @@ export function NodeTable(props: NodeTableProps) {
   const [selected, setSelected] = useState<string | undefined>(undefined);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
-  const [filteredList, setFilteredList] = useState<TableData[]>(tableData);
+  const [filteredList, setFilteredList] = useState<readonly Machine[]>([]);
+
+  const tableData = useMemo(() => {
+    const tableData = machines.data.map((machine) => {
+      return { name: machine.name, status: machine.status };
+    });
+    setFilteredList(tableData);
+    return tableData;
+  }, [machines.data]);
 
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage);
@@ -41,38 +43,53 @@ export function NodeTable(props: NodeTableProps) {
     setPage(0);
   };
 
-  return (
-    <Box sx={{ width: "100%" }}>
-      <Paper sx={{ width: "100%", mb: 2 }}>
-        <StickySpeedDial selected={selected} />
-        <EnhancedTableToolbar tableData={tableData}>
-          <Grid2 xs={12}>
-            <SearchBar
-              tableData={tableData}
-              setFilteredList={setFilteredList}
-            />
-          </Grid2>
-        </EnhancedTableToolbar>
-        <NodeTableContainer
-          tableData={filteredList}
-          page={page}
-          rowsPerPage={rowsPerPage}
-          dense={false}
-          selected={selected}
-          setSelected={setSelected}
-        />
-        {/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
-        <TablePagination
-          rowsPerPageOptions={[5, 10, 25]}
-          labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
-          component="div"
-          count={filteredList.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        />
-      </Paper>
-    </Box>
-  );
+  if (machines.isLoading) {
+    return (
+      <Grid
+        container
+        style={{ height: "100vh" }} // make the container fill the screen height
+        alignItems="center" // center the items vertically
+        justifyContent="center" // center the items horizontally
+      >
+        <CircularProgress size={80} color="secondary" />
+      </Grid>
+    );
+  } else {
+    return (
+      <Box sx={{ width: "100%" }}>
+        <Paper sx={{ width: "100%", mb: 2 }}>
+          <StickySpeedDial selected={selected} />
+          <EnhancedTableToolbar tableData={tableData}>
+            <Grid2 xs={12}>
+              <SearchBar
+                tableData={tableData}
+                setFilteredList={setFilteredList}
+              />
+            </Grid2>
+          </EnhancedTableToolbar>
+
+          <NodeTableContainer
+            tableData={filteredList}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            dense={false}
+            selected={selected}
+            setSelected={setSelected}
+          />
+
+          {/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25]}
+            labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
+            component="div"
+            count={filteredList.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </Paper>
+      </Box>
+    );
+  }
 }