added load more function to mobile view of responsive table to the remaining uses

src/pages/Group.tsx

@@ -14,6 +14,7 @@ import { appendToUrl } from "navigation/Router";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
 import { makeStyles } from "@mui/styles";
 import { blue, green } from "@mui/material/colors";
+import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -241,6 +242,36 @@ export default function GroupPage() {
         onRowClick={toDevice}
         setSearchText={setSearch}
         isLoading={loadingDevices}
+        loadMore={()=>{
+          let current = cloneDeep(devices)
+          setLoadingDevices(true)
+          deviceAPI.list(
+            limit, 
+            current.length, 
+            order, 
+            orderBy, 
+            search,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            getKeys(),
+            getTypes(),
+            undefined,
+            undefined,
+            as
+          ).then(resp => {
+            let newDevices: Device[] = [];
+            resp.data.devices.forEach(device => {
+              newDevices.push(Device.create(device))
+            })
+            setDevices(current.concat(newDevices))
+          }).finally(() => {
+            setLoadingDevices(false)
+          })
+        }}
       />
     </PageContainer>
   )

src/pages/Groups.tsx

@@ -13,6 +13,7 @@ import { or } from "utils/types";
 import PageContainer from "./PageContainer";
 import GroupSettings from "group/GroupSettings";
 import { green } from "@mui/material/colors";
+import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles((theme: Theme) => {
   const isMobile = useMobile()
@@ -163,6 +164,15 @@ export default function GroupsPage() {
         isLoading={loading}
         setSearchText={setSearch}
         onRowClick={handleRowClick}
+        loadMore={()=>{
+          let current = cloneDeep(groups)
+          setLoading(true)
+          groupAPI.listGroups(limit, current.length, order, orderBy, search).then(resp => {
+            setGroups(or(current.concat(resp.data.groups), current))
+          }).finally(() => {
+            setLoading(false)
+          })
+        }}
       />
       <GroupSettings
         // initialGroup={selectedGroup}

src/pages/Mines.tsx

@@ -14,6 +14,7 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import { useNavigate } from "react-router-dom";
 import { or } from "utils";
 import { useGlobalState } from "providers";
+import { cloneDeep } from "lodash";
 
 interface MineRow {
   mine: pond.Mine;
@@ -110,6 +111,24 @@ export default function Mines() {
         hideKeys
         isLoading={isLoading}
         onRowClick={onRowClick}
+        loadMore={()=>{
+          let current = cloneDeep(mineTableData)
+          setIsLoading(true);
+          mineAPI
+            .listMines(pageSize, current.length, "desc", undefined, searchValue, false, as)
+            .then(resp => {
+              let newMines: MineRow[] = [];
+              resp.data.mines.forEach(mine => {
+                newMines.push({
+                  mine: mine
+                });
+              });
+              setMineTableData(current.concat(newMines));
+            })
+            .finally(() => {
+              setIsLoading(false);
+            });
+        }}
       />
       <AddMine open={mineDialog} closeCallback={closeCallback} refreshCallback={load} />
     </PageContainer>

src/pages/Sites.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, Card, Grid2 as Grid, Switch, Tab, Tabs, Tooltip, Typography } from "@mui/material";
+import { Avatar, Box, Button, Card, Grid2 as Grid, Switch, Tab, Tabs, Tooltip, Typography } from "@mui/material";
 import { Group } from "@mui/icons-material";
 //import MaterialTable from "material-table";
 import { Site, User } from "models";
@@ -12,6 +12,7 @@ import { useMobile } from "hooks";
 import JobsiteIcon from "products/Construction/JobSiteIcon";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import { useNavigate } from "react-router-dom";
+import { cloneDeep } from "lodash";
 
 interface SiteWithData {
   site: Site;
@@ -46,7 +47,7 @@ export default function Sites() {
       .listSitesPageData(pageSize, tablePage * pageSize, "asc", "siteName", undefined, as)
       .then(resp => {
         setTotal(resp.data.total);
-        buildTableData(resp.data.sites);
+        setSites(buildTableData(resp.data.sites));
       })
       .finally(() => {
         setLoading(false);
@@ -71,7 +72,7 @@ export default function Sites() {
         data.push(newTableData);
       }
     });
-    setSites([...data]);
+    return data;
   };
 
   useEffect(() => {
@@ -186,6 +187,19 @@ export default function Sites() {
       rows={sites}
       handleRowsPerPageChange={handleTablePage}
       onRowClick={goToSite}
+      loadMore={()=>{
+        let current = cloneDeep(sites)
+        setLoading(true);
+        siteAPI
+          .listSitesPageData(pageSize, current.length, "asc", "siteName", undefined, as)
+          .then(resp => {
+            let newData = buildTableData(resp.data.sites);
+            setSites(current.concat(newData))
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      }}
     />
     )
   };
@@ -208,6 +222,20 @@ export default function Sites() {
     setCurrentTab(newValue);
   };
 
+  const loadMore = () => {
+    let current = cloneDeep(sites)
+    setLoading(true);
+    siteAPI
+      .listSitesPageData(pageSize, current.length, "asc", "siteName", undefined, as)
+      .then(resp => {
+        let newData = buildTableData(resp.data.sites);
+        setSites(current.concat(newData))
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }
+
   const mobileView = () => {
     return (
       <React.Fragment>
@@ -297,6 +325,9 @@ export default function Sites() {
             return siteCards;
           })}
         </TabPanelMine>
+        {sites.length < total &&
+          <Button onClick={loadMore} variant="contained" color="primary" fullWidth>Load More</Button>
+        }
       </React.Fragment>
     );
   };