feat: load overlay to partner listings grid (bloom-housing#1116)

* feat: load overlay to partner listings grid * feat: agpage hides total items when no items
YazeedLoonat · Apr 5, 2022 · cab7164 · cab7164
1 parent 1e05cc2
commit cab7164
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/sites/partners/pages/index.tsx b/sites/partners/pages/index.tsx
@@ -8,6 +8,7 @@ import {
   LocalizedLink,
   AgPagination,
   AG_PER_PAGE_OPTIONS,
+  LoadingOverlay,
 } from "@bloom-housing/ui-components"
 import { AgGridReact } from "ag-grid-react"
 import { GridOptions } from "ag-grid-community"
@@ -133,15 +134,12 @@ export default function ListingsList() {
     return columns
   }, [])
 
-  const { listingDtos, listingsLoading, listingsError } = useListingsData({
+  const { listingDtos, listingsLoading } = useListingsData({
     page: currentPage,
     limit: itemsPerPage,
     userId: !isAdmin ? profile?.id : undefined,
   })
 
-  if (listingsLoading) return "Loading..."
-  if (listingsError) return "An error has occurred."
-
   return (
     <Layout>
       <Head>
@@ -170,21 +168,23 @@ export default function ListingsList() {
             </div>
 
             <div className="applications-table mt-5">
-              <AgGridReact
-                gridOptions={gridOptions}
-                columnDefs={columnDefs}
-                rowData={listingDtos.items}
-                domLayout={"autoHeight"}
-                headerHeight={83}
-                rowHeight={58}
-                suppressPaginationPanel={true}
-                paginationPageSize={AG_PER_PAGE_OPTIONS[0]}
-                suppressScrollOnNewData={true}
-              ></AgGridReact>
+              <LoadingOverlay isLoading={listingsLoading}>
+                <AgGridReact
+                  gridOptions={gridOptions}
+                  columnDefs={columnDefs}
+                  rowData={listingDtos?.items}
+                  domLayout={"autoHeight"}
+                  headerHeight={83}
+                  rowHeight={58}
+                  suppressPaginationPanel={true}
+                  paginationPageSize={AG_PER_PAGE_OPTIONS[0]}
+                  suppressScrollOnNewData={true}
+                ></AgGridReact>
+              </LoadingOverlay>
 
               <AgPagination
-                totalItems={listingDtos.meta.totalItems}
-                totalPages={listingDtos.meta.totalPages}
+                totalItems={listingDtos?.meta?.totalItems}
+                totalPages={listingDtos?.meta?.totalPages}
                 currentPage={currentPage}
                 itemsPerPage={itemsPerPage}
                 quantityLabel={t("listings.totalListings")}

diff --git a/ui-components/src/global/vendor/AgPagination.tsx b/ui-components/src/global/vendor/AgPagination.tsx
@@ -81,15 +81,17 @@ const AgPagination = ({
         <div className="data-pager__control-group ml-0 md:ml-auto w-full md:w-auto md:flex md:items-center">
           <div className="data-pager__control">
             {totalItems > 0 && (
-              <span className="field-label">
-                <strong>
-                  Page {currentPage} of {totalPages}
-                </strong>
-              </span>
+              <>
+                <span className="field-label">
+                  <strong>
+                    Page {currentPage} of {totalPages}
+                  </strong>
+                </span>
+                <span className="field-label">
+                  ({totalItems} {quantityLabel})
+                </span>
+              </>
             )}
-            <span className="field-label">
-              ({totalItems} {quantityLabel})
-            </span>
           </div>
 
           <div className="field data-pager__control md:mb-0">