added logout and Team page

src/pages/Team.tsx

@@ -0,0 +1,139 @@
+import { Box, 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 { useSnackbar } from "notistack";
+import PageContainer from "pages/PageContainer";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
+import { useSnackbar, useTeamAPI } from "providers";
+import { useEffect, useState } from "react";
+import { useLocation, useParams } from 'react-router-dom';
+import TeamActions from "teams/TeamActions";
+import UserAvatar from "user/UserAvatar";
+
+const useStyles = makeStyles((_theme: Theme) => ({ 
+  container: { 
+    display: 'flex', 
+    justifyContent: "space-between",
+    alignItems: 'center', 
+    width: '100%', 
+    position: 'relative', 
+  },
+  leftBox: { 
+    minWidth: 0, // Important for text overflow 
+    overflow: 'hidden',
+    textOverflow: "ellipsis",
+  },
+  rightBox: { 
+    flexShrink: 0, 
+    zIndex: 1, // Ensure it sits above the left box 
+  },
+  ellipsis: { 
+    whiteSpace: 'nowrap', 
+    overflow: 'hidden', 
+    textOverflow: 'ellipsis', 
+  }, 
+}));
+
+export default function TeamPage() {
+  const teamAPI = useTeamAPI();
+  const snackbar = useSnackbar()
+  const classes = useStyles();
+  const { state } = useLocation();
+  // const { teamID } = useParams<{ teamID: string }>() as { teamID: string };
+  const { teamID } = useParams<{ teamID: string }>();
+  // const [{ user }, dispatch] = useGlobalState();
+  const [team, setTeam] = useState<Team>(state?.team ? Team.create(state.team) : Team.create())
+  const [loading, setLoading] = useState(false)
+  const teamKey = teamID ? teamID : "";
+
+  const isMobile = useMobile();
+
+  const getTeam = () => {
+    if (teamKey.length < 1) return
+    setLoading(true)
+    teamAPI.getTeam(teamKey).then(resp => {
+      setTeam(resp)
+    }).finally(() => {
+      setLoading(false)
+    })
+  }
+
+  const toggleNotificationPreference = () => {
+    let updatedPreferences = cloneDeep(team.preferences);
+    updatedPreferences.notify = !team.preferences.notify;
+    teamAPI
+      .updatePreferences(team?.key(), updatedPreferences, getContextKeys(), getContextTypes())
+      .then(() => {
+        let newTeam = Team.create(team.protobuf())
+        newTeam.preferences = updatedPreferences;
+        newTeam.permissions = team.permissions;
+        setTeam(newTeam)
+      })
+      .catch(() => {
+        snackbar.error(
+          "Error occured while " +
+            (team.preferences.notify ? "enabling" : "disabling") +
+            " notifications"
+        );
+      });
+  };
+
+  useEffect(() => {
+    if (state.team) return
+    getTeam();
+  }, []);
+
+  if (loading) return (
+    <LoadingScreen message="Loading team"/>
+  )
+
+  if (team.key().length < 1) return (
+    <PageContainer>
+      Error loading team
+    </PageContainer>
+  )
+
+  const title = () => {
+    return (
+      <Grid2 container direction="row" spacing={1} wrap="nowrap" >
+        <Grid2 sx={{ minWidth: "auto"}}>
+          <UserAvatar user={team} size={isMobile ? "medium" : "large"} />
+        </Grid2>
+        <Grid2 container direction={"column"} spacing={isMobile ? 0 : 0.5} >
+          <Grid2 >
+            <Typography variant={isMobile ? "h5" : "h4"} className={classes.ellipsis} >
+              {team.name()}
+            </Typography>
+          </Grid2>
+          <Grid2>
+            <Typography variant={isMobile ? "caption" : "body2"} color="textSecondary" className={classes.ellipsis}>
+              {team.settings.info}
+            </Typography>
+          </Grid2>
+        </Grid2>
+      </Grid2>
+    )
+  }
+  
+  return (
+    <PageContainer sx={{ padding: isMobile ? 1 : 2 }}>
+      <Box className={classes.container}>
+        <Box className={classes.leftBox}>
+          {title()}
+        </Box>
+        <Box className={classes.rightBox}>
+          <TeamActions 
+            team={team} 
+            permissions={team.permissions} 
+            preferences={team.preferences} 
+            refreshCallback={getTeam} 
+            toggleNotificationPreference={toggleNotificationPreference}
+          />
+        </Box>
+      </Box>
+    </PageContainer>
+  );
+}