TP-67349 | image upload removed observable

src/components/form/components/imageUpload/ImageUploadV2.tsx

@@ -10,7 +10,6 @@ import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { RootState } from '../../../../store/store';
 import { AnswerType } from '../../interface';
 import ErrorMessage from '../ErrorMessage';
-import withObservables from '@nozbe/with-observables';
 import OfflineImageDAO from '../../../../wmDB/dao/OfflineImageDAO';
 import { CLICKSTREAM_EVENT_NAMES, PrefixJpegBase64Image } from '../../../../common/Constants';
 import { addClickstreamEvent, ClickstreamDesc } from '../../../../services/clickstreamEventService';
@@ -24,10 +23,16 @@ import { capturePhoto } from '@components/utlis/ImageUtlis';
 import CameraIcon from '@rn-ui-lib/icons/CameraIcon';
 import { getImageHeightWrtAspectRatio } from '@services/casePayload.transformer';
 import { IImageUpload, ImageValidationError } from './interfaces';
-import { getImageUri } from './utils';
 import dayjs from 'dayjs';
 import ImagePlaceholder from './ImagePlaceholder';
-import { IMAGE_FORMAT_JPEG, IMAGE_PADDING, IMAGE_QUALITY, MAX_HEIGHT, MAX_WIDTH, PhotoUploadErrorMessages } from './constants';
+import {
+  IMAGE_FORMAT_JPEG,
+  IMAGE_PADDING,
+  IMAGE_QUALITY,
+  MAX_HEIGHT,
+  MAX_WIDTH,
+  PhotoUploadErrorMessages,
+} from './constants';
 import { toast } from '@rn-ui-lib/components/toast';
 import { IImageDetails, LAUNCH_REQUEST } from '@rn-ui-lib/components/photoUpload/PhotoUpload';
 import UploadIcon from '@rn-ui-lib/icons/UploadIcon';
@@ -46,6 +51,10 @@ const ImageUploadV2: React.FC<IImageUpload> = (props) => {
   const deviceGeolocationCoordinate = useAppSelector(
     (state) => state.foregroundService.deviceGeolocationCoordinate
   );
+  const intermediateDocsToBeUploaded = useAppSelector(
+    (state) => state.feedbackImages.intermediateDocsToBeUploaded
+  );
+  const imageDoc = intermediateDocsToBeUploaded?.[caseId]?.documents?.[questionId];
   const { latitude, longitude, timestamp } = deviceGeolocationCoordinate || {};
   const question = template.questions[questionId as keyof typeof template.questions];
   const dataFromRedux = useSelector(
@@ -67,11 +76,17 @@ const ImageUploadV2: React.FC<IImageUpload> = (props) => {
     return null;
   }
 
-  const addOriginalFileUriToDocs = (caseId: string, fileUri: string, questionKey: string) => {
+  const addOriginalFileUriToDocs = (
+    caseId: string,
+    fileUri: string,
+    questionKey: string,
+    imageWidth: number,
+    imageHeight: number
+  ) => {
     if (!fileUri) {
       return;
     }
-    dispatch(addIntermediateDocument({ caseId, fileUri, questionKey }));
+    dispatch(addIntermediateDocument({ caseId, fileUri, questionKey, imageWidth, imageHeight }));
   };
 
   const handleImageDelete = () => {
@@ -171,7 +186,6 @@ const ImageUploadV2: React.FC<IImageUpload> = (props) => {
       });
       const { base64 = '', uri = '', imageWidth, imageHeight } = result;
       handlePictureClickClickstream();
-      addOriginalFileUriToDocs(caseId, uri, questionId);
       if (!base64) {
         return;
       }
@@ -194,6 +208,7 @@ const ImageUploadV2: React.FC<IImageUpload> = (props) => {
       await OfflineImageDAO.addImage(base64Image, uri, uniqueId, imageWidth, imageHeight);
       toast({ type: 'success', text1: 'Geolocation & Timestamp added successfully' });
       setImageLoading(false);
+      addOriginalFileUriToDocs(caseId, uri, questionId, imageWidth, imageHeight);
     } catch (err: unknown) {
       const error = err as ImageValidationError;
       handlePictureClickClickstream(error);
@@ -206,7 +221,11 @@ const ImageUploadV2: React.FC<IImageUpload> = (props) => {
     }
   };
 
-  const { uri, imageWidth = 0, imageHeight = 0 } = getImageUri(props.offlineImages, imageId) || {};
+  const {
+    fileUri,
+    imageHeight = 350,
+    imageWidth = 350
+  } = imageDoc || {};
 
   const imageHeightWrtAspectRatio = getImageHeightWrtAspectRatio(
     imageWidth,
@@ -337,7 +356,7 @@ const ImageUploadV2: React.FC<IImageUpload> = (props) => {
             style={[styles.image, { height: Number(imageHeightWrtAspectRatio) || 350 }]}
             imageStyle={GenericStyles.br8}
             source={{
-              uri,
+              uri: fileUri,
             }}
             onError={(error) => handleError('Error in image rendering')}
           >
@@ -399,8 +418,5 @@ const styles = StyleSheet.create({
     borderRadius: 8,
   },
 });
-const enhance = withObservables([], () => ({
-  offlineImages: OfflineImageDAO.observeOfflineImage(),
-}));
 
-export default enhance(ImageUploadV2);
+export default ImageUploadV2;

src/reducer/feedbackImagesSlice.ts

@@ -3,6 +3,8 @@ import { isEmpty } from '../../RN-UI-LIB/src/utlis/common';
 
 export interface IDocument {
   fileUri?: string;
+  imageWidth?: number;
+  imageHeight?: number;
 }
 
 interface IDocumentDetail {
@@ -25,12 +27,14 @@ const feedbackImagesSlice = createSlice({
   initialState,
   reducers: {
     addIntermediateDocument: (state, action) => {
-      const { caseId, questionKey, fileUri } = action.payload;
+      const { caseId, questionKey, fileUri, imageWidth, imageHeight } = action.payload;
       if(!caseId) return;
       const doc = {
         questionKey,
         fileUri,
         originalImageDocumentReferenceId: '',
+        imageWidth,
+        imageHeight
       };
       if (state.intermediateDocsToBeUploaded?.[caseId]?.documents) {
         state.intermediateDocsToBeUploaded[caseId].documents[questionKey] = doc;