fixed permission issue with groups, added groups and devices links to team page

src/app/UserWrapper.tsx

@@ -63,14 +63,13 @@ export default function UserWrapper(props: Props) {
   const hasFetched = useRef(false);
   const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
 
-  let user_id = or(useAuth.user?.sub, "")
+  const user_id = or(useAuth.user?.sub, "")
 
   const loadUser = useCallback(() => {
     if (!userAPI.getUserWithTeam) return;
     if (hasFetched.current) return;
     setLoading(true)
     userAPI.getUserWithTeam(user_id).then(resp => {
-      console.log(resp.data.user)
       setGlobal({
         user: resp.data.user ? User.create(resp.data.user) : User.create(),
         team: resp.data.team ? Team.create(resp.data.team) : Team.create(),

src/pages/Group.tsx

@@ -81,9 +81,11 @@ export default function GroupPage() {
   const loadGroup = () => {
     setLoadingGroup(true)
     groupAPI.getGroupAndPermissions(groupID).then(resp => {
+      console.log(resp.data)
       if (resp.data.group) setGroup(Group.create(resp.data.group))
       let newPerms: pond.Permission[] = []
       resp.data.permissions.forEach(perm => {
+        console.log(perm)
         if (typeof(perm) === "string") {
           const permNumber = pond.Permission[perm as keyof typeof pond.Permission]
           newPerms.push(permNumber)
@@ -98,9 +100,10 @@ export default function GroupPage() {
   }
 
   useEffect(() => {
-    if (group.id() === groupID) return;
+    // if (group.id() === groupID) return;
     loadGroup()
-  }, [group, groupID])
+  // }, [group, groupID])
+  }, [])
 
   const loadDevices = () => {
     setLoadingDevices(true)
@@ -195,6 +198,10 @@ export default function GroupPage() {
     setLimit(event.target.value);
   };
 
+  useEffect(() => {
+    console.log(permissions)
+  }, [permissions])
+
   return (
     <PageContainer>
       <Grid2 container justifyContent={"space-between"} alignItems={"center"} paddingBottom={2}>

src/pages/Groups.tsx

@@ -1,4 +1,5 @@
-import { Box, Chip, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, Grid2, IconButton, Theme, Tooltip, Typography } from "@mui/material";
+import { LibraryAdd as CreateGroupIcon } from "@mui/icons-material"
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
@@ -10,6 +11,8 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { or } from "utils/types";
 import PageContainer from "./PageContainer";
+import GroupSettings from "group/GroupSettings";
+import { green } from "@mui/material/colors";
 
 const useStyles = makeStyles((theme: Theme) => {
   const isMobile = useMobile()
@@ -32,6 +35,9 @@ const useStyles = makeStyles((theme: Theme) => {
       display: "flex",
       width: theme.spacing(1),
     },
+    green: {
+      color: green["600"]
+    },
   });
 });
 
@@ -47,13 +53,14 @@ export default function GroupsPage() {
   const [loading, setLoading] = useState(false)
 
   const [groups, setGroups] = useState<pond.Group[]>([])
+  const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState(false)
 
   const classes = useStyles()
 
   const loadGroups = () => {
     setLoading(true)
     groupAPI.listGroups(limit, page*limit, order, orderBy, search).then(resp => {
-      setGroups(resp.data.groups)
+      setGroups(or(resp.data.groups, []))
       setTotal(resp.data.total)
     }).finally(() => {
       setLoading(false)
@@ -115,10 +122,37 @@ export default function GroupsPage() {
     if (row.settings?.groupId) navigate(appendToUrl(or(row.settings?.groupId, "")), { state: {group: row} })
   }
 
+  const groupButton = () => {
+    return (
+      <Tooltip title="Create Group">
+        <IconButton
+          onClick={() => setGroupSettingsIsOpen(true)}
+          aria-label="Create Group"
+          size="small"
+        >
+          <CreateGroupIcon className={classes.green} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
+  const title = () => {
+    return (
+      <Grid2 container alignItems={"center"} spacing={1}>
+        <Grid2>
+          <SmartBreadcrumb />
+        </Grid2>
+        <Grid2>
+          {groupButton()}
+        </Grid2>
+      </Grid2>
+    )
+  }
+
   return (
     <PageContainer >
       <ResponsiveTable<pond.Group>
-        title={<SmartBreadcrumb />}
+        title={title()}
         rows={groups} 
         columns={columns()}
         total={total}
@@ -130,6 +164,15 @@ export default function GroupsPage() {
         setSearchText={setSearch}
         onRowClick={handleRowClick}
       />
+      <GroupSettings
+        // initialGroup={selectedGroup}
+        // mode={groupSettingsMode}
+        mode={"add"}
+        isDialogOpen={groupSettingsIsOpen}
+        closeDialogCallback={() => setGroupSettingsIsOpen(false)}
+        refreshCallback={loadGroups}
+        canEdit={true}
+      />
     </PageContainer>
   )
 }

src/pages/Team.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarGroup, Box, Button, Card, Grid2, Theme, Typography } from "@mui/material";
+import { Avatar, AvatarGroup, Box, Button, Card, Divider, Grid2, List, ListItemButton, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import LoadingScreen from "app/LoadingScreen";
 import Chat from "chat/Chat";
@@ -6,13 +6,14 @@ import Chat from "chat/Chat";
 import { useMobile } from "hooks";
 import { cloneDeep } from "lodash";
 import { Team, teamScope, User } from "models";
+import { appendToUrl } from "navigation/Router";
 // import { useSnackbar } from "notistack";
 import PageContainer from "pages/PageContainer";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { pond } from "protobuf-ts/pond";
 import { useSnackbar, useTeamAPI, useUserAPI } from "providers";
 import { useEffect, useState } from "react";
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { getSignatureAccentColour } from "services/whiteLabel";
 import TeamActions from "teams/TeamActions";
 import ObjectUsers from "user/ObjectUsers";
@@ -75,6 +76,7 @@ export default function TeamPage() {
   const isMobile = useMobile();
   const classes = useStyles({isMobile});
   const { state } = useLocation();
+  const navigate = useNavigate();
   // const { teamID } = useParams<{ teamID: string }>() as { teamID: string };
   const { teamID } = useParams<{ teamID: string }>();
   // const [{ user }, dispatch] = useGlobalState();
@@ -200,6 +202,14 @@ export default function TeamPage() {
     )
   }
 
+  const toDevices = () => {
+    navigate(appendToUrl("devices"))
+  }
+
+  const toGroups = () => {
+    navigate(appendToUrl("groups"))
+  }
+  
   return (
     <PageContainer padding={isMobile ? 0 : 2}>
       <Box className={classes.container}>
@@ -233,7 +243,17 @@ export default function TeamPage() {
         </Grid2>
         <Grid2 size={{ xs: 12, sm: 6 }}>
           <Card className={ isMobile ? classes.cardMobile : classes.card }>
-
+            <List>
+              <Divider />
+              <ListItemButton onClick={toDevices}>
+                Devices
+              </ListItemButton>
+              <Divider />
+              <ListItemButton onClick={toGroups}>
+                Groups
+              </ListItemButton>
+              <Divider />
+            </List>
           </Card>
         </Grid2>
       </Grid2>

src/user/UserMenu.tsx

@@ -139,7 +139,8 @@ export default function UserMenu(props: Props) {
           onMouseEnter={lockHover}
           onMouseLeave={lockNoHover}
           size="small"
-          className={classes.signIn}>
+          className={classes.signIn}
+        >
           Sign In
           {lockIsHovered ? (
             <LockOpen className={classes.rightIcon} fontSize="small" />