can now to npm run start-dev to run local front end with the development database

src/group/GroupSettings.tsx

@@ -116,6 +116,7 @@ export default function GroupSettings(props: Props) {
     }
 
     if (prevTabIndex !== 1 && tabIndex === 1) {
+      console.log("loading?")
       loadDevices();
     }
   }, [initialGroup, loadDevices, prevInitialGroup, prevTabIndex, props, tabIndex, groupDevices]);
@@ -310,7 +311,8 @@ export default function GroupSettings(props: Props) {
                       <Checkbox
                         edge="end"
                         onChange={() => changeDevices(device.id())}
-                        checked={group.settings.devices.includes(device.id())}
+                        // checked={group.settings.devices.includes(device.id())}
+                        checked={groupDevices?.some(dev => dev.id() === device.id())}
                         inputProps={{ "aria-labelledby": label }}
                         disabled={!canEdit}
                       />
@@ -331,12 +333,16 @@ export default function GroupSettings(props: Props) {
   const addDevice = (device: number) => {
     console.log("adding device?????")
     groupAPI.addDevice(group.id(), device).then(() => {
+      console.log("successfully added")
       refreshCallback();
+    }).catch(() => {
+      console.log("Error adding")
     });
   };
 
   const removeDevice = (device: number) => {
     groupAPI.removeDevice(group.id(), device).then(() => {
+      console.log("successfully removed")
       refreshCallback();
     });
   };

src/pages/Device.tsx

@@ -42,15 +42,6 @@ export default function DevicePage() {
 
   const loadDevice = () => {
     if (loading) return
-    // if (state?.device && parseInt(state.device.settings.deviceId) === device.id()) return
-    // deviceAPI.get(deviceID, false, getContextKeys(), getContextTypes()).then(resp => {
-    //   setDevice(Device.create(resp.data))
-    //   console.log(resp.data)
-    // }).catch(() => {
-    //   snackbar.error("Error loading device.")
-    // }).finally(() => {
-    //   setLoading(false)
-    // })
 
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {

src/pages/Devices.tsx

@@ -182,6 +182,7 @@ export default function Devices() {
   }
 
   const loadDevices = () => {
+    console.log("loading devices")
     setDevicesLoading(true)
     deviceAPI.list(
       limit, 
@@ -408,7 +409,7 @@ export default function Devices() {
         mode={groupSettingsMode}
         isDialogOpen={groupSettingsIsOpen}
         closeDialogCallback={closeGroupSettings}
-        refreshCallback={loadGroups}
+        refreshCallback={loadDevices}
         canEdit={true}
       />
     </PageContainer>