diff --git a/package.json b/package.json
index c0b74a84..800326e5 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"prepare": "husky install"
},
"dependencies": {
+ "@bam.tech/react-native-image-resizer": "3.0.5",
"@cobo/apm-rum-react-native": "^0.6.0",
"@elastic/apm-rum-core": "^5.17.0",
"@nozbe/watermelondb": "0.24.0",
diff --git a/src/ImageUploader.tsx b/src/ImageUploader.tsx
deleted file mode 100644
index 44702974..00000000
--- a/src/ImageUploader.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import axios from 'axios';
-import React from 'react';
-import { View, Button, Image } from 'react-native';
-import ImagePicker, { ImageLibraryOptions, launchImageLibrary } from 'react-native-image-picker';
-
-class ImageUploader extends React.Component {
- state = {
- image: null,
- };
-
- selectImage = () => {
- const options: ImageLibraryOptions = {
- mediaType: 'photo',
- quality: 1,
- };
-
- launchImageLibrary(options, (response) => {
- if (!response.didCancel) {
- console.log('response:', response);
- this.setState({ image: response.assets?.[0] });
- }
- });
- };
-
- uploadImage = async () => {
- const { image } = this.state;
-
- if (image) {
- const formData = new FormData();
- console.log('image:', image);
-
- // try {
- // const response = await fetch(image.uri);
- // const blobData = await response.blob();
-
- // formData.append('avatar', blobData, 'avatar.png');
-
- // const result = await axios.post('https://0ac3-115-111-223-26.in.ngrok.io/upload', formData, {
- // headers: {
- // 'Content-Type': 'multipart/form-data',
- // },
- // });
-
- // console.log('Request successful', result.data);
- // } catch (error) {
- // console.error('Request failed', error);
- // }
- console.log('image', image);
- formData.append('file[]', {
- uri: image.uri,
- name: 'image1.png',
- type: image.type,
- });
- formData.append('file[]', {
- uri: image.uri,
- name: 'image2.png',
- type: image.type,
- });
- formData.append('file[]', {
- uri: image.uri,
- name: 'image3.png',
- type: image.type,
- });
-
- const response = await axios.post(
- 'https://8ee6-115-111-223-26.in.ngrok.io/upload',
- formData,
- {
- headers: {
- 'Content-Type': 'multipart/form-data',
- },
- }
- );
- }
- };
-
- render() {
- const { image } = this.state;
-
- return (
-
-
- {image && }
-
-
- );
- }
-}
-
-export default ImageUploader;
diff --git a/src/action/caseApiActions.ts b/src/action/caseApiActions.ts
index 23af6e36..4c3ce5eb 100644
--- a/src/action/caseApiActions.ts
+++ b/src/action/caseApiActions.ts
@@ -12,9 +12,9 @@ import { GenericType } from '../common/GenericTypes';
import { addClickstreamEvent } from '../services/clickstreamEventService';
import { CLICKSTREAM_EVENT_NAMES } from '../common/Constants';
import { PageRouteEnum } from '../screens/auth/ProtectedRouter';
-import { IDocument, removeDocuments, setDocumentReferenceId } from '../reducer/allCasesSlice';
-import { _map } from '../../RN-UI-LIB/src/utlis/common';
+import { MILLISECONDS_IN_A_MINUTE, _map } from '../../RN-UI-LIB/src/utlis/common';
import { logError } from '../components/utlis/errorUtils';
+import { IDocument, removeDocumentByQuestionKey } from '../reducer/feedbackImagesSlice';
// TODO: Need to add respective interfaces instead of any
interface IUnifiedData {
@@ -145,58 +145,42 @@ export const getCaseUnifiedData =
});
};
-const uploadFeedbackImages =
- (caseId: string, payload: IUploadImagePayload[]) => (dispatch: AppDispatch) => {
- const url = getApiUrl(ApiKeys.UPLOAD_FEEDBACK_IMAGES);
- axiosInstance
- .post(url, payload)
- .then(() => {
- dispatch(removeDocuments({ caseId, docs: payload }));
- })
- .catch((err) => {
- // Add to retry queue
- });
- };
-
export const uploadImages =
- (caseId: string, documents: Record, interactionId: string) =>
+ (caseKey: string, documents: Record, interactionReferenceId: string) =>
(dispatch: AppDispatch) => {
_map(documents, (questionKey) => {
if (!documents) {
return;
}
const fileDoc = documents[questionKey];
- if (!interactionId || !fileDoc) {
+ if (!interactionReferenceId || !fileDoc) {
return;
}
const { fileUri } = fileDoc;
const formData = new FormData();
- formData.append('images', {
+ formData.append(
+ 'originalImageData',
+ JSON.stringify({
+ interactionReferenceId,
+ questionKey,
+ })
+ );
+ formData.append('image', {
uri: fileUri,
- name: `image_${caseId}_${new Date().getTime()}`,
+ name: `image_${interactionReferenceId}`,
type: 'image/jpeg',
} as any);
- const url = getApiUrl(ApiKeys.UPLOAD_IMAGES);
+ const url = getApiUrl(ApiKeys.UPLOAD_FEEDBACK_IMAGES);
axiosInstance
- .post(url, formData, {
+ .put(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
+ donotHandleError: true,
},
+ timeout: 5 * MILLISECONDS_IN_A_MINUTE,
})
.then((res) => {
- const originalImageDocumentReferenceId = res?.data?.referenceId;
- dispatch(
- setDocumentReferenceId({ caseId, questionKey, originalImageDocumentReferenceId })
- );
- dispatch(
- uploadFeedbackImages(caseId, [
- {
- interactionId,
- questionKey,
- originalImageDocumentReferenceId,
- },
- ])
- );
+ dispatch(removeDocumentByQuestionKey({ caseKey, questionKey }));
})
.catch((err) => {
logError(err as Error, 'Error uploading image to document service');
@@ -204,25 +188,8 @@ export const uploadImages =
});
};
-const getDocsWithAndWithoutReferenceId = (docs: Record) => {
- const docsWithReferenceId: IDocument[] = [];
- const docsWithoutReferenceId: IDocument[] = [];
- _map(docs, (questionKey: string) => {
- const docRefId = docs?.[questionKey]?.originalImageDocumentReferenceId;
- if (docRefId) {
- docsWithReferenceId.push(docs?.[questionKey]);
- } else {
- docsWithoutReferenceId.push(docs?.[questionKey]);
- }
- });
- return {
- docsWithReferenceId,
- docsWithoutReferenceId,
- };
-};
-
export const uploadUnsyncedImages =
- (caseId: string, docs: Record) => (dispatch: AppDispatch) => {
- const { docsWithReferenceId, docsWithoutReferenceId } = getDocsWithAndWithoutReferenceId(docs);
- // dispatch(uploadFeedbackImages(caseId, docs))
+ (caseId: string, interactionId: string, docs: Record) =>
+ (dispatch: AppDispatch) => {
+ dispatch(uploadImages(caseId, docs, interactionId));
};
diff --git a/src/action/dataActions.ts b/src/action/dataActions.ts
index 2bd6c782..ba1816ff 100644
--- a/src/action/dataActions.ts
+++ b/src/action/dataActions.ts
@@ -7,7 +7,6 @@ import {
resetTodoList,
setLoading,
setVisitPlansUpdating,
- updateUnsyncedCaseDetail,
updateSingleCase,
} from '../reducer/allCasesSlice';
import {
@@ -71,12 +70,10 @@ export const postPinnedList =
export const syncCaseDetail =
(
payload: any,
- updatedCaseDetail?: any,
callbacks?: {
onSuccessCB?: (data: any, actions?: any, interactionId?: string) => void;
onErrorCB?: (e: Error) => void;
- },
- nextActions?: any
+ }
) =>
(dispatch: AppDispatch) => {
const offlineImageIdList = getOfflineImageId(payload);
@@ -104,7 +101,7 @@ export const syncCaseDetail =
text1: ToastMessages.FEEDBACK_SUCCESSFUL,
});
if (callbacks?.onSuccessCB != null && typeof callbacks?.onSuccessCB === 'function') {
- callbacks?.onSuccessCB(payload.data.answers, nextActions, interactionId);
+ callbacks?.onSuccessCB(payload.data.answers, interactionId);
}
})
.catch((e) => {
@@ -113,14 +110,6 @@ export const syncCaseDetail =
type: 'error',
text1: ToastMessages.FEEDBACK_FAILED,
});
- if (updatedCaseDetail && !updatedCaseDetail.offlineCaseKey) {
- dispatch(
- updateUnsyncedCaseDetail({
- caseId: payload.data.caseReferenceId,
- updatedCaseDetail,
- })
- );
- }
}
if (callbacks?.onErrorCB != null && typeof callbacks?.onErrorCB === 'function') {
callbacks?.onErrorCB(e);
diff --git a/src/components/expandableImage/ExpandableImage.tsx b/src/components/expandableImage/ExpandableImage.tsx
index eb547e67..7abbd4c4 100644
--- a/src/components/expandableImage/ExpandableImage.tsx
+++ b/src/components/expandableImage/ExpandableImage.tsx
@@ -8,9 +8,10 @@ interface IExpandableImage {
imageSrc?: string;
close?: () => void;
title?: string;
+ fallbackImage?: string;
}
-const imageHtml = (imageSrc?: string) => `
+const imageHtml = (imageSrc?: string, fallbackImage?: string) => `
Image Viewer
@@ -24,19 +25,37 @@ const imageHtml = (imageSrc?: string) => `
justify-content: center;
align-items: center;
}
+ .parent {
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ .image1 {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: calc(100vw - 32px);
+ max-height: calc(100vh - 32px)
+ }
+ .image2 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: calc(100vw - 32px);
+ max-height: calc(100vh - 32px)
+ }
-
-
-
-
-
+
+
+