doing some more mobile views to load more

src/common/QrCodeGenerator.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Box, Button, Checkbox, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 // import MaterialTable from "material-table";
 import React, { useEffect, useState } from "react";
 import ResponsiveDialog from "./ResponsiveDialog";
@@ -36,7 +36,7 @@ export default function(props: Props) {
       width: 500
     },
     viewerMobile: {
-      height: "100%",
+      height: 500,
       width: "100%"
     },
     page: {
@@ -103,12 +103,12 @@ export default function(props: Props) {
       selected.push(row)
     }else{ //remove the page/index from the map
       if(pageSelect){
-        pageSelect.splice(pageSelect.indexOf(index))
+        pageSelect.splice(pageSelect.indexOf(index), 1)
       }
       //remove the selected object from the array
       selected.forEach((codeKey, index) => {
         if(row.key === codeKey.key){
-          selected.splice(index)
+          selected.splice(index, 1)
         }
       })
     }
@@ -137,35 +137,27 @@ export default function(props: Props) {
           total={keyList.length}
           setPage={(page) => {setTablePage(page)}}
           handleRowsPerPageChange={handleRowsPerPageChange}
+          loadMore={() => {
+            let clone: QrCodeKey[] = cloneDeep(keyList)
+            let current = cloneDeep(displayedRows)
+            let newRows = clone.splice(current.length, pageSize)
+            setDisplayedRows(current.concat(newRows))
+          }}
+          renderMobile={(row, index) => {
+            return (
+              <Box display="flex">
+                <Checkbox 
+                  onChange={(e, checked) => {
+                    rowSelected(row, index, checked)
+                  }}
+                />
+                <Typography>
+                  {row.name}
+                </Typography>
+              </Box>
+            )
+          }}
         />
-        {/* <MaterialTable
-          icons={getTableIcons()}
-          title={""}
-          data={keyList}
-          options={{
-            paging: true,
-            // pageSize: pageSize,
-            // pageSizeOptions: [5, 10, 20],
-            padding: "dense",
-            showTitle: true,
-            toolbar: true,
-            sorting: true,
-            columnsButton: true,
-            search: false,
-            selection: true
-          }}
-          onSelectionChange={(data, rowData) => {
-            setSelectedKeys(data);
-          }}
-          columns={[
-            {
-              cellStyle: {
-                padding: 0
-              },
-              title: "Name",
-              field: "name"
-            }
-          ]}></MaterialTable> */}
       </React.Fragment>
     );
   };

src/common/ResponsiveTable.tsx

@@ -85,7 +85,7 @@ interface Props<T> {
   multiGutter?: boolean;
   rowsPerPageOptions?: number[];
   noDataMessage?: string;
-  renderMobile?: (row: T) => JSX.Element;
+  renderMobile?: (row: T, index: number) => JSX.Element;
   hideKeys?: boolean;
   onRowClick?: (row: T) => void;
   actions?: string | JSX.Element;
@@ -273,9 +273,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     return String(val).charAt(0).toUpperCase() + String(val).slice(1);
   }
 
-  const renderMobileRow = (row: T) => {
+  const renderMobileRow = (row: T, index: number) => {
     if (renderMobile) return (
-      renderMobile(row)
+      renderMobile(row, index)
     )
     if (columns) {
       return (
@@ -330,7 +330,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
       {rows.map((row, index) => {
         return (
           <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
-            {renderMobileRow(row)}
+            {renderMobileRow(row, index)}
             {renderGutter &&
               <>
               <Divider/>

src/contract/contractTransactionTable.tsx

@@ -369,6 +369,12 @@ export default function ContractTransactionTable(props: Props) {
           total={tableData.length}
           handleRowsPerPageChange={(e)=>{setPageSize(e.target.value)}}
           setPage={(page)=>{setTablePage(page)}}
+          loadMore={()=>{
+            let clone: Transaction[] = cloneDeep(tableData)
+            let current = cloneDeep(displayData)
+            let newRows = clone.splice(current.length, pageSize)
+            setDisplayData(current.concat(newRows))
+          }}
         />
         {/* <MaterialTable
           title={"Deliveries"}

src/gate/GateFlowGraph.tsx

@@ -127,6 +127,7 @@ export default function GateFlowGraph(props: Props) {
             setRuntime(moment.duration(runtime));
             let state = false;
             if (
+              data.length > 1 &&
               data[data.length - 1].value > gate.lowerFlow() &&
               data[data.length - 1].value < gate.upperFlow()
             ) {

src/gate/GateList.tsx

@@ -12,6 +12,7 @@ import AddGateFab from "./AddGateFab";
 import GateSettings from "./GateSettings";
 import { useGateAPI, useGlobalState } from "providers";
 import { Settings } from "@mui/icons-material";
+import { cloneDeep } from "lodash";
 
 interface Props {
   //gates: Gate[];
@@ -219,6 +220,19 @@ export default function GateList(props: Props) {
         onRowClick={(gate) => {goToGate(gate)}}
         hideKeys={isMobile || props.useMobile}
         setSearchText={(search) => setSearch(search)}
+        loadMore={()=>{
+          let current = cloneDeep(gates)
+          let keys = undefined
+          let types = undefined
+          if(currentTerminal) {
+            keys = [currentTerminal]
+            types = ["terminal"]
+          }
+          gateAPI.listGates(pageSize, current.length , "asc", "name", search, undefined, keys, types, undefined, undefined, as).then(resp => {
+            let newGates = resp.data.gates.map(gate => Gate.create(gate))
+            setGates(current.concat(newGates))
+          })
+        }}
       />
     )
   };

src/maps/mapDrawers/GroupDrawer.tsx

@@ -183,7 +183,7 @@ export default function GroupDrawer(props: Props) {
           onRowClick={toDevice}
           handleRowsPerPageChange={()=>{}}
           setPage={()=>{}}
-          total={0}
+          total={grpDevs.length}
           rows={grpDevs}
           renderMobile={mobile}
           renderGutter={gutter}

src/pages/Bins.tsx

@@ -1117,6 +1117,7 @@ export default function Bins(props: Props) {
         <MenuItem
           onClick={() => {
             setOpenQrGenerator(true);
+            setBinMenuAnchorEl(null)
           }}>
           <Typography>Generate QR Codes</Typography>
         </MenuItem>

src/pages/Firmware.tsx

@@ -39,6 +39,7 @@ import { useGlobalState } from "providers";
 import { useCallback, useEffect, useState } from "react";
 import { downloadFile } from "utils/download";
 import { or } from "utils/types";
+import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles((theme: Theme) => {
   const themeType = useThemeType()
@@ -463,6 +464,22 @@ export default function Firmware() {
           columns={columns(width === "xs" || width === "sm")}
           setPage={(page)=>{setTablePage(page)}}
           handleRowsPerPageChange={(e)=>{setPageSize(e.target.value)}}
+          loadMore={() => {
+            let current = cloneDeep(tableData)
+            firmwareAPI.listFirmware(pageSize, current.length, "desc", "version", searchText)
+            .then((response) => {
+              let newRows: FirmwareModel[] = or(response.data.firmware, []).map(
+                (firmwareData: any) => {
+                  return FirmwareModel.create(pond.Firmware.fromObject(firmwareData));
+                }
+              );
+              setTableData(current.concat(newRows))
+            })
+            .catch(() => {
+              //failed to load
+              error("Failed to load more firmware versions")
+            });
+          }}
         />
       </Box>
       <UploadFirmware