IO-3092 Add imgproxy uploads and update expo version.

components/upload-progress/upload-progress.component.jsx

@@ -1,8 +1,8 @@
-import { useApolloClient } from '@apollo/client';
-import * as FileSystem from 'expo-file-system';
-import * as MediaLibrary from 'expo-media-library';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useApolloClient } from "@apollo/client";
+import * as FileSystem from "expo-file-system";
+import * as MediaLibrary from "expo-media-library";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Alert,
@@ -11,23 +11,23 @@ import {
   StyleSheet,
   Text,
   View,
-} from 'react-native';
-import { Divider, ProgressBar } from 'react-native-paper';
-import Toast from 'react-native-toast-message';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import * as Sentry from '@sentry/react-native';
-import { logImEXEvent } from '../../firebase/firebase.analytics';
-import { GET_DOC_SIZE_TOTALS } from '../../graphql/documents.queries';
+} from "react-native";
+import { Divider, ProgressBar } from "react-native-paper";
+import Toast from "react-native-toast-message";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import * as Sentry from "@sentry/react-native";
+import { logImEXEvent } from "../../firebase/firebase.analytics";
+import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
 import {
   selectCurrentCameraJobId,
   selectDeleteAfterUpload,
-} from '../../redux/app/app.selectors';
+} from "../../redux/app/app.selectors";
 import {
   selectBodyshop,
   selectCurrentUser,
-} from '../../redux/user/user.selectors';
-import { formatBytes, handleUpload } from '../../util/document-upload.utility';
+} from "../../redux/user/user.selectors";
+import { formatBytes, handleUpload } from "../../util/document-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -110,10 +110,10 @@ export function UploadProgress({
     });
   }
   function handleOnError(error) {
-    logImEXEvent('imexmobile_upload_documents_error', { error });
+    logImEXEvent("imexmobile_upload_documents_error", { error });
     Toast.show({
-      type: 'error',
-      text1: 'Unable to upload document.',
+      type: "error",
+      text1: "Unable to upload document.",
       text2: error,
       autoHide: false,
     });
@@ -124,7 +124,7 @@ export function UploadProgress({
       return {
         ...progress,
         uploadInProgress: true,
-        statusText: 'Preparing upload...',
+        statusText: "Preparing upload...",
       };
     });
 
@@ -138,10 +138,10 @@ export function UploadProgress({
       return (await acc) + info.size;
     }, 0);
 
-    if (selectedCameraJobId !== 'temp') {
+    if (selectedCameraJobId !== "temp") {
       const queryData = await client.query({
         query: GET_DOC_SIZE_TOTALS,
-        fetchPolicy: 'network-only',
+        fetchPolicy: "network-only",
         variables: {
           jobId: selectedCameraJobId,
         },
@@ -161,8 +161,8 @@ export function UploadProgress({
           uploadInProgress: false,
         }));
         Alert.alert(
-          t('mediabrowser.labels.storageexceeded_title'),
-          t('mediabrowser.labels.storageexceeded')
+          t("mediabrowser.labels.storageexceeded_title"),
+          t("mediabrowser.labels.storageexceeded")
         );
         return;
       }
@@ -203,14 +203,13 @@ export function UploadProgress({
     //Everything is uploaded, delete the succesful ones.
     if (deleteAfterUpload) {
       try {
-        console.log('Trying to Delete', filesToDelete);
-        if (Platform.OS === 'android') {
+        if (Platform.OS === "android") {
           //Create a new asset with the first file to delete.
           // console.log('Trying new delete.');
           await MediaLibrary.getPermissionsAsync(false);
 
           const album = await MediaLibrary.createAlbumAsync(
-            'ImEX Mobile Deleted',
+            "ImEX Mobile Deleted",
             filesToDelete.pop(),
             false
           );
@@ -231,13 +230,13 @@ export function UploadProgress({
           await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id));
         }
       } catch (error) {
-        console.log('Unable to delete picture.', error);
+        console.log("Unable to delete picture.", error);
         Sentry.Native.captureException(error);
       }
     }
     filesToDelete = [];
     Toast.show({
-      type: 'success',
+      type: "success",
       text1: ` Upload completed.`,
       //
       //   text2: duration,
@@ -269,22 +268,23 @@ export function UploadProgress({
       },
       {
         bodyshop: bodyshop,
-        jobId: selectedCameraJobId !== 'temp' ? selectedCameraJobId : null,
+        jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
         uploaded_by: currentUser.email,
         photo: p,
-      }
+      },
+      bodyshop.localmediatoken === "imgproxy" ? "imgproxy" : "" //Choose which destination to use.
     );
   };
 
   return (
     <Modal
       visible={progress.uploadInProgress}
-      animationType='slide'
+      animationType="slide"
       transparent={true}
       onRequestClose={() => {
-        Alert.alert('Cancel?', 'Do you want to abort the upload?', [
+        Alert.alert("Cancel?", "Do you want to abort the upload?", [
           {
-            text: 'Yes',
+            text: "Yes",
             onPress: () => {
               setUploads(null);
               setProgress({
@@ -299,7 +299,7 @@ export function UploadProgress({
               });
             },
           },
-          { text: 'No' },
+          { text: "No" },
         ]);
       }}
     >
@@ -314,13 +314,13 @@ export function UploadProgress({
                 <ProgressBar
                   progress={progress.files[key].percent}
                   style={styles.progress}
-                  color={progress.files[key].percent === 1 ? 'green' : 'blue'}
+                  color={progress.files[key].percent === 1 ? "green" : "blue"}
                 />
                 <View
                   style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
                   }}
                 >
                   <Text>{`${formatBytes(
@@ -362,19 +362,19 @@ export function UploadProgress({
 }
 const styles = StyleSheet.create({
   modalContainer: {
-    display: 'flex',
+    display: "flex",
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   modal: {
     //flex: 1,
-    display: 'flex',
+    display: "flex",
     marginLeft: 20,
     marginRight: 20,
-    backgroundColor: 'white',
+    backgroundColor: "white",
     borderRadius: 20,
     padding: 18,
-    shadowColor: '#000',
+    shadowColor: "#000",
     shadowOffset: {
       width: 0,
       height: 2,
@@ -384,14 +384,14 @@ const styles = StyleSheet.create({
     elevation: 5,
   },
   centeredView: {
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     marginTop: 22,
   },
   progressItem: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
     marginBottom: 12,
     marginLeft: 12,
     marginRight: 12,