From 62febd1a18f6d09a9e9c3aef80bc9ff40b19c752 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 23 Aug 2024 12:23:58 +0530
Subject: [PATCH] Fixes facility cover image from not reloading after upload
 (#8412)

---
 .../Facility/CoverImageEditModal.tsx          | 13 +++++-----
 src/Components/Facility/FacilityHome.tsx      | 25 ++++++++++++++-----
 src/Locale/en/Facility.json                   |  5 ++--
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx
index 56821dfc7cc..d521d55c7ce 100644
--- a/src/Components/Facility/CoverImageEditModal.tsx
+++ b/src/Components/Facility/CoverImageEditModal.tsx
@@ -127,9 +127,14 @@ const CoverImageEditModal = ({
         Authorization:
           "Bearer " + localStorage.getItem(LocalStorageKeys.accessToken),
       },
-      (xhr: XMLHttpRequest) => {
+      async (xhr: XMLHttpRequest) => {
         if (xhr.status === 200) {
           Success({ msg: "Cover image updated." });
+          setIsProcessing(false);
+          setIsCaptureImgBeingUploaded(false);
+          await sleep(1000);
+          onSave?.();
+          closeModal();
         } else {
           Notification.Error({
             msg: "Something went wrong!",
@@ -145,12 +150,6 @@ const CoverImageEditModal = ({
         setIsProcessing(false);
       },
     );
-
-    await sleep(1000);
-    setIsProcessing(false);
-    setIsCaptureImgBeingUploaded(false);
-    onSave && onSave();
-    closeModal();
   };
 
   const handleDelete = async () => {
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 82ee82afb22..50edef824c8 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -58,6 +58,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
   const { t } = useTranslation();
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [editCoverImage, setEditCoverImage] = useState(false);
+  const [coverImageEdited, setCoverImageEdited] = useState(false);
   const authUser = useAuthUser();
 
   useMessageListener((data) => console.log(data));
@@ -125,11 +126,20 @@ export const FacilityHome = ({ facilityId }: Props) => {
   );
 
   const CoverImage = () => (
-    <img
-      src={`${facilityData?.read_cover_image_url}`}
-      alt={facilityData?.name}
-      className="h-full w-full rounded-lg object-cover"
-    />
+    <>
+      <img
+        src={`${facilityData?.read_cover_image_url}`}
+        alt={facilityData?.name}
+        className="h-full w-full rounded-lg object-cover"
+      />
+      {coverImageEdited && (
+        <div className="absolute inset-x-0 bottom-0 w-full rounded-b-md bg-black/70 px-2 pb-0.5 backdrop-blur-sm">
+          <span className="text-center text-xs font-medium text-secondary-100">
+            {t("cover_image_updated_note")}
+          </span>
+        </div>
+      )}
+    </>
   );
 
   return (
@@ -155,7 +165,10 @@ export const FacilityHome = ({ facilityId }: Props) => {
       />
       <CoverImageEditModal
         open={editCoverImage}
-        onSave={() => facilityFetch()}
+        onSave={() => {
+          facilityFetch();
+          setCoverImageEdited(true);
+        }}
         onClose={() => setEditCoverImage(false)}
         onDelete={() => facilityFetch()}
         facility={facilityData ?? ({} as FacilityModel)}
diff --git a/src/Locale/en/Facility.json b/src/Locale/en/Facility.json
index e321fa02f43..b00c41417ed 100644
--- a/src/Locale/en/Facility.json
+++ b/src/Locale/en/Facility.json
@@ -58,5 +58,6 @@
   "duplicate_patient_record_confirmation": "Admit the patient record to your facility by adding the year of birth",
   "duplicate_patient_record_rejection": "I confirm that the suspect / patient I want to create is not on the list.",
   "duplicate_patient_record_birth_unknown": "Please contact your district care coordinator, the shifting facility or the patient themselves if you are not sure about the patient's year of birth.",
-  "patient_transfer_birth_match_note": "Note: Year of birth must match the patient to process the transfer request."
-}
+  "patient_transfer_birth_match_note": "Note: Year of birth must match the patient to process the transfer request.",
+  "cover_image_updated_note": "It could take a while to see the updated cover image"
+}
\ No newline at end of file