From 6c18e2bdd95367762bf8db80b74f2a5f8138ce76 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Thu, 22 Aug 2024 10:06:19 -0700
Subject: [PATCH] Enable Facility Cover Image Uploads on Mobile Screens (#8402)

* Optimize Facility Cover Image for Reload

* Fix Edit Cover Image for Mobile Screens

* Revert temp assignment

* fixed lint

---------

Co-authored-by: Khavin Shankar <khavinshankar@gmail.com>
---
 src/Components/Facility/FacilityHome.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 1b362d9e4f0..82ee82afb22 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -38,6 +38,10 @@ import { LocationSelect } from "../Common/LocationSelect.js";
 import { CameraFeedPermittedUserTypes } from "../../Utils/permissions.js";
 import { FacilityStaffList } from "./FacilityStaffList.js";
 
+type Props = {
+  facilityId: string;
+};
+
 const Loading = lazy(() => import("../Common/Loading"));
 
 export const getFacilityFeatureIcon = (featureId: number) => {
@@ -50,12 +54,10 @@ export const getFacilityFeatureIcon = (featureId: number) => {
   );
 };
 
-export const FacilityHome = (props: any) => {
+export const FacilityHome = ({ facilityId }: Props) => {
   const { t } = useTranslation();
-  const { facilityId } = props;
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [editCoverImage, setEditCoverImage] = useState(false);
-  const [imageKey, setImageKey] = useState(Date.now());
   const authUser = useAuthUser();
 
   useMessageListener((data) => console.log(data));
@@ -112,7 +114,10 @@ export const FacilityHome = (props: any) => {
   const editCoverImageTooltip = hasPermissionToEditCoverImage && (
     <div
       id="facility-coverimage"
-      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-secondary-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
+      className={
+        "absolute right-0 top-0 z-10 flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-t-lg bg-black text-sm text-secondary-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
+      }
+      onClick={() => setEditCoverImage(true)}
     >
       <CareIcon icon="l-pen" className="text-lg" />
       <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
@@ -121,7 +126,7 @@ export const FacilityHome = (props: any) => {
 
   const CoverImage = () => (
     <img
-      src={`${facilityData?.read_cover_image_url}?imgKey=${imageKey}`}
+      src={`${facilityData?.read_cover_image_url}`}
       alt={facilityData?.name}
       className="h-full w-full rounded-lg object-cover"
     />
@@ -150,11 +155,7 @@ export const FacilityHome = (props: any) => {
       />
       <CoverImageEditModal
         open={editCoverImage}
-        onSave={() =>
-          facilityData?.read_cover_image_url
-            ? setImageKey(Date.now())
-            : facilityFetch()
-        }
+        onSave={() => facilityFetch()}
         onClose={() => setEditCoverImage(false)}
         onDelete={() => facilityFetch()}
         facility={facilityData ?? ({} as FacilityModel)}