device settings and actions made functional

src/pages/Device.tsx

@@ -8,18 +8,11 @@ import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
 import LoadingScreen from "app/LoadingScreen";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
-import DeviceActions from "common/DeviceActions";
+import DeviceActions from "device/DeviceActions";
 import { pond } from "protobuf-ts/pond";
 import { cloneDeep } from "lodash";
 import DeviceOverview from "device/DeviceOverview";
 
-// const useStyles = makeStyles((theme: Theme) => {
-//   // const isMobile = useMobile()
-//   return ({
-    
-//   });
-// });
-
 export default function DevicePage() {
   const deviceAPI = useDeviceAPI()
   const snackbar = useSnackbar()
@@ -32,8 +25,8 @@ export default function DevicePage() {
   const [permissions, setPermissions] = useState<pond.Permission[]>([])
   const [preferences, setPreferences] = useState<pond.DevicePreferences>(pond.DevicePreferences.create())
 
-  const [cellularUsage, setCellularUsage] = useState<number>(0);
-  const [cellularStatus, setCellularStatus] = useState<string>("");
+  const [cellularUsage, _setCellularUsage] = useState<number>(0);
+  const [cellularStatus, _setCellularStatus] = useState<string>("");
 
   const loadDevice = () => {
     if (loading) return
@@ -50,7 +43,16 @@ export default function DevicePage() {
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
       setDevice(Device.any(resp.data.device))
-      setPermissions(resp.data.permissions)
+      let newPermissions: pond.Permission[] = []
+      resp.data.permissions.forEach(perm => {
+        if (typeof(perm) === "string" ) {
+          const permNumber = pond.Permission[perm as keyof typeof pond.Permission]
+          newPermissions.push(permNumber)
+        } else {
+          newPermissions.push(perm)
+        }
+      })
+      setPermissions(newPermissions)
       let u = User.any(resp.data.user);
       setPreferences(u.preferences)
     }).catch(err => {
@@ -77,6 +79,10 @@ export default function DevicePage() {
     .finally(() => setLoading(false));
   }
 
+  useEffect(() => {
+    console.log(permissions)
+  }, [permissions])
+
   useEffect(() => {
     loadDevice()
   }, [deviceID])
@@ -110,9 +116,6 @@ export default function DevicePage() {
 
   return (
     <PageContainer padding={isMobile ? 0 : 2}>
-      {/* <Typography>
-        {device.name()}
-      </Typography> */}
       <Grid2 container justifyContent={"space-between"}>
         <Grid2>
           <SmartBreadcrumb />

src/pages/Devices.tsx

@@ -125,6 +125,8 @@ export default function Devices() {
       let keys = getContextKeys()
       keys.splice(keys.length - 1, 0, tab);
       return keys
+    } else {
+      return getContextKeys()
     }
   }
 
@@ -133,6 +135,8 @@ export default function Devices() {
       let types = getContextTypes()
       types.splice(types.length - 1, 0, "group");
       return types
+    } else {
+      return getContextTypes()
     }
   }
 
@@ -160,6 +164,7 @@ export default function Devices() {
 
   const loadDevices = () => {
     setDevicesLoading(true)
+    console.log(getKeys())
     deviceAPI.list(
       limit, 
       page*limit,