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 [pageSize, setPageSize] = useState(10)
+  const loadLimit = 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}
-          pageSize={pageSize}
+          page={0}
+          pageSize={loadLimit}
           onRowClick={toDevice}
-          handleRowsPerPageChange={()=>{}}
-          setPage={()=>{}}
-          total={grpDevs.length}
+          total={groupTotal}
           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>
     )