From 4f82cbc046f791eda5ef6ba37aed05ef4f2fabc4 Mon Sep 17 00:00:00 2001
From: Jacobjohnjeevan <mail@jacobjeevan.me>
Date: Thu, 5 Sep 2024 12:39:10 +0530
Subject: [PATCH 1/2] rm tooltip after cover image load

---
 src/Components/Facility/FacilityHome.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index a0dcf06026f..8f0f5a64058 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -59,6 +59,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [editCoverImage, setEditCoverImage] = useState(false);
   const [coverImageEdited, setCoverImageEdited] = useState(false);
+  const [coverImageLoaded, setCoverImageLoaded] = useState(false);
   const authUser = useAuthUser();
 
   useMessageListener((data) => console.log(data));
@@ -131,8 +132,9 @@ export const FacilityHome = ({ facilityId }: Props) => {
         src={`${facilityData?.read_cover_image_url}`}
         alt={facilityData?.name}
         className="h-full w-full rounded-lg object-cover"
+        onLoad={() => setCoverImageLoaded(true)}
       />
-      {coverImageEdited && (
+      {coverImageEdited && !coverImageLoaded && (
         <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")}

From abe503cb99d76c6e007c98054e4a52c02d0cead3 Mon Sep 17 00:00:00 2001
From: Jacobjohnjeevan <mail@jacobjeevan.me>
Date: Tue, 17 Sep 2024 13:38:05 +0530
Subject: [PATCH 2/2] Cover Image

- Refresh cover image on page, right after save
	- Previously required page reload for changes to show up on page
---
 src/Components/Facility/FacilityHome.tsx | 27 ++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 8f0f5a64058..0dc0d4854f1 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -4,7 +4,7 @@ import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import { FacilityModel } from "./models";
 import { FACILITY_FEATURE_TYPES, USER_TYPES } from "../../Common/constants";
 import DropdownMenu, { DropdownItem } from "../Common/components/Menu";
-import { lazy, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -60,6 +60,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
   const [editCoverImage, setEditCoverImage] = useState(false);
   const [coverImageEdited, setCoverImageEdited] = useState(false);
   const [coverImageLoaded, setCoverImageLoaded] = useState(false);
+  const [coverImageUrl, setCoverImageUrl] = useState<string | undefined>("");
   const authUser = useAuthUser();
 
   useMessageListener((data) => console.log(data));
@@ -79,6 +80,27 @@ export const FacilityHome = ({ facilityId }: Props) => {
     },
   });
 
+  const fetchImage = async () => {
+    try {
+      let imageUrl = facilityData?.read_cover_image_url;
+      if (imageUrl) {
+        await fetch(`${imageUrl}`, {
+          headers: { "Force-Revalidate": "1" },
+          credentials: "include",
+          mode: "no-cors",
+        });
+        imageUrl += "?" + Date.now();
+        setCoverImageUrl(imageUrl);
+      }
+    } catch (error) {
+      return;
+    }
+  };
+
+  useEffect(() => {
+    setCoverImageUrl(facilityData?.read_cover_image_url);
+  }, [facilityData?.read_cover_image_url]);
+
   const handleDeleteClose = () => {
     setOpenDeleteDialog(false);
   };
@@ -129,7 +151,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
   const CoverImage = () => (
     <>
       <img
-        src={`${facilityData?.read_cover_image_url}`}
+        src={coverImageUrl}
         alt={facilityData?.name}
         className="h-full w-full rounded-lg object-cover"
         onLoad={() => setCoverImageLoaded(true)}
@@ -168,6 +190,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
         open={editCoverImage}
         onSave={() => {
           facilityFetch();
+          fetchImage();
           setCoverImageEdited(true);
         }}
         onClose={() => setEditCoverImage(false)}