added load more function to the responsive table for mobile view

src/common/ResponsiveTable.tsx

@@ -1,6 +1,6 @@
-import { Box, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
+import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
+import { ArrowDownward, ArrowLeft, ArrowRight, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
 import { useEffect, useState } from "react";
 import React from "react";
 import { useMobile } from "hooks";
@@ -98,7 +98,7 @@ interface Props<T> {
   setOrderBy?: React.Dispatch<React.SetStateAction<string>>;
   order?: string;
   setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
-  endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
+  loadMore?: () => void
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -131,14 +131,14 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     orderBy,
     setOrderBy,
     order, 
-    setOrder
+    setOrder,
+    loadMore
   } = props
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
   const title = typeof(props.title) === "function" ? props.title() : props.title
   // const order = props.order ? props.order : "asc"
-  const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
 
   const isMobile = useMobile()
 
@@ -320,13 +320,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
   if (isMobile || mobileView) return (
     <Box>
-      
       <Box className={classes.mobileTitleBox}>
         {renderTitle()}
         {renderSubtitle()}
         {setSearchText && searchBar()}
       </Box>
-      
       {rows.map((row, index) => {
         return (
           <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
@@ -375,6 +373,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
           </Box>
         )
       }
+      {(loadMore && rows.length < total) &&
+        <Box>
+          <Button 
+            onClick={loadMore}
+            color="primary"
+            sx={{width: "100%"}} 
+            variant="contained">
+              Load More
+          </Button>
+        </Box>
+      }
     </Box>
   )
 
@@ -426,9 +435,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     <Grid2>
                       {actions && actions}
                     </Grid2>
-                    <Grid2>
-                      {endTitleElement}
-                    </Grid2>
                     <Grid2>
                       {setSearchText &&<Box className={classes.searchContainer}>
                         {searchBar()}

src/pages/DeviceComponent.tsx

@@ -23,6 +23,7 @@ import {
 } from "hooks";
 import InteractionChip from "interactions/InteractionChip";
 import InteractionSettings from "interactions/InteractionSettings";
+import { cloneDeep } from "lodash";
 // import MaterialTable from "material-table";
 import { Component, Device, deviceScope, Group, Interaction } from "models";
 import { convertedUnitMeasurement, MeasurementsFor, UnitMeasurement } from "models/UnitMeasurement";
@@ -450,7 +451,6 @@ export default function DeviceComponent() {
       // });
     })
     .catch((err: any) => {
-      
       // resolve({
       //   data: [],
       //   page: 0,
@@ -613,6 +613,32 @@ export default function DeviceComponent() {
           pageSize={pageSize}
           setPage={setPage}
           handleRowsPerPageChange={handleRowsPerPageChange}
+          loadMore={() => {
+            let currentRows = cloneDeep(rows)
+            let newOffset = rows.length
+            componentAPI.listUnitMeasurements(      
+              deviceID,
+              componentID,
+              startDate,
+              endDate,
+              pageSize,
+              newOffset,
+              order,
+              undefined,
+              getContextKeys(),
+              getContextTypes(),
+              showErrors,
+              as)
+              .then(resp => {
+                  let newRows = UnitMeasurement.convertMeasurements(
+                  resp.data.measurements.map(um => UnitMeasurement.any(um, user))
+                )
+                setRows(currentRows.concat(newRows))
+              }).catch(err => {
+                
+              })
+            
+          }}
         />
       </Grid>
     );