Fix Camera Capture and Upload Workflow (#10326)

ohcnetwork · Jan 31, 2025 · 2298ed5 · 2298ed5
1 parent 55d5790
commit 2298ed5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Files/CameraCaptureDialog.tsx b/src/components/Files/CameraCaptureDialog.tsx
@@ -16,10 +16,11 @@ export interface CameraCaptureDialogProps {
   onHide: () => void;
   onCapture: (file: File, fileName: string) => void;
   onResetCapture: () => void;
+  setPreview?: (isPreview: boolean) => void;
 }
 
 export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
-  const { show, onHide, onCapture, onResetCapture } = props;
+  const { show, onHide, onCapture, onResetCapture, setPreview } = props;
   const isLaptopScreen = useBreakpoints({ lg: true, default: false });
 
   const [cameraFacingMode, setCameraFacingMode] = useState(
@@ -149,6 +150,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                   variant="primary"
                   onClick={() => {
                     captureImage();
+                    setPreview?.(true);
                   }}
                   className="m-2"
                 >
@@ -164,6 +166,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                   onClick={() => {
                     setPreviewImage(null);
                     onResetCapture();
+                    setPreview?.(false);
                   }}
                   className="m-2"
                 >
@@ -174,6 +177,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                   onClick={() => {
                     setPreviewImage(null);
                     onHide();
+                    setPreview?.(false);
                   }}
                   className="m-2"
                 >
@@ -215,6 +219,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                     variant="primary"
                     onClick={() => {
                       captureImage();
+                      setPreview?.(true);
                     }}
                   >
                     <CareIcon icon="l-capture" className="text-lg" />
@@ -230,6 +235,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                     onClick={() => {
                       setPreviewImage(null);
                       onResetCapture();
+                      setPreview?.(false);
                     }}
                   >
                     {t("retake")}
@@ -239,6 +245,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                     onClick={() => {
                       onHide();
                       setPreviewImage(null);
+                      setPreview?.(false);
                     }}
                   >
                     {t("submit")}
@@ -254,6 +261,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
               setPreviewImage(null);
               onResetCapture();
               onHide();
+              setPreview?.(false);
             }}
           >
             {`${t("close")} ${t("camera")}`}

diff --git a/src/components/Files/FilesTab.tsx b/src/components/Files/FilesTab.tsx
@@ -157,12 +157,16 @@ export const FilesTab = (props: FilesTabProps) => {
   });
 
   useEffect(() => {
-    if (fileUpload.files.length > 0 && fileUpload.files[0] !== undefined) {
+    if (
+      fileUpload.files.length > 0 &&
+      fileUpload.files[0] !== undefined &&
+      !fileUpload.previewing
+    ) {
       setOpenUploadDialog(true);
     } else {
       setOpenUploadDialog(false);
     }
-  }, [fileUpload.files]);
+  }, [fileUpload.files, fileUpload.previewing]);
 
   useEffect(() => {
     if (!openUploadDialog) {

diff --git a/src/hooks/useFileUpload.tsx b/src/hooks/useFileUpload.tsx
@@ -61,6 +61,7 @@ export type FileUploadReturn = {
   removeFile: (index: number) => void;
   clearFiles: () => void;
   uploading: boolean;
+  previewing?: boolean;
 };
 
 // Array of image extensions
@@ -92,6 +93,7 @@ export default function useFileUpload(
   const [cameraModalOpen, setCameraModalOpen] = useState(false);
   const [audioModalOpen, setAudioModalOpen] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [previewing, setPreviewing] = useState(false);
 
   const [files, setFiles] = useState<File[]>([]);
   const queryClient = useQueryClient();
@@ -285,6 +287,7 @@ export default function useFileUpload(
     setFiles(errors);
     setUploadFileNames(errors?.map((f) => f.name) ?? []);
     setError(t("file_error__network"));
+    setCameraModalOpen(false);
   };
 
   const clearFiles = () => {
@@ -302,6 +305,7 @@ export default function useFileUpload(
           setFiles((prev) => [...prev, file]);
         }}
         onResetCapture={clearFiles}
+        setPreview={setPreviewing}
       />
       <AudioCaptureDialog
         show={audioModalOpen}
@@ -356,5 +360,6 @@ export default function useFileUpload(
     },
     clearFiles,
     uploading,
+    previewing,
   };
 }