team chat is now functional

src/pages/Team.tsx

@@ -1,19 +1,33 @@
-import { Box, Grid2, Theme, Typography } from "@mui/material";
+import { Avatar, AvatarGroup, Box, Button, Grid2, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import LoadingScreen from "app/LoadingScreen";
 import { useMobile } from "hooks";
 import { cloneDeep } from "lodash";
-import { Team } from "models";
+import { Team, teamScope, User } from "models";
 // import { useSnackbar } from "notistack";
 import PageContainer from "pages/PageContainer";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
-import { useSnackbar, useTeamAPI } from "providers";
+import { useSnackbar, useTeamAPI, useUserAPI } from "providers";
 import { useEffect, useState } from "react";
 import { useLocation, useParams } from 'react-router-dom';
+import { getSignatureAccentColour } from "services/whiteLabel";
 import TeamActions from "teams/TeamActions";
+import ObjectUsers from "user/ObjectUsers";
 import UserAvatar from "user/UserAvatar";
+import { or } from "utils/types";
 
-const useStyles = makeStyles((_theme: Theme) => ({ 
+const useStyles = makeStyles((theme: Theme) => ({ 
+  avatar: {
+    width: theme.spacing(4),
+    height: theme.spacing(4)
+  },
+  button: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textTransform: "capitalize",
+    color: getSignatureAccentColour(),
+  },
   container: { 
     display: 'flex', 
     justifyContent: "space-between",
@@ -39,6 +53,7 @@ const useStyles = makeStyles((_theme: Theme) => ({
 
 export default function TeamPage() {
   const teamAPI = useTeamAPI();
+  const userAPI = useUserAPI();
   const snackbar = useSnackbar()
   const classes = useStyles();
   const { state } = useLocation();
@@ -46,7 +61,10 @@ export default function TeamPage() {
   const { teamID } = useParams<{ teamID: string }>();
   // const [{ user }, dispatch] = useGlobalState();
   const [team, setTeam] = useState<Team>(state?.team ? Team.create(state.team) : Team.create())
+  const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(false)
+  const [loadingUsers, setLoadingUsers] = useState(false)
+  const [userDialog, setUserDialog] = useState(false)
   const teamKey = teamID ? teamID : "";
 
   const isMobile = useMobile();
@@ -56,11 +74,26 @@ export default function TeamPage() {
     setLoading(true)
     teamAPI.getTeam(teamKey).then(resp => {
       setTeam(resp)
+    }).catch(() => {
+      snackbar.error("Error loading team")
     }).finally(() => {
       setLoading(false)
     })
   }
 
+  const listTeamUsers = () => {
+    setLoadingUsers(true)
+    userAPI.listObjectUsers(teamScope(teamKey)).then(resp => {
+      let rUsers: User[] = [];
+      or(resp.data, { users: [] }).users.forEach((user: any) => {
+        rUsers.push(User.any(user));
+      });
+      setUsers(rUsers);
+    }).finally(() => {
+      setLoadingUsers(false)
+    })
+  }
+
   const toggleNotificationPreference = () => {
     let updatedPreferences = cloneDeep(team.preferences);
     updatedPreferences.notify = !team.preferences.notify;
@@ -86,6 +119,10 @@ export default function TeamPage() {
     getTeam();
   }, []);
 
+  useEffect(() => {
+    listTeamUsers()
+  }, [teamKey]);
+
   if (loading) return (
     <LoadingScreen message="Loading team"/>
   )
@@ -117,6 +154,33 @@ export default function TeamPage() {
       </Grid2>
     )
   }
+
+  const userAvatars = () => {
+    if (loadingUsers) return null
+    return (
+      <Grid2 container direction={"row"} justifyContent={"space-between"} paddingTop={1}>
+        <Button className={classes.button} onClick={() => setUserDialog(true)}>
+          <Grid2 container spacing={1}>
+            <Grid2>
+              <AvatarGroup max={3}>
+                {users.map((user, index) => {
+                  return(
+                    <Avatar key={index} className={classes.avatar} alt={user.name()} src={user.settings.avatar}/>
+                  )
+                })}
+              </AvatarGroup>
+            </Grid2>  
+            <Grid2 alignContent={"center"}>
+              <Typography color="textPrimary" variant="body2">
+                {users.length + " team members"}
+              </Typography>
+            </Grid2>
+          </Grid2>
+        </Button>
+        <Grid2></Grid2>
+      </Grid2>
+    )
+  }
   
   return (
     <PageContainer sx={{ padding: isMobile ? 1 : 2 }}>
@@ -134,6 +198,15 @@ export default function TeamPage() {
           />
         </Box>
       </Box>
+      {userAvatars()}
+      <ObjectUsers 
+        scope={teamScope(teamKey)} 
+        label={team.name()} 
+        permissions={team.permissions} 
+        isDialogOpen={userDialog} 
+        closeDialogCallback={() => setUserDialog(false)} 
+        refreshCallback={() => {}} 
+      />
     </PageContainer>
   );
 }