(fix) O3-4303: Fix webcam image uploads (#2171)

* (fix) O3-4303: Fix webcam image uploads

* Use updated UploadedFile interface from core

packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx

@@ -8,11 +8,11 @@ import {
   deleteAttachmentPermanently,
   showModal,
   showSnackbar,
+  type Attachment,
+  type UploadedFile,
   useAttachments,
   useLayoutType,
   UserHasAccess,
-  type Attachment,
-  type UploadedFile,
 } from '@openmrs/esm-framework';
 import { CardHeader, EmptyState, useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 import { createGalleryEntry } from '../utils';
@@ -40,7 +40,7 @@ const AttachmentsOverview: React.FC<AttachmentsOverviewProps> = ({ patientUuid }
   const { data, mutate, isValidating, isLoading } = useAttachments(patientUuid, true);
   const { allowedFileExtensions } = useAllowedFileExtensions();
 
-  const [attachmentToPreview, setAttachmentToPreview] = useState<Attachment>(null);
+  const [attachmentToPreview, setAttachmentToPreview] = useState<Attachment | null>(null);
   const [hasUploadError, setHasUploadError] = useState(false);
   const [view, setView] = useState<ViewType>('grid');
 
@@ -98,7 +98,12 @@ const AttachmentsOverview: React.FC<AttachmentsOverviewProps> = ({ patientUuid }
 
   const showAddAttachmentModal = useCallback(() => {
     const close = showModal('capture-photo-modal', {
-      saveFile: (file: UploadedFile) => createAttachment(patientUuid, file),
+      saveFile: (file: UploadedFile) => {
+        if (file.capturedFromWebcam && !file.fileName.includes('.')) {
+          file.fileName = `${file.fileName}.png`;
+        }
+        return createAttachment(patientUuid, file);
+      },
       allowedExtensions: allowedFileExtensions,
       closeModal: () => close(),
       onCompletion: () => mutate(),

packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tabs, Tab, TabList, TabPanels, TabPanel, ModalHeader, ModalBody, InlineNotification } from '@carbon/react';
+import { InlineNotification, ModalBody, ModalHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import { type FetchResponse, type UploadedFile } from '@openmrs/esm-framework';
 import { useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 import CameraComponent from './camera.component';
@@ -33,10 +33,10 @@ const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
   saveFile,
   title,
 }) => {
+  const { allowedFileExtensions } = useAllowedFileExtensions();
   const [error, setError] = useState<Error>(null);
   const [filesToUpload, setFilesToUpload] = useState<Array<UploadedFile>>([]);
   const [uploadFilesToServer, setUploadFilesToServer] = useState(false);
-  const { allowedFileExtensions } = useAllowedFileExtensions();
 
   const handleTakePhoto = useCallback((file: string) => {
     setFilesToUpload([
@@ -46,6 +46,7 @@ const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
         fileType: 'image',
         fileDescription: '',
         status: 'uploading',
+        capturedFromWebcam: true,
       },
     ]);
   }, []);
@@ -100,10 +101,9 @@ const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
 
 const CameraMediaUploadTabs: React.FC<CameraMediaUploadTabsProps> = ({ title }) => {
   const { t } = useTranslation();
-  const [view, setView] = useState('upload');
-
   const { cameraOnly, closeModal, error } = useContext(CameraMediaUploaderContext);
   const mediaStream = useRef<MediaStream | undefined>();
+  const [view, setView] = useState('upload');
 
   const stopCameraStream = useCallback(() => {
     mediaStream.current?.getTracks().forEach((t) => t.stop());

packages/esm-patient-attachments-app/src/camera-media-uploader/camera.component.tsx

@@ -11,18 +11,9 @@ interface CameraComponentProps {
 const CameraComponent: React.FC<CameraComponentProps> = ({ mediaStream, stopCameraStream }) => {
   const { handleTakePhoto, setError } = useContext(CameraMediaUploaderContext);
 
-  useEffect(() => {
-    return () => {
-      stopCameraStream();
-    };
-  }, [stopCameraStream]);
+  useEffect(() => stopCameraStream(), [stopCameraStream]);
 
-  const setMediaStream = useCallback(
-    (ms: MediaStream) => {
-      mediaStream.current = ms;
-    },
-    [mediaStream],
-  );
+  const setMediaStream = useCallback((ms: MediaStream) => (mediaStream.current = ms), [mediaStream]);
   return (
     <Camera
       isDisplayStartCameraError={false}

packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx

@@ -1,10 +1,10 @@
 import React, { type SyntheticEvent, useCallback, useState, useContext } from 'react';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextArea, TextInput } from '@carbon/react';
+import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
+import { DocumentPdf, DocumentUnknown } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
-import { Button, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextArea, TextInput } from '@carbon/react';
-import { DocumentPdf, DocumentUnknown } from '@carbon/react/icons';
 import { useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 import { type UploadedFile, UserHasAccess } from '@openmrs/esm-framework';
 import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
@@ -108,7 +108,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
     onSaveFile?.({
       ...uploadedFile,
       fileName: `${sanitizedFileName}${fileExtension}`,
-      fileDescription,
+      fileDescription: fileDescription ?? '',
     });
   };