From 8197f29b3109b653d09cd131614ebd7f442becdb Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Fri, 29 Dec 2023 17:57:03 +0530
Subject: [PATCH] Fix empty state in LocationManagement and BedManagement
 (#6937)

* Fix empty state in LocationManagement

* Refactor BedManagement component
---
 src/CAREUI/misc/PaginatedList.tsx             |  2 +-
 src/Components/Facility/BedManagement.tsx     | 24 +++++++++----------
 .../Facility/LocationManagement.tsx           | 14 +++++------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
index 61c67f97ae2..1487d69e4fa 100644
--- 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
index 68e9fade43d..d8799f1fbc5 100644
--- 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
index b7a758c5055..93a08794c82 100644
--- 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>