actually added device actions

src/pages/Devices.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
 import { pond } from "protobuf-ts/pond";
-import { useDeviceAPI } from "providers";
+import { useDeviceAPI, useGroupAPI } from "providers";
 import { useEffect, useState } from "react";
 import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
@@ -34,6 +34,7 @@ export default function Devices() {
   const navigate = useNavigate();
   const location = useLocation();
   const deviceAPI = useDeviceAPI();
+  const groupAPI = useGroupAPI();
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
   const [order, ] = useState<"asc" | "desc">("asc");
@@ -43,6 +44,13 @@ export default function Devices() {
   const [devices, setDevices] = useState<pond.Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
 
+  const [groupLimit, setGroupLimit] = useState(10);
+  const [groupPage, setGroupPage] = useState(0);
+  const [orderGroup, ] = useState<"asc" | "desc">("asc");
+  const [orderGroupBy, ] = useState("name");
+  const [searchGroup, setGroupSearch] = useState("");
+  const [totalGroups, setTotalGroups] = useState(0);
+
   const openProvisionDialog = () => {
     setIsProvisionDialogOpen(true);
   };
@@ -51,6 +59,18 @@ export default function Devices() {
     setIsProvisionDialogOpen(false);
   };
 
+  const loadGroups = () => {
+    groupAPI.listGroups(
+      groupLimit,
+      groupPage*groupLimit, 
+      orderGroup, 
+      orderGroupBy, 
+      searchGroup,
+    ).then(resp => {
+      console.log(resp.data)
+    })
+  }
+
   const loadDevices = () => {
     deviceAPI.list(
       limit, 
@@ -76,12 +96,17 @@ export default function Devices() {
     loadDevices()
   }, [limit, page, order, orderBy, search])
 
+  useEffect(() => {
+    loadDevices()
+  }, [groupLimit, groupPage, orderGroup, orderGroupBy, searchGroup])
+
+
   const handleChange = (event: any) => {
     setLimit(event.target.value);
   };
 
   const appendToUrl = (appendage: number | string) => {
-    const basePath = location.pathname.replace(/\/$/, ""); // Ensure no trailing slash
+    const basePath = location.pathname.replace(/\/$/, ""); 
     return(`${basePath}/${appendage}`);
   };