added remove callback for group settings dialog

src/group/GroupSettings.tsx

@@ -62,6 +62,7 @@ interface Props {
   refreshCallback: () => void;
   canEdit?: boolean;
   groupDevices?: Device[];
+  removeGroupCallback?: Function;
 }
 
 export default function GroupSettings(props: Props) {
@@ -75,6 +76,7 @@ export default function GroupSettings(props: Props) {
     refreshCallback,
     canEdit,
     groupDevices,
+    removeGroupCallback,
   } = props;
   const prevInitialGroup = usePrevious(initialGroup);
   const [{as}] = useGlobalState();
@@ -94,6 +96,15 @@ export default function GroupSettings(props: Props) {
 
   const [groupDeviceNumbers, setGroupDeviceNumbers] = useState<number[]>([])
 
+  // Use a ref to store removeGroupCallback
+  const removeCallbackRef = React.useRef(removeGroupCallback);
+
+  // Update ref when prop changes
+  useEffect(() => {
+    console.log("Updating removeCallbackRef with:", removeGroupCallback);
+    removeCallbackRef.current = removeGroupCallback;
+  }, [removeGroupCallback]);
+
   useEffect(() => {
     let newNumbers: number[] = []
     groupDevices?.forEach(device => {
@@ -471,11 +482,14 @@ export default function GroupSettings(props: Props) {
   };
 
   const dialogs = () => {
+    console.log("dialogs: removeCallbackRef.current =", removeCallbackRef.current); // Log ref
+    console.log("dialogs: removeGroupCallback =", removeGroupCallback); // Log prop
     return (
       <RemoveGroup
         group={group}
         isDialogOpen={isRemoveGroupOpen}
         closeDialogCallback={closeRemoveGroup}
+        removeCallback={removeCallbackRef.current}
       />
     );
   };

src/group/RemoveGroup.tsx

@@ -25,6 +25,7 @@ interface Props {
   group: Group;
   isDialogOpen: boolean;
   closeDialogCallback: Function;
+  removeCallback?: Function;
 }
 
 export default function RemoveGroup(props: Props) {
@@ -32,7 +33,7 @@ export default function RemoveGroup(props: Props) {
   const navigate = useNavigate();
   const groupAPI = useGroupAPI();
   const { success, error, warning } = useSnackbar();
-  const { group, isDialogOpen, closeDialogCallback } = props;
+  const { group, isDialogOpen, closeDialogCallback, removeCallback } = props;
   let groupName = group.name();
 
   const closeDialog = () => {
@@ -45,10 +46,15 @@ export default function RemoveGroup(props: Props) {
       .then((response: any) => {
         success(groupName + " was successfully removed");
         // navigate("/groups");
+        console.log(removeCallback)
+        if (removeCallback) removeCallback()
+        // removeCallback()
       })
       .catch((err: any) => {
         err ? warning(err) : error("Error occured while removing " + groupName);
         closeDialog();
+      }).finally(() => {
+        closeDialogCallback()
       });
   };
 

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>
   )