fixed some group permission issues

src/device/DeviceOverview.tsx

@@ -40,11 +40,12 @@ interface Props {
   loading?: boolean;
   disableAddTag?: boolean;
   tags: pond.Tag[];
+  groupID?: number;
 }
 
 export default function DeviceOverview(props: Props) {
   const [{ user, firmware }] = useGlobalState();
-  const { device, components, usage, loading, disableAddTag, tags } = props;
+  const { device, components, groupID, usage, loading, disableAddTag, tags } = props;
   const prevComponents = usePrevious(components);
   const { info } = useSnackbar();
   const classes = useStyles();
@@ -78,8 +79,7 @@ export default function DeviceOverview(props: Props) {
   }, [components, prevComponents]);
 
   const pathToDevice = () => {
-    if (useParams().groupID) {
-      const groupID = parseInt(useParams().groupID ?? "0", 10);
+    if (groupID) {
       const groupPath: string = groupID > 0 ? "/groups/" + groupID.toString() : "";
       const devicePath: string = "/devices/" + device.settings.deviceId.toString();
       return groupPath + devicePath;

src/group/GroupSettings.tsx

@@ -329,6 +329,7 @@ export default function GroupSettings(props: Props) {
   //}, [groupDevices])
 
   const addDevice = (device: number) => {
+    console.log("adding device?????")
     groupAPI.addDevice(group.id(), device).then(() => {
       refreshCallback();
     });

src/pages/Device.tsx

@@ -20,6 +20,7 @@ export default function DevicePage() {
   const snackbar = useSnackbar()
   const isMobile = useMobile()
   const deviceID = useParams<{ deviceID: string }>()?.deviceID ?? "";
+  const groupID = useParams<{ groupID: string }>()?.groupID ?? "";
   const { state } = useLocation();
   const [{ as, team, user }] = useGlobalState()
   const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
@@ -164,6 +165,7 @@ export default function DevicePage() {
         usage={getUsage()}
         loading={loading}
         tags={tags}
+        groupID={parseInt(groupID)}
       />
     </PageContainer>
   );

src/pages/Devices.tsx

@@ -8,7 +8,7 @@ import { pond } from "protobuf-ts/pond";
 import { useDeviceAPI, useGroupAPI } from "providers";
 import { useEffect, useState } from "react";
 import PageContainer from "./PageContainer";
-import { useMobile } from "hooks";
+import { useMobile, usePermissionAPI } from "hooks";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
@@ -67,6 +67,7 @@ export default function Devices() {
   const location = useLocation();
   const deviceAPI = useDeviceAPI();
   const groupAPI = useGroupAPI();
+  const permissionAPI = usePermissionAPI();
   const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
@@ -88,9 +89,10 @@ export default function Devices() {
   const [searchGroup, ] = useState("");
   // const [totalGroups, setTotalGroups] = useState(0);
 
-  const updateGroups = (newGroups: Group[]) => {
-    setGroups(newGroups);
-  };
+  const [groupPermissions, setGroupPermissions] = useState<pond.Permission[]>([])
+
+  const groupID = useParams<{ groupID: string }>()?.groupID ?? "all";
+  const [tab, setTab] = useState(groupID==="all" ? groupID : groupID);
 
   const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(undefined);
   const [groupSettingsMode, setGroupSettingsMode] = useState<
@@ -98,8 +100,21 @@ export default function Devices() {
   >(undefined);
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
-  const groupID = useParams<{ groupID: string }>()?.groupID ?? "all";
-  const [tab, setTab] = useState(groupID==="all" ? groupID : groupID);
+  const updateGroups = (newGroups: Group[]) => {
+    setGroups(newGroups);
+  };
+
+  useEffect(() => {
+    setGroupPermissions([])
+    if (tab === "all") return
+    groupAPI.getGroupPermissions(parseInt(tab)).then(resp => {
+      setGroupPermissions(resp.data.permissions)
+    })
+  }, [tab])
+
+  useEffect(() => {
+    console.log(groupPermissions)
+  }, [groupPermissions])
 
   const openProvisionDialog = () => {
     setIsProvisionDialogOpen(true);
@@ -221,6 +236,10 @@ export default function Devices() {
     loadGroups()
   }, [groupLimit, groupPage, orderGroup, orderGroupBy, searchGroup])
 
+  // useEffect(() => {
+  //   permissionAPI.getPermissions
+  // }, [groupID])
+
   const handleChange = (event: any) => {
     setLimit(event.target.value);
   };
@@ -377,7 +396,7 @@ export default function Devices() {
         onRowClick={toDevice}
         setSearchText={setSearch}
         isLoading={devicesLoading}
-        actions={getGroup() && <GroupActions group={getGroup()} permissions={[]} devices={devices} refreshCallback={loadGroups}/>}
+        actions={getGroup() && <GroupActions group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadGroups}/>}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}

src/pages/Group.tsx

@@ -71,9 +71,9 @@ export default function GroupPage() {
   const [loadingDevices, setLoadingDevices] = useState(false)
   const [devices, setDevices] = useState<Device[]>([])
   const [permissions, setPermissions] = useState<pond.Permission[]>([])
-  const [limit, setLimit] = useState(0)
+  const [limit, setLimit] = useState(10)
   const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
+  const [page, setPage] = useState(0)
   const [order, ] = useState<"asc" | "desc">("asc")
   const [orderBy, ] = useState("")
   const [search, setSearch] = useState("")
@@ -103,7 +103,23 @@ export default function GroupPage() {
   // }, [group, groupID])
   }, [])
 
+  const getKeys = () => {
+    let keys = getContextKeys()
+    keys.push(groupID.toString())
+    return keys
+  }
+
+  const getTypes = () => {
+    let keys = getContextTypes()
+    keys.push("group")
+    return keys
+  }
+
+
   const loadDevices = () => {
+    console.log(getContextKeys())
+    console.log(getContextTypes())
+    console.log(limit)
     setLoadingDevices(true)
     deviceAPI.list(
       limit, 
@@ -117,9 +133,10 @@ export default function GroupPage() {
       undefined,
       undefined,
       undefined,
-      getContextKeys(),
-      getContextTypes()
+      getKeys(),
+      getTypes()
     ).then(resp => {
+      console.log(resp.data)
       let newDevices: Device[] = [];
       resp.data.devices.forEach(device => {
         newDevices.push(Device.create(device))

src/providers/pond/groupAPI.tsx

@@ -16,6 +16,11 @@ export interface IGroupAPIContext {
   removeGroup: (id: number) => Promise<any>;
   getGroup: (id: number) => Promise<any>;
   getGroupAndPermissions: (id: number) => Promise<AxiosResponse<pond.GetGroupAndPermissionsResponse>>;
+  getGroupPermissions: (
+    id: number,
+    keys?: string[],
+    types?: string[],
+  ) => Promise<AxiosResponse<pond.GetPermissionsResponse>>;
   listGroups: (
     limit: number,
     offset: number,
@@ -100,6 +105,36 @@ export default function GroupProvider(props: PropsWithChildren<Props>) {
     return get<pond.GetGroupAndPermissionsResponse>(pondURL(url));
   };
 
+  const getGroupPermissions = (
+    id: number,
+    keys?: string[],
+    types?: string[],
+  ) => {
+    keys = keys ? keys : getContextKeys();
+    types = types? types : getContextTypes();
+    let url = "/groupPermissions/" + id
+    if (as) {
+      url = url + "?as=" + as +
+      +
+      (keys ? "?keys=" + keys.toString() : "") +
+      (types ? "&types=" + types.toString() : "")
+    } else {
+      url = url + 
+        (keys ? "?keys=" + keys.toString() : "") +
+        (types ? "&types=" + types.toString() : "")
+    }
+    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 => {
+        return reject(err)
+      })
+    })
+    // return get<pond.GetPermissionsResponse>(pondURL(url));
+  };
+
   const listGroups = (
     limit: number,
     offset: number,
@@ -174,6 +209,7 @@ export default function GroupProvider(props: PropsWithChildren<Props>) {
         updateGroup,
         removeGroup,
         getGroup,
+        getGroupPermissions,
         getGroupAndPermissions,
         listGroups,
         listGroupDevices,