1.3.6-3 Test Build - Refactor local uploads to go in bulk.

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

@@ -1,18 +1,16 @@
-import { useApolloClient } from "@apollo/client";
 import * as MediaLibrary from "expo-media-library";
-import _ from "lodash";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Alert,
   Modal,
-  ScrollView,
   StyleSheet,
   Text,
   View,
 } from "react-native";
 import { ProgressBar } from "react-native-paper";
+import Toast from "react-native-toast-message";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
@@ -26,7 +24,6 @@ import {
 } from "../../redux/user/user.selectors";
 import { formatBytes } from "../../util/document-upload.utility";
 import { handleLocalUpload } from "../../util/local-document-upload.utility";
-import Toast from "react-native-toast-message";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -43,78 +40,54 @@ export function UploadProgress({
   selectedCameraJobId,
   deleteAfterUpload,
   uploads,
+  setUploads,
   forceRerender,
 }) {
   const [progress, setProgress] = useState({
     loading: false,
     uploadInProgress: false,
     speed: 0,
-    files: {}, //uri is the key, value is progress
   });
 
   let filesToDelete = [];
-  const client = useApolloClient();
 
   const { t } = useTranslation();
 
   useEffect(() => {
     //Set the state of uploads to do.
-
-    if (uploads) onDone(uploads);
+    if (uploads) {
+      beginUploads(uploads);
+      setUploads(null);
+    }
   }, [uploads]);
 
-  //if (!uploads) return null;
-
-  function handleOnSuccess(id, asset, { duration }) {
+  function handleOnSuccess({ duration }) {
     //If it's not in production, show a toast with the time.
     Toast.show({
       type: "success",
-      text1: `${duration} - Upload completed for ${asset.filename}.`,
+      text1: ` Upload completed in ${duration}.`,
       //
       //   text2: duration,
     });
 
     logImEXEvent("imexmobile_successful_upload");
-    filesToDelete.push(asset);
+    setProgress({
+      speed: 0,
+      percent: 1,
+      uploadInProgress: false,
+    });
+  }
+
+  function handleOnProgress({ percent, loaded }) {
     setProgress((progress) => ({
       ...progress,
-      action: t("mediabrowser.labels.converting"),
-      files: {
-        ...progress.files,
-        [id]: {
-          ...progress.files[id],
-          percent: 1,
-          action: t("mediabrowser.labels.converting"),
-        },
-      },
-      // });
+      speed: loaded - progress.loaded,
+      loaded: loaded,
+      percent,
     }));
   }
 
-  function handleOnProgress(uri, percent, loaded) {
-    setProgress((progress) => ({
-      ...progress,
-      // speed: loaded - progress.files[uri].loaded,
-      action:
-        percent === 1
-          ? t("mediabrowser.labels.converting")
-          : t("mediabrowser.labels.uploading"),
-      files: {
-        ...progress.files,
-        [uri]: {
-          ...progress.files[uri],
-          percent,
-          speed: loaded - progress.files[uri].loaded,
-          action:
-            percent === 1
-              ? t("mediabrowser.labels.converting")
-              : t("mediabrowser.labels.uploading"),
-          loaded: loaded,
-        },
-      },
-    }));
-  }
-  function handleOnError(id, error) {
+  function handleOnError({ assetid, error }) {
     logImEXEvent("imexmobile_upload_documents_error");
     Toast.show({
       type: "error",
@@ -122,52 +95,27 @@ export function UploadProgress({
       text2: (error && error.message) || JSON.stringify(error),
       autoHide: false,
     });
-    setProgress((progress) => ({
-      ...progress,
-      action: t("mediabrowser.labels.converting"),
-      files: {
-        ...progress.files,
-        [id]: {
-          ...progress.files[id],
-          percent: 1,
-          action: t("mediabrowser.labels.converting"),
-        },
-      },
-      // });
-    }));
   }
 
-  const onDone = async (data) => {
+  const beginUploads = async (data) => {
     //Validate to make sure the totals for the file sizes do not exceed the total on the job.
     setProgress({
-      files: _.keyBy(data, "id"),
-      loading: true,
+      percent: 0,
+      loaded: 0,
       uploadInProgress: true,
     });
 
-    //Sequentially await the proms.
-
-    // for (const file of data) {
-    //   await CreateUploadProm(file);
-    // }
-
-    for (var i = 0; i < data.length + 4; i = i + 4) {
-      let proms = [];
-      if (data[i]) {
-        proms.push(CreateUploadProm(data[i]));
-      }
-      if (data[i + 1]) {
-        proms.push(CreateUploadProm(data[i + 1]));
-      }
-      if (data[i + 2]) {
-        proms.push(CreateUploadProm(data[i + 2]));
-      }
-      if (data[i + 3]) {
-        proms.push(CreateUploadProm(data[i + 3]));
-      }
-
-      await Promise.all(proms);
-    }
+    await handleLocalUpload({
+      files: data,
+      onError: ({ assetid, error }) => handleOnError({ assetid, error }),
+      onProgress: ({ percent, loaded }) =>
+        handleOnProgress({ percent, loaded }),
+      onSuccess: ({ duration }) => handleOnSuccess({ duration }),
+      context: {
+        jobid:
+          selectedCameraJobId !== "temp" ? selectedCameraJobId : "temporary",
+      },
+    });
 
     if (deleteAfterUpload) {
       try {
@@ -190,91 +138,55 @@ export function UploadProgress({
     setProgress({
       loading: false,
       speed: 0,
-      action: null,
-
       uploadInProgress: false,
-      files: {}, //uri is the key, value is progress
     });
 
     forceRerender();
   };
 
-  const CreateUploadProm = async (p) => {
-    let filename;
-    filename = p.filename || p.uri.split("/").pop();
-
-    await handleLocalUpload({
-      ev: {
-        filename,
-        mediaId: p.id,
-        onError: (error) => handleOnError(p.id, error),
-        onProgress: ({ percent, loaded }) =>
-          handleOnProgress(p.id, percent, loaded),
-        onSuccess: ({ duration }) => handleOnSuccess(p.id, p, { duration }),
-        file: p,
-      },
-      context: {
-        bodyshop: bodyshop,
-        jobid:
-          selectedCameraJobId !== "temp" ? selectedCameraJobId : "temporary",
-      },
-    });
-
-    //Set the state to mark that it's done.
-    setProgress((progress) => ({
-      ...progress,
-      action: null,
-      speed: 0,
-      files: {
-        ...progress.files,
-        [p.id]: {
-          ...progress.files[p.id],
-          action: null,
-        },
-      },
-    }));
-  };
-
   return (
     <Modal
       visible={progress.uploadInProgress}
       animationType="slide"
       transparent={true}
-      onRequestClose={() => {}}
+      onRequestClose={() => {
+        Alert.alert("Cancel?", "Do you want to abort the upload?", [
+          {
+            text: "Yes",
+            onPress: () => {
+              setUploads(null);
+              setProgress(null);
+            },
+          },
+          { text: "No" },
+        ]);
+      }}
     >
-      <View style={styles.modal}>
-        {progress.loading && <ActivityIndicator />}
-
-        <ScrollView contentContainerStyle={styles.centeredView}>
-          {Object.keys(progress.files).map((key) => (
-            <View key={progress.files[key].id} style={styles.progressItem}>
-              <Text style={styles.progressText}>
-                {progress.files[key].filename}
-              </Text>
-              <View style={styles.progressBarContainer}>
-                <ProgressBar
-                  progress={progress.files[key].percent}
-                  style={styles.progress}
-                  color={progress.files[key].percent === 1 ? "green" : "blue"}
-                />
-                {progress.files[key].speed !== 0 &&
-                progress.files[key].speed &&
-                !isNaN(progress.files[key].speed) ? (
-                  <Text>{`${formatBytes(progress.files[key].speed)}/sec`}</Text>
-                ) : null}
-              </View>
-            </View>
-          ))}
-        </ScrollView>
+      <View style={styles.modalContainer}>
+        <View style={styles.modal}>
+          <ActivityIndicator style={{ alignSelf: "center", marginTop: 16 }} />
+          <ProgressBar
+            progress={progress.percent}
+            style={{ alignSelf: "center", marginTop: 16 }}
+            color={progress.percent === 1 ? "green" : "blue"}
+          />
+          <Text style={{ alignSelf: "center", marginTop: 16 }}>{`${formatBytes(
+            progress.speed
+          )}/sec`}</Text>
+        </View>
       </View>
     </Modal>
   );
 }
 const styles = StyleSheet.create({
-  modal: {
+  modalContainer: {
+    display: "flex",
     flex: 1,
-    marginTop: 80,
-    marginBottom: 60,
+    justifyContent: "center",
+  },
+  modal: {
+    // flex: 1,
+    display: "flex",
     marginLeft: 20,
     marginRight: 20,
     backgroundColor: "white",
@@ -289,26 +201,4 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5,
   },
-  centeredView: {
-    flex: 1,
-    // justifyContent: "center",
-    // alignItems: "center",
-    marginTop: 22,
-  },
-  progressItem: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 12,
-    marginLeft: 12,
-    marginRight: 12,
-  },
-  progressText: {
-    flex: 1,
-  },
-  progressBarContainer: {
-    flex: 3,
-    marginLeft: 12,
-    marginRight: 12,
-  },
 });

components/screen-media-browser/screen-media-browser.component.jsx

@@ -155,9 +155,17 @@ export function ImageBrowserScreen({ bodyshop, selectedCameraJobId }) {
         />
       )}
       {bodyshop.uselocalmediaserver ? (
-        <LocalUploadProgress uploads={uploads} forceRerender={forceRerender} />
+        <LocalUploadProgress
+          uploads={uploads}
+          setUploads={setUploads}
+          forceRerender={forceRerender}
+        />
       ) : (
-        <UploadProgress uploads={uploads} forceRerender={forceRerender} />
+        <UploadProgress
+          uploads={uploads}
+          setUploads={setUploads}
+          forceRerender={forceRerender}
+        />
       )}
     </View>
   );