fixed devices page not refreshing after changing group

src/group/GroupSettings.tsx

@@ -61,7 +61,7 @@ interface Props {
   mode?: "add" | "update" | "remove" | undefined;
   isDialogOpen: boolean;
   closeDialogCallback: Function;
-  refreshCallback: Function;
+  refreshCallback: () => void;
   canEdit?: boolean;
   groupDevices?: Device[];
 }
@@ -76,11 +76,12 @@ export default function GroupSettings(props: Props) {
     closeDialogCallback,
     refreshCallback,
     canEdit,
-    groupDevices
+    groupDevices,
   } = props;
   const prevInitialGroup = usePrevious(initialGroup);
   const groupAPI = useGroupAPI();
   const deviceAPI = useDeviceAPI();
+  const snackbar = useSnackbar()
   const [devices, setDevices] = useState<Device[]>([]);
   const [group, setGroup] = useState<Group>(initialGroup ? Group.clone(initialGroup) : new Group());
   const [isRemoveGroupOpen, setIsRemoveGroupOpen] = useState<boolean>(
@@ -92,6 +93,16 @@ export default function GroupSettings(props: Props) {
   const [deviceSearch, setDeviceSearch] = useState<string>("");
   const [loadingDevices, setLoadingDevices] = useState<boolean>(false);
 
+  const [groupDeviceNumbers, setGroupDeviceNumbers] = useState<number[]>([])
+
+  useEffect(() => {
+    let newNumbers: number[] = []
+    groupDevices?.forEach(device => {
+      newNumbers.push(device.id())
+    })
+    setGroupDeviceNumbers(newNumbers)
+  }, [groupDevices])
+
   const loadDevices = useCallback(() => {
     setLoadingDevices(true);
     deviceAPI
@@ -116,10 +127,9 @@ export default function GroupSettings(props: Props) {
     }
 
     if (prevTabIndex !== 1 && tabIndex === 1) {
-      console.log("loading?")
       loadDevices();
     }
-  }, [initialGroup, loadDevices, prevInitialGroup, prevTabIndex, props, tabIndex, groupDevices]);
+  }, [initialGroup, loadDevices, prevInitialGroup, prevTabIndex, props, tabIndex]);
 
   const close = () => {
     closeDialogCallback();
@@ -311,8 +321,7 @@ export default function GroupSettings(props: Props) {
                       <Checkbox
                         edge="end"
                         onChange={() => changeDevices(device.id())}
-                        // checked={group.settings.devices.includes(device.id())}
-                        checked={groupDevices?.some(dev => dev.id() === device.id())}
+                        checked={groupDeviceNumbers.includes(device.id())}
                         inputProps={{ "aria-labelledby": label }}
                         disabled={!canEdit}
                       />
@@ -331,20 +340,26 @@ export default function GroupSettings(props: Props) {
   //}, [groupDevices])
 
   const addDevice = (device: number) => {
-    console.log("adding device?????")
     groupAPI.addDevice(group.id(), device).then(() => {
-      console.log("successfully added")
+      let newDevices = [...groupDeviceNumbers];
+      newDevices.push(device)
+      setGroupDeviceNumbers(newDevices)
+      snackbar.success("Device " + device + " successfully added to group")
       refreshCallback();
     }).catch(() => {
-      console.log("Error adding")
+      snackbar.error("Failed to add device")
     });
   };
 
   const removeDevice = (device: number) => {
     groupAPI.removeDevice(group.id(), device).then(() => {
-      console.log("successfully removed")
+      let newDevices = groupDeviceNumbers.filter(dev => dev !== device)
+      setGroupDeviceNumbers(newDevices)
+      snackbar.success("Device " + device + " successfully removed from group")
       refreshCallback();
-    });
+    }).catch(() => {
+      snackbar.error("Failed to remove device")
+    })
   };
 
   const devicesTab = () => {
@@ -375,7 +390,8 @@ export default function GroupSettings(props: Props) {
                           if (checked) addDevice(device.id());
                           else removeDevice(device.id());
                         }}
-                        checked={Boolean(groupDevices?.find(dev => dev.id() === device.id()))}
+                        // checked={Boolean(groupDevices?.find(dev => dev.id() === device.id()))}
+                        checked={groupDeviceNumbers.includes(device.id())}
                         inputProps={{ "aria-labelledby": label }}
                         disabled={!canEdit}
                       />

src/pages/Devices.tsx

@@ -112,10 +112,6 @@ export default function Devices() {
     })
   }, [tab])
 
-  useEffect(() => {
-    console.log(groupPermissions)
-  }, [groupPermissions])
-
   const openProvisionDialog = () => {
     setIsProvisionDialogOpen(true);
   };
@@ -182,7 +178,6 @@ export default function Devices() {
   }
 
   const loadDevices = () => {
-    console.log("loading devices")
     setDevicesLoading(true)
     deviceAPI.list(
       limit, 
@@ -217,7 +212,6 @@ export default function Devices() {
       getContextTypes()
     ).then(resp => {
       let stats = pond.DeviceStatistics.fromObject(resp.data.stats)
-      // console.log(stats)
       setStats(stats)
     }).finally(() => {
       setLoadingStats(false)
@@ -233,7 +227,6 @@ export default function Devices() {
   }, [])
 
   useEffect(() => {
-    // console.log("groups loaded")
     loadGroups()
   }, [groupLimit, groupPage, orderGroup, orderGroupBy, searchGroup])
 
@@ -397,7 +390,7 @@ export default function Devices() {
         onRowClick={toDevice}
         setSearchText={setSearch}
         isLoading={devicesLoading}
-        actions={getGroup() && <GroupActions group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadGroups}/>}
+        actions={getGroup() && <GroupActions group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadDevices}/>}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}
@@ -411,6 +404,7 @@ export default function Devices() {
         closeDialogCallback={closeGroupSettings}
         refreshCallback={loadDevices}
         canEdit={true}
+        groupDevices={devices}
       />
     </PageContainer>
   )

src/providers/pond/groupAPI.tsx

@@ -125,7 +125,6 @@ export default function GroupProvider(props: PropsWithChildren<Props>) {
     }
     return new Promise<AxiosResponse<pond.GetPermissionsResponse>>((resolve, reject) => {
       get<pond.GetPermissionsResponse>(pondURL(url)).then(resp => {
-        console.log(resp.data)
         resp.data = pond.GetPermissionsResponse.fromObject(resp.data)
         return resolve(resp);
       }).catch(err => {