using local storage to remember team names in the bread crumbs

src/common/SmartBreadcrumb.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
 import { useMobile } from "hooks";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import { useLocation } from "react-router";
 import { Link as RouterLink } from "react-router-dom";
 import { or } from "utils/types";
@@ -47,6 +47,7 @@ interface Props {
   componentName?: string;
   groupName?: string;
   binName?: string;
+  teamName?: string;
   reportTarget?: string;
   loading?: boolean;
   reload?: () => void;
@@ -114,6 +115,11 @@ export default function SmartBreadcrumb(props: Props) {
     return or(regexMatch[1], "0").toString();
   };
 
+  const teamKey = (): string => {
+    const regexMatch = or(location.pathname.match(/\/teams\/([^/]+)/), [])
+    return or(regexMatch[1], "0").toString();
+  };
+
   const reportIDShort = (): string => {
     return reportID().split("-")[0];
   };
@@ -220,6 +226,10 @@ export default function SmartBreadcrumb(props: Props) {
     return "/teams";
   }
 
+  const teamPath = (): string => {
+    return "/teams" + "/" + teamKey();
+  }
+
   const getBreadcrumbMap = (): { [key: string]: string } => {
     const { groupName, deviceName, componentName, reportTarget, binName } = props;
     const deviceLabel: string = deviceName ? deviceName : "Device " + deviceID();
@@ -228,6 +238,13 @@ export default function SmartBreadcrumb(props: Props) {
     const mineLabel: string = "Mine Site";
     const jobsiteLabel: string = "Job Site";
   
+    let lastTeamName = props.teamName;
+    if (props.teamName) {
+      localStorage.setItem('lastTeamName-'+teamKey(), props.teamName);
+    } else {
+      lastTeamName = or(localStorage.getItem('lastTeamName-'+teamKey()), undefined);
+    }
+
     return {
       [dashboardPath()]: "Dashboard",
       [groupsPath()]: "Groups",
@@ -250,7 +267,8 @@ export default function SmartBreadcrumb(props: Props) {
       [usersPath()]: "Users",
       [binsPath()]: "Bins",
       [binPath()]: binLabel,
-      [teamsPath()]: "Teams"
+      [teamsPath()]: "Teams",
+      [teamPath()]: lastTeamName ? lastTeamName : "Team " + teamKey(),
     };
   };
 

src/navigation/BottomNavigator.tsx

@@ -187,7 +187,7 @@ export default function BottomNavigator(props: Props) {
       bottom={0}
       width="100vw"
       zIndex={theme.zIndex.appBar}
-      sx={{ background: theme.palette.background.paper}}
+      sx={{ background: theme.palette.background.paper }}
       style={{
         overflow:
           window.location.origin.includes("staging") || window.location.origin.includes("localhost")

src/pages/Team.tsx

@@ -2,6 +2,7 @@ import { Avatar, AvatarGroup, Box, Button, Card, Divider, Grid2, List, ListItemB
 import { makeStyles } from "@mui/styles";
 import LoadingScreen from "app/LoadingScreen";
 import Chat from "chat/Chat";
+import SmartBreadcrumb from "common/SmartBreadcrumb";
 // import SmartBreadcrumb from "common/SmartBreadcrumb";
 import { useMobile } from "hooks";
 import { cloneDeep } from "lodash";
@@ -214,6 +215,8 @@ export default function TeamPage() {
     <PageContainer padding={isMobile ? 0 : 2}>
       <Box className={classes.container}>
         <Box className={classes.leftBox}>
+          <SmartBreadcrumb paddingBottom={1} teamName={team.name()} />
+          <SmartBreadcrumb />
           {title()}
         </Box>
         <Box className={classes.rightBox}>

src/user/UserMenu.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, Button, Checkbox, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
+import { Avatar, Box, Button, Checkbox, Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
@@ -270,6 +270,7 @@ export default function UserMenu() {
             <ListItemText primary="View Site as Team" />
           </MenuItem>
         )}
+        <Divider />
         {hasAdmin && (
           <Tooltip title="Access Object">
             <MenuItem onClick={() => openAccessObject()} aria-label="Access Object" dense>
@@ -280,6 +281,7 @@ export default function UserMenu() {
             </MenuItem>
           </Tooltip>
         )}
+        <Divider />
         <MenuItem onClick={handleLogout} aria-label="Sign Out" dense>
           <ListItemIcon>
             <ExitToApp className={classes.red} />