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

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