view as team notification pops up if they don't have devices or bins but have a team

src/pages/Devices.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
 import { pond } from "protobuf-ts/pond";
-import { useDeviceAPI, useGlobalState, useGroupAPI } from "providers";
+import { useDeviceAPI, useGlobalState, useGroupAPI, useTeamAPI } from "providers";
 import { useCallback, useEffect, useState } from "react";
 import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
@@ -28,6 +28,7 @@ import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
 import { cloneDeep } from "lodash";
 import LoadingScreen from "app/LoadingScreen";
+import TeamDialog from "teams/TeamDialog";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -98,9 +99,12 @@ export default function Devices() {
   const location = useLocation();
   const deviceAPI = useDeviceAPI();
   const groupAPI = useGroupAPI();
+  const teamAPI = useTeamAPI();
   const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
+  const [doneLoading, setDoneLoading] = useState(false)
+  const [teamsDialog, setTeamsDialog] = useState(false)
 
   const [{ user }] = useGlobalState()
 
@@ -186,7 +190,7 @@ export default function Devices() {
 
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
-  const [{ as }] = useGlobalState()
+  const [{ as, team }] = useGlobalState()
 
   const updateGroups = (newGroups: Group[]) => {
     setGroups(newGroups);
@@ -327,6 +331,7 @@ export default function Devices() {
       setTotal(resp.data.total)
     }).finally(() => {
       setDevicesLoading(false)
+      setDoneLoading(true)
     })
   }
 
@@ -338,6 +343,16 @@ export default function Devices() {
     loadGroups()
   }, [groupLimit, groupPage, orderGroup, orderGroupBy, searchGroup, as])
 
+  useEffect(() => {
+    if (doneLoading && devices.length < 1 && groups.length < 1) {
+      teamAPI.listTeams(1, 0).then(resp => {
+        if (resp.data.teams.length > 0 && team.key().length < 1) {
+          setTeamsDialog(true);
+        }
+      })
+    }
+  }, [doneLoading, devices, groups])
+
   const handleChange = (event: any) => {
     setLimit(event.target.value);
   };
@@ -826,6 +841,13 @@ export default function Devices() {
         addGroupCallback={addGroupCallback}
       />
       {preferencesMenu()}
+      <TeamDialog 
+        open={teamsDialog} 
+        setOpen={setTeamsDialog} 
+        title={"You have teams!"}
+        info={"Looks like you don't have any devices, but are a part of at least one team. If you want to see your teams devices, please select your team and choose the option \"View as team\""}
+        hideKey={"devices-teams-notification-dialog"}
+      />
     </PageContainer>
   )
 }