adding load more functionality to the devices and teams mobile tables

src/pages/Devices.tsx

@@ -26,6 +26,7 @@ import StatusPlenum from "common/StatusPlenum";
 import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
+import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -751,6 +752,41 @@ export default function Devices() {
         orderBy={orderBy}
         setOrderBy={setOrderBy}
         endTitleElement={preferencesButton}
+        loadMore={()=>{
+          let currentRows = cloneDeep(devices)
+          deviceAPI.list(
+            limit, 
+            currentRows.length,
+            order, 
+            orderBy, 
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            getKeys(),
+            getTypes(),
+            fieldContains,
+            search,
+            as
+          ).then(resp => {
+            let newDevices: Device[] = []
+            resp.data.devices.forEach(device => {
+              if (device.status?.plenum?.temperature) setHasPlenums(true)
+              if (device.status?.sen5x?.temperature) setHasSen5x(true)
+              if (device.status?.o2) setHasO2(true)
+              if (device.status?.co) setHasCo(true)
+              if (device.status?.co2) setHasCo2(true)
+              if (device.status?.no2) setHasNo2(true)
+              newDevices.push(Device.create(device))
+            })
+            setDevices(currentRows.concat(newDevices))
+          }).catch(err => {
+
+          })
+        }}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}

src/teams/TeamList.tsx

@@ -251,6 +251,47 @@ export default function TeamList() {
       isLoading={loading}
       renderGutter={isMobile ? renderGutter : undefined}
       hideKeys
+      loadMore={() => {
+        let current = cloneDeep(teams)
+        setLoading(true);
+        let newTeamPerms: Map<string | number, pond.Permission[]> = new Map();
+        let newTeamPrefs: Map<string | number, pond.TeamPreferences> = new Map();
+        let viewAs: string | undefined = as
+        if (as === team.key()) {
+          viewAs = undefined
+        }
+        teamAPI
+      .listTeams(limit, current.length, undefined, "name", undefined, undefined, " ", search)
+      .then(resp => {
+        setTotal(resp.data.total ? resp.data.total : 0);
+        let newTeams: Team[] = []
+        resp.data.teams.forEach(team => {
+          let u = viewAs ? viewAs : user.id();
+          let t = Team.create(team)
+          if (team.settings && u !== "") {
+            userAPI
+              .getUser(u, teamScope(team.settings.key))
+              .then(resp => {
+                newTeamPerms.set(t.key(), resp.permissions)
+                newTeamPrefs.set(t.key(), resp.preferences)
+                t.preferences = cloneDeep(resp.preferences)
+                t.permissions = cloneDeep(resp.permissions)
+              }).catch(() => {
+                snackbar.error("Error loading teams.")
+              })
+              .finally(() => {
+                setTeamPerms(newTeamPerms);
+                setTeamPrefs(newTeamPrefs);
+              });
+          }
+          newTeams.push(t)
+        });
+        setTeams(current.concat(newTeams));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+      }}
     />
     <TeamSettings
       teamDialogOpen={teamDialogOpen}