Fix empty state in LocationManagement and BedManagement (#6937)

* Fix empty state in LocationManagement * Refactor BedManagement component
ohcnetwork · Dec 29, 2023 · 8197f29 · 8197f29
1 parent 22f36fd
commit 8197f29
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
@@ -130,7 +130,7 @@ interface ItemsProps<TItem> {
 const Items = <TItem extends object>(props: ItemsProps<TItem>) => {
   const { loading, items } = useContextualized<TItem>();
 
-  if (loading) {
+  if (loading || items.length === 0) {
     return null;
   }
 

diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx
@@ -182,24 +182,22 @@ export const BedManagement = (props: BedManagementProps) => {
     ));
   } else if (data?.results.length === 0) {
     BedList = (
-      <p className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+      <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-gray-500">
         No beds available in this location
       </p>
     );
   }
 
-  if (data?.results.length) {
-    bed = (
-      <>
-        <div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div>
-        {data.count && (
-          <div className="mt-4 flex w-full justify-center">
-            <Pagination totalCount={data.count} />
-          </div>
-        )}
-      </>
-    );
-  }
+  bed = (
+    <>
+      <div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div>
+      {Boolean(data?.count && data.count > 0) && (
+        <div className="mt-4 flex w-full justify-center">
+          <Pagination totalCount={data?.count ?? 0} />
+        </div>
+      )}
+    </>
+  );
 
   if (loading) {
     return <Loading />;

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
@@ -46,14 +46,14 @@ export default function LocationManagement({ facilityId }: Props) {
               Add New Location
             </ButtonV2>
           </div>
-          <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-            <span>No locations available</span>
-          </PaginatedList.WhenEmpty>
-
-          <PaginatedList.WhenLoading>
-            <Loading />
-          </PaginatedList.WhenLoading>
           <div className="w-full @container">
+            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+              <span>No locations available</span>
+            </PaginatedList.WhenEmpty>
+
+            <PaginatedList.WhenLoading>
+              <Loading />
+            </PaginatedList.WhenLoading>
             <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8">
               {(item) => <Location {...item} />}
             </PaginatedList.Items>