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

src/maps/mapDrawers/GroupDrawer.tsx

@@ -3,6 +3,7 @@ import DisplayDrawer from "common/DisplayDrawer";
 import ResponsiveTable from "common/ResponsiveTable";
 //import DeviceCardList from "device/DeviceCardList";
 import { useGroupAPI, useSnackbar } from "hooks";
+import { cloneDeep } from "lodash";
 import { Group } from "models";
 import moment from "moment";
 import { describePower } from "pbHelpers/Power";
@@ -28,18 +29,19 @@ export default function GroupDrawer(props: Props) {
   const { openSnack } = useSnackbar();
   const [grpDevs, setGrpDevs] = useState<pond.ComprehensiveDevice[]>([]);
   const navigate = useNavigate();
-  const [tablePage, setTablePage] = useState(0)
+  const loadLimit = 10
-  const [pageSize, setPageSize] = useState(10)
+  const [groupTotal, setGroupTotal] = useState(0)
 
   const loadDevs = useCallback(() => {
     groupAPI
-      .listGroupDevices(group.id(), 100, 0, "asc", undefined, true)
+      .listGroupDevices(group.id(), loadLimit, 0, "asc", undefined, true)
       .then(resp => {
         const groupDevices: pond.ComprehensiveDevice[] = or(
           resp.data.comprehensiveDevices,
           []
         ).map(d => pond.ComprehensiveDevice.fromObject(d));
         setGrpDevs(groupDevices);
+        setGroupTotal(resp.data.total)
       })
       .catch(err => {
         openSnack("Failed to get devices for group");
@@ -174,21 +176,37 @@ export default function GroupDrawer(props: Props) {
   }
 
   const drawerBody = () => {
-    // TODO: will need to update the rows and setPage functions if we decide to have the table only show a number of items matching its page size rether than everything passed in
     return (
       <Box>
         <ResponsiveTable<pond.ComprehensiveDevice>
-          page={tablePage}
+          page={0}
-          pageSize={pageSize}
+          pageSize={loadLimit}
           onRowClick={toDevice}
-          handleRowsPerPageChange={()=>{}}
+          total={groupTotal}
-          setPage={()=>{}}
-          total={grpDevs.length}
           rows={grpDevs}
           renderMobile={mobile}
           renderGutter={gutter}
           gutterPadding={0}
           mobileView
+          loadMore={() => {
+            let current = cloneDeep(grpDevs)
+            groupAPI
+            .listGroupDevices(group.id(), loadLimit, current.length, "asc", undefined, true)
+            .then(resp => {
+              let newDevices: pond.ComprehensiveDevice[] = or(
+                resp.data.comprehensiveDevices,
+                []
+              ).map(d => pond.ComprehensiveDevice.fromObject(d));
+              setGrpDevs(current.concat(newDevices));
+              setGroupTotal(resp.data.total)
+            })
+            .catch(err => {
+              openSnack("Failed to get devices for group");
+            });
+          }}
+          //these two function are uneccessary as this will always be in a list as mobile view
+          handleRowsPerPageChange={()=>{}}
+          setPage={()=>{}}
         />
       </Box>
     )

src/objectHeater/ObjectHeaterCard.tsx

@@ -371,7 +371,7 @@ export default function ObjectHeaterCard(props: Props) {
     }else {
       return (
         <React.Fragment>
-        <CardContent style={{ paddingLeft: 30, paddingRight: 30 }}>
+        <CardContent style={{ padding: 20 }}>
           <Grid
             container
             direction="row"

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>
     );
   };