listing devices and linking them to their respoective page

src/pages/Devices.tsx

@@ -1,20 +1,41 @@
 import { DeveloperBoard as ProvisionIcon } from "@mui/icons-material";
-import { IconButton, Theme, Tooltip } from "@mui/material";
+import { IconButton, Theme, Tooltip, Typography } from "@mui/material";
 import { blue } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
-import { useState } from "react";
+import { pond } from "protobuf-ts/pond";
+import { useDeviceAPI } from "providers";
+import { useEffect, useState } from "react";
+import PageContainer from "./PageContainer";
+import { useMobile } from "hooks";
+import { useLocation, useNavigate } from "react-router-dom";
+import { or } from "utils/types";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
     provisionIcon: {
       color: blue["700"]
+    },
+    cellContainer: {
+      padding: theme.spacing(1)
     }
   });
 });
 
 export default function Devices() {
+  const isMobile = useMobile();
   const classes = useStyles();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const deviceAPI = useDeviceAPI();
+  const [limit, setLimit] = useState(10);
+  const [offset, setOffset] = useState(0);
+  const [order, ] = useState<"asc" | "desc">("asc");
+  const [orderBy, ] = useState("name");
+  const [search, setSearch] = useState("");
+  const [total, setTotal] = useState(0);
+  const [devices, setDevices] = useState<pond.Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
 
   const openProvisionDialog = () => {
@@ -25,18 +46,73 @@ export default function Devices() {
     setIsProvisionDialogOpen(false);
   };
 
+  const loadDevices = () => {
+    deviceAPI.list(limit, offset*limit, order, orderBy, search).then(resp => {
+      setDevices(resp.data.devices)
+      setTotal(resp.data.total)
+    })
+  }
+
+  useEffect(() => {
+    loadDevices()
+  }, [limit, offset, order, orderBy, search])
+
+  const handleChange = (event: any) => {
+    setLimit(event.target.value);
+  };
+
+  const appendToUrl = (appendage: number | string) => {
+    const basePath = location.pathname.replace(/\/$/, ""); // Ensure no trailing slash
+    return(`${basePath}/${appendage}`);
+  };
+
+  const toDevice = (device: pond.Device) => {
+    navigate(appendToUrl(or(device.settings?.deviceId, "")))
+  };
+
+  const columns = (): Column<pond.Device>[] => {
+    return [{
+      title: "Device",
+      render: (device) => {
+        return (
+          <Typography className={classes.cellContainer}>
+            {device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId}
+          </Typography>
+        )
+      }
+    }]
+  }
+
+  const provisionButton= () => {
+    return (
+      <Tooltip title="Provision Device">
+        <IconButton onClick={openProvisionDialog} aria-label="Provision Device">
+          <ProvisionIcon className={classes.provisionIcon} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
   return(
-    <>
-    <Tooltip title="Provision Device">
-      <IconButton onClick={openProvisionDialog} aria-label="Provision Device">
-        <ProvisionIcon className={classes.provisionIcon} />
-      </IconButton>
-    </Tooltip>
-    <ProvisionDevice
-      isOpen={isProvisionDialogOpen}
-      refreshCallback={/*load*/()=>{}}
-      closeDialogCallback={closeProvisionDialog}
-    />
-    </>
+    <PageContainer padding={isMobile ? 0 : 2}>
+      <ResponsiveTable<pond.Device>
+        title="Devices"
+        subtitle={provisionButton()}
+        rows={devices}
+        columns={columns()}
+        total={total}
+        pageSize={limit}
+        page={offset}
+        setPage={setOffset}
+        handleRowsPerPageChange={handleChange}
+        onRowClick={toDevice}
+        setSearchText={setSearch}
+      />
+      <ProvisionDevice
+        isOpen={isProvisionDialogOpen}
+        refreshCallback={loadDevices}
+        closeDialogCallback={closeProvisionDialog}
+      />
+    </PageContainer>
   )
 }