Fix Notifications for Facility Cover Image Deletion (#7609)

src/Components/Facility/CoverImageEditModal.tsx

@@ -28,38 +28,49 @@ interface Props {
   facility: FacilityModel;
 }
 
+const VideoConstraints = {
+  user: {
+    width: 1280,
+    height: 720,
+    facingMode: "user",
+  },
+  environment: {
+    width: 1280,
+    height: 720,
+    facingMode: { exact: "environment" },
+  },
+} as const;
+
+type IVideoConstraint =
+  (typeof VideoConstraints)[keyof typeof VideoConstraints];
+
 const CoverImageEditModal = ({
   open,
   onClose,
   onSave,
   onDelete,
   facility,
 }: Props) => {
-  const [isUploading, setIsUploading] = useState(false);
-  const [selectedFile, setSelectedFile] = useState<any>();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File>();
   const [preview, setPreview] = useState<string>();
   const [isCameraOpen, setIsCameraOpen] = useState<boolean>(false);
   const webRef = useRef<any>(null);
   const [previewImage, setPreviewImage] = useState(null);
   const [isCaptureImgBeingUploaded, setIsCaptureImgBeingUploaded] =
     useState(false);
-  const FACING_MODE_USER = "user";
-  const FACING_MODE_ENVIRONMENT = { exact: "environment" };
-  const [facingMode, setFacingMode] = useState<any>(FACING_MODE_USER);
-  const videoConstraints = {
-    width: 1280,
-    height: 720,
-    facingMode: "user",
-  };
+  const [constraint, setConstraint] = useState<IVideoConstraint>(
+    VideoConstraints.user,
+  );
   const { width } = useWindowDimensions();
   const LaptopScreenBreakpoint = 640;
   const isLaptopScreen = width >= LaptopScreenBreakpoint;
   const { t } = useTranslation();
   const handleSwitchCamera = useCallback(() => {
-    setFacingMode((prevState: any) =>
-      prevState === FACING_MODE_USER
-        ? FACING_MODE_ENVIRONMENT
-        : FACING_MODE_USER,
+    setConstraint((prev) =>
+      prev.facingMode === "user"
+        ? VideoConstraints.environment
+        : VideoConstraints.user,
     );
   }, []);
 
@@ -106,7 +117,7 @@ const CoverImageEditModal = ({
     const formData = new FormData();
     formData.append("cover_image", selectedFile);
     const url = `/api/v1/facility/${facility.id}/cover_image/`;
-    setIsUploading(true);
+    setIsProcessing(true);
 
     uploadFile(
       url,
@@ -123,34 +134,36 @@ const CoverImageEditModal = ({
           Notification.Error({
             msg: "Something went wrong!",
           });
-          setIsUploading(false);
+          setIsProcessing(false);
         }
       },
       null,
       () => {
         Notification.Error({
           msg: "Network Failure. Please check your internet connectivity.",
         });
-        setIsUploading(false);
+        setIsProcessing(false);
       },
     );
 
     await sleep(1000);
-    setIsUploading(false);
+    setIsProcessing(false);
     setIsCaptureImgBeingUploaded(false);
     onSave && onSave();
     closeModal();
   };
 
   const handleDelete = async () => {
+    setIsProcessing(true);
     const { res } = await request(routes.deleteFacilityCoverImage, {
       pathParams: { id: facility.id! },
     });
     if (res?.ok) {
       Success({ msg: "Cover image deleted" });
-      onDelete?.();
-      closeModal();
     }
+    setIsProcessing(false);
+    onDelete?.();
+    closeModal();
   };
 
   const hasImage = !!(preview || facility.read_cover_image_url);
@@ -277,29 +290,29 @@ const CoverImageEditModal = ({
                   closeModal();
                   dragProps.setFileDropError("");
                 }}
-                disabled={isUploading}
+                disabled={isProcessing}
               />
               {facility.read_cover_image_url && (
                 <ButtonV2
                   variant="danger"
                   onClick={handleDelete}
-                  disabled={isUploading}
+                  disabled={isProcessing}
                 >
                   {t("delete")}
                 </ButtonV2>
               )}
               <ButtonV2
                 id="save-cover-image"
                 onClick={handleUpload}
-                disabled={isUploading}
+                disabled={isProcessing}
               >
-                {isUploading ? (
+                {isProcessing ? (
                   <CareIcon icon="l-spinner" className="animate-spin text-lg" />
                 ) : (
                   <CareIcon icon="l-save" className="text-lg" />
                 )}
                 <span>
-                  {isUploading ? `${t("uploading")}...` : `${t("save")}`}
+                  {isProcessing ? `${t("uploading")}...` : `${t("save")}`}
                 </span>
               </ButtonV2>
             </div>
@@ -320,7 +333,7 @@ const CoverImageEditModal = ({
                     screenshotFormat="image/jpeg"
                     width={1280}
                     ref={webRef}
-                    videoConstraints={{ ...videoConstraints, facingMode }}
+                    videoConstraints={constraint}
                   />
                 </>
               ) : (
@@ -365,7 +378,7 @@ const CoverImageEditModal = ({
                           setPreviewImage(null);
                         }}
                         className="my-2 w-full"
-                        disabled={isUploading}
+                        disabled={isProcessing}
                       >
                         {t("retake")}
                       </ButtonV2>
@@ -430,7 +443,7 @@ const CoverImageEditModal = ({
                         >
                           {t("retake")}
                         </ButtonV2>
-                        <Submit disabled={isUploading} onClick={handleUpload}>
+                        <Submit disabled={isProcessing} onClick={handleUpload}>
                           {isCaptureImgBeingUploaded ? (
                             <>
                               <CareIcon