From 3ebd3f730e06426f8031c4ae6a46d35dc37621a8 Mon Sep 17 00:00:00 2001 From: ankur prabhu Date: Mon, 15 Apr 2024 01:34:07 +0530 Subject: [PATCH 1/5] fixing rerender --- .../Facility/CoverImageEditModal.tsx | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx index 55f0b1d3ed1..04e63a449bc 100644 --- a/src/Components/Facility/CoverImageEditModal.tsx +++ b/src/Components/Facility/CoverImageEditModal.tsx @@ -36,6 +36,7 @@ const CoverImageEditModal = ({ facility, }: Props) => { const [isUploading, setIsUploading] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); const [selectedFile, setSelectedFile] = useState(); const [preview, setPreview] = useState(); const [isCameraOpen, setIsCameraOpen] = useState(false); @@ -143,14 +144,16 @@ const CoverImageEditModal = ({ }; const handleDelete = async () => { + setIsDeleting(true); const { res } = await request(routes.deleteFacilityCoverImage, { pathParams: { id: facility.id! }, }); if (res?.ok) { Success({ msg: "Cover image deleted" }); - onDelete?.(); - closeModal(); } + setIsDeleting(false); + onDelete?.(); + closeModal(); }; const hasImage = !!(preview || facility.read_cover_image_url); @@ -283,9 +286,19 @@ const CoverImageEditModal = ({ - {t("delete")} + {isDeleting ? ( + + ) : ( + + )} + + {isDeleting ? `${t("Deleting")}...` : `${t("delete")}`} + )} Date: Wed, 17 Apr 2024 19:54:10 +0530 Subject: [PATCH 2/5] changes --- src/Components/Facility/CoverImageEditModal.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx index d0200c8ef46..8e03c5c46bf 100644 --- a/src/Components/Facility/CoverImageEditModal.tsx +++ b/src/Components/Facility/CoverImageEditModal.tsx @@ -60,7 +60,7 @@ const CoverImageEditModal = ({ setFacingMode((prevState: any) => prevState === FACING_MODE_USER ? FACING_MODE_ENVIRONMENT - : FACING_MODE_USER, + : FACING_MODE_USER ); }, []); @@ -133,7 +133,7 @@ const CoverImageEditModal = ({ msg: "Network Failure. Please check your internet connectivity.", }); setIsUploading(false); - }, + } ); await sleep(1000); @@ -288,17 +288,7 @@ const CoverImageEditModal = ({ onClick={handleDelete} disabled={isDeleting} > - {isDeleting ? ( - - ) : ( - - )} - - {isDeleting ? `${t("Deleting")}...` : `${t("delete")}`} - + {t("delete")} )} Date: Wed, 17 Apr 2024 20:17:02 +0530 Subject: [PATCH 3/5] changes --- src/Components/Facility/CoverImageEditModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx index 8e03c5c46bf..513d29b0f1c 100644 --- a/src/Components/Facility/CoverImageEditModal.tsx +++ b/src/Components/Facility/CoverImageEditModal.tsx @@ -60,7 +60,7 @@ const CoverImageEditModal = ({ setFacingMode((prevState: any) => prevState === FACING_MODE_USER ? FACING_MODE_ENVIRONMENT - : FACING_MODE_USER + : FACING_MODE_USER, ); }, []); @@ -133,7 +133,7 @@ const CoverImageEditModal = ({ msg: "Network Failure. Please check your internet connectivity.", }); setIsUploading(false); - } + }, ); await sleep(1000); From cba4119d6be65fd7e351b8bd564d74a149a0d1e4 Mon Sep 17 00:00:00 2001 From: ankur prabhu Date: Sat, 4 May 2024 16:05:05 +0530 Subject: [PATCH 4/5] adding suggested changes --- .../Facility/CoverImageEditModal.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx index 513d29b0f1c..5515c95496e 100644 --- a/src/Components/Facility/CoverImageEditModal.tsx +++ b/src/Components/Facility/CoverImageEditModal.tsx @@ -35,8 +35,7 @@ const CoverImageEditModal = ({ onDelete, facility, }: Props) => { - const [isUploading, setIsUploading] = useState(false); - const [isDeleting, setIsDeleting] = useState(false); + const [isProcessing, setIsProcessing] = useState(false); const [selectedFile, setSelectedFile] = useState(); const [preview, setPreview] = useState(); const [isCameraOpen, setIsCameraOpen] = useState(false); @@ -107,7 +106,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, @@ -124,7 +123,7 @@ const CoverImageEditModal = ({ Notification.Error({ msg: "Something went wrong!", }); - setIsUploading(false); + setIsProcessing(false); } }, null, @@ -132,26 +131,26 @@ const CoverImageEditModal = ({ 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 () => { - setIsDeleting(true); + setIsProcessing(true); const { res } = await request(routes.deleteFacilityCoverImage, { pathParams: { id: facility.id! }, }); if (res?.ok) { Success({ msg: "Cover image deleted" }); } - setIsDeleting(false); + setIsProcessing(false); onDelete?.(); closeModal(); }; @@ -280,13 +279,13 @@ const CoverImageEditModal = ({ closeModal(); dragProps.setFileDropError(""); }} - disabled={isUploading} + disabled={isProcessing} /> {facility.read_cover_image_url && ( {t("delete")} @@ -294,15 +293,15 @@ const CoverImageEditModal = ({ - {isUploading ? ( + {isProcessing ? ( ) : ( )} - {isUploading ? `${t("uploading")}...` : `${t("save")}`} + {isProcessing ? `${t("uploading")}...` : `${t("save")}`} @@ -368,7 +367,7 @@ const CoverImageEditModal = ({ setPreviewImage(null); }} className="my-2 w-full" - disabled={isUploading} + disabled={isProcessing} > {t("retake")} @@ -433,7 +432,7 @@ const CoverImageEditModal = ({ > {t("retake")} - + {isCaptureImgBeingUploaded ? ( <> Date: Mon, 5 Aug 2024 18:10:40 +0530 Subject: [PATCH 5/5] improve type definitions code quality --- .../Facility/CoverImageEditModal.tsx | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx index 6f08e49a860..dc8e0fcd6d7 100644 --- a/src/Components/Facility/CoverImageEditModal.tsx +++ b/src/Components/Facility/CoverImageEditModal.tsx @@ -28,6 +28,22 @@ 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, @@ -36,30 +52,25 @@ const CoverImageEditModal = ({ facility, }: Props) => { const [isProcessing, setIsProcessing] = useState(false); - const [selectedFile, setSelectedFile] = useState(); + const [selectedFile, setSelectedFile] = useState(); const [preview, setPreview] = useState(); const [isCameraOpen, setIsCameraOpen] = useState(false); const webRef = useRef(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(FACING_MODE_USER); - const videoConstraints = { - width: 1280, - height: 720, - facingMode: "user", - }; + const [constraint, setConstraint] = useState( + 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, ); }, []); @@ -322,7 +333,7 @@ const CoverImageEditModal = ({ screenshotFormat="image/jpeg" width={1280} ref={webRef} - videoConstraints={{ ...videoConstraints, facingMode }} + videoConstraints={constraint} /> ) : (