groups tab is now saved to session storage

src/pages/Devices.tsx

@@ -27,6 +27,8 @@ import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
 import { cloneDeep } from "lodash";
+import { or } from "utils";
+import LoadingScreen from "app/LoadingScreen";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -140,9 +142,22 @@ export default function Devices() {
   // const [totalGroups, setTotalGroups] = useState(0);
 
   const [groupPermissions, setGroupPermissions] = useState<pond.Permission[]>([])
+  const [groupsLoaded, setGroupsLoaded] = useState(false)
 
   const groupID = useParams<{ groupID: string }>()?.groupID ?? "all";
-  const [tab, setTab] = useState(groupID==="all" ? groupID : groupID);
+  // const [tab, setTab] = useState(groupID==="all" ? groupID : groupID);
+  const [tab, setTab] = useState(() => {
+    console.log("groupID: "+groupID)
+    if (groupID!=="all") return groupID
+    const stored = sessionStorage.getItem(location.pathname+"-groups-tab");
+    console.log("stored: "+stored)
+    return stored !== null ? stored : "all";
+  });
+
+  useEffect(() => {
+    console.log(tab)
+    sessionStorage.setItem(location.pathname+"-groups-tab", tab);
+  }, [tab]);
 
   const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(undefined);
   const [groupSettingsMode, setGroupSettingsMode] = useState<
@@ -184,7 +199,7 @@ export default function Devices() {
 
   useEffect(() => {
     setGroupPermissions([])
-    if (tab === "all") return
+    if (tab === "all" || !getGroup()) return
     groupAPI.getGroupPermissions(getGroup().id()).then(resp => {
       setGroupPermissions(resp.data.permissions)
     })
@@ -232,7 +247,7 @@ export default function Devices() {
   };
   
   const getKeys = () => {
-    if (tab !== "all") {
+    if (tab !== "all" && getGroup()) {
       let keys = getContextKeys()
       //keys.splice(keys.length - 1, 0, getGroup().id().toString());
       keys.push(getGroup().id().toString());
@@ -274,11 +289,13 @@ export default function Devices() {
       updateGroups(newGroups) 
     }).finally(() => {
       setGroupsLoading(false)
+      setGroupsLoaded(true)
     })
   }
 
   const loadDevices = () => {
     setDevicesLoading(true)
+    if (!groupsLoaded) return
     deviceAPI.list(
       limit, 
       page*limit, 
@@ -316,7 +333,7 @@ export default function Devices() {
 
   useEffect(() => {
     loadDevices()
-  }, [limit, page, order, orderBy, fieldContains, search, tab, as])
+  }, [limit, page, order, orderBy, fieldContains, search, tab, as, groupsLoaded])
 
   useEffect(() => {
     loadGroups()
@@ -703,6 +720,14 @@ export default function Devices() {
     )
   }
 
+  useEffect(() => {
+    console.log('Current tab value:', tab, typeof tab);
+  }, [tab]);
+
+  if (!groupsLoaded) return (
+    <LoadingScreen message="Loading groups" />
+  )
+
   return(
     <PageContainer padding={isMobile ? 0 : 2}>
       <Box 
@@ -725,7 +750,7 @@ export default function Devices() {
             <Tab value={"loading"} label={<Skeleton variant="rectangular" height={24} width={128} animation="pulse" />}/>
           : groups.map((group, index) => {
             if (group.id()) return (
-              <Tab className={classes.tab} wrapped value={index} label={<Typography variant="inherit" noWrap>{group.name()}</Typography>} key={"group-tab-"+index}/>
+              <Tab className={classes.tab} wrapped value={index.toString()} label={<Typography variant="inherit" noWrap>{group.name()}</Typography>} key={"group-tab-"+index}/>
             )
           })}
           <Tab wrapped value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
@@ -784,7 +809,7 @@ export default function Devices() {
               newDevices.push(Device.create(device))
             })
             setDevices(currentRows.concat(newDevices))
-          }).catch(err => {
+          }).catch(_err => {
 
           })
         }}