Merge branch 'staging_environment' into dev_environment

src/pages/Devices.tsx

@@ -6,7 +6,7 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
 import { pond } from "protobuf-ts/pond";
 import { useDeviceAPI, useGlobalState, useGroupAPI } from "providers";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -121,15 +121,13 @@ export default function Devices() {
   };
 
   const getGroup = () => {
-    let group = groups[parseInt(tab)]
-    return group
+    return groups[parseInt(tab)]
   }
 
   useEffect(() => {
     setGroupPermissions([])
     if (tab === "all") return
     groupAPI.getGroupPermissions(getGroup().id()).then(resp => {
-      console.log(resp)
       setGroupPermissions(resp.data.permissions)
     })
   }, [tab])
@@ -142,6 +140,15 @@ export default function Devices() {
     setIsProvisionDialogOpen(false);
   };
 
+  const removeGroupCallback = useCallback(() => {
+    console.log("Remove callback");
+    let newGroups = [...groups];
+    newGroups.splice(parseInt(tab), 1);
+    setGroups(newGroups);
+    setTab("all");
+    setGroupSettingsIsOpen(false);
+  }, [groups, tab]); // Include dependencies
+
   const openGroupSettings = (
     group: Group | undefined,
     mode: "add" | "update" | "remove" | undefined
@@ -155,6 +162,7 @@ export default function Devices() {
     setGroupSettingsIsOpen(false);
     setGroupSettingsMode(undefined);
     setSelectedGroup(undefined);
+    console.log("close callback")
   };
   
   const getKeys = () => {
@@ -202,6 +210,7 @@ export default function Devices() {
   }
 
   const loadDevices = () => {
+    console.log("load callback")
     setDevicesLoading(true)
     deviceAPI.list(
       limit, 
@@ -498,6 +507,7 @@ export default function Devices() {
         refreshCallback={loadDevices}
         canEdit={true}
         groupDevices={devices}
+        removeGroupCallback={removeGroupCallback}
       />
     </PageContainer>
   )