Dispatch upload start, fail, success actions

tnc-ca-geo · Dec 21, 2023 · c60629a · c60629a
1 parent d1eab23
commit c60629a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 69 deletions.
diff --git a/src/features/upload/BulkUploadForm.jsx b/src/features/upload/BulkUploadForm.jsx
@@ -11,7 +11,7 @@ import * as Progress from '@radix-ui/react-progress';
 import { selectSelectedProject } from '../projects/projectsSlice';
 import { Cross2Icon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { green, red, mauve } from '@radix-ui/colors';
-import { uploadFile, initMultipartUpload, selectUploadsLoading, uploadProgress } from './uploadSlice';
+import { uploadFile, uploadMultipartFile, selectUploadsLoading, uploadProgress } from './uploadSlice';
 import { styled } from '@stitches/react';
 import InfoIcon from '../../components/InfoIcon';
 import BulkUploadTable from './BulkUploadTable.jsx';
@@ -95,7 +95,7 @@ const BulkUploadForm = ({ handleClose }) => {
     if ((fileSize / (1024 * 1024)) > 100) {
       // file is over 100 MB limit; initiate multi-part upload
       console.log('file is over 100 MB');
-      dispatch(initMultipartUpload({
+      dispatch(uploadMultipartFile({
         file: values.zipFile, 
         overrideSerial: values.overrideSerial
       }));
@@ -132,7 +132,6 @@ const BulkUploadForm = ({ handleClose }) => {
   useEffect(() => {
     if (percentUploaded === 100) {
       console.log('upload complete');
-      dispatch(uploadProgress({ progress: 0 }));
       reset();
     }
   }, [percentUploaded, reset, dispatch]);

diff --git a/src/features/upload/uploadSlice.js b/src/features/upload/uploadSlice.js
@@ -11,17 +11,13 @@ const initialState = {
     hasNext: false,
     hasPrevious: false,
   },
-  multipart: {
-    batch: null,
-    urls: [],
-    progressCache: {}
-  },
   loadingStates: {
     upload: {
       isLoading: false,
       operation: null,
       errors: null,
       progress: 0,
+      partsProgress: {},
     },
     batchStates: {
       isLoading: false,
@@ -52,36 +48,26 @@ export const uploadSlice = createSlice({
     uploadStart: (state) => {
       const ls = {
         isLoading: true,
-        operation: 'uploading',
-        errors: null,
-        progress: 0,
+        operation: 'uploading'
       };
       state.loadingStates.upload = {
-        ...state.loadingStates.upload,
+        ...initialState.loadingStates.upload,
         ...ls
       };
     },
 
     uploadFailure: (state, { payload }) => {
-      const ls = {
-        isLoading: false,
-        operation: null,
-        errors: payload,
-      }
+      const ls = { errors: payload };
       state.loadingStates.upload = {
-        ...state.loadingStates.upload,
+        ...initialState.loadingStates.upload,
         ...ls
       };
     },
 
     uploadSuccess: (state) => {
-      const ls = {
-        isLoading: false,
-        operation: null,
-      }
       state.loadingStates.upload = {
         ...state.loadingStates.upload,
-        ...ls
+        ...initialState.loadingStates.upload
       };
     },
 
@@ -93,45 +79,14 @@ export const uploadSlice = createSlice({
       };
     },
 
-    initMultipartUploadStart: (state, { payload }) => {
-      console.log('initMultipartUploadStart - payload: ', payload);
-      const ls = {
-        isLoading: true,
-        operation: 'uploading',
-        errors: null,
-        progress: 0,
-      };
-      state.loadingStates.upload = {
-        ...state.loadingStates.upload,
-        ...ls
-      };
-    },
-
-    initMultipartUploadSuccess: (state, { payload }) => {
-      console.log('initMultipartUploadSuccess - payload: ', payload);
-      state.multipart.batch = payload.batch;
-      state.multipart.urls = payload.urls;
-    },
-
-    initMultipartUploadFailure: (state, { payload }) => {
-      const ls = {
-        isLoading: false,
-        operation: null,
-        errors: payload,
-      }
-      state.loadingStates.upload = {
-        ...state.loadingStates.upload,
-        ...ls
-      };
-    },
-
     multipartUploadProgress: (state, { payload }) => {
       const { partNumber, loaded, fileSize } = payload;
-      state.multipart.progressCache[partNumber] = loaded;
+      const { partsProgress } = state.loadingStates.upload;
+      partsProgress[partNumber] = loaded;
 
-      const bytesUploaded = Object.keys(state.multipart.progressCache)
+      const bytesUploaded = Object.keys(partsProgress)
         .map(Number)
-        .reduce((memo, id) => (memo += state.multipart.progressCache[id]), 0);
+        .reduce((memo, id) => (memo += partsProgress[id]), 0);
       const sent = Math.min(bytesUploaded, fileSize);
 
       const ls = { progress: sent / fileSize };
@@ -300,9 +255,6 @@ export const {
   uploadSuccess,
   uploadFailure,
   uploadProgress,
-  initMultipartUploadStart,
-  initMultipartUploadSuccess,
-  initMultipartUploadFailure,
   multipartUploadProgress,
   fetchBatchesStart,
   fetchBatchesSuccess,
@@ -320,14 +272,14 @@ export const {
   filterBatches
 } = uploadSlice.actions;
 
-// init multipart upload thunk
-export const initMultipartUpload = (payload) => async (dispatch, getState) => {
+// multipart upload thunk (for zip files > 100 MB)
+export const uploadMultipartFile = (payload) => async (dispatch, getState) => {
   try {
     const currentUser = await Auth.currentAuthenticatedUser();
     const token = currentUser.getSignInUserSession().getIdToken().getJwtToken();
     if (token) {
       const { file, overrideSerial } = payload;
-      dispatch(initMultipartUploadStart());
+      dispatch(uploadStart());
       const projects = getState().projects.projects;
       const selectedProj = projects.find((proj) => proj.selected);
 
@@ -359,8 +311,6 @@ export const initMultipartUpload = (payload) => async (dispatch, getState) => {
         });
       }
 
-      // dispatch(initMultipartUploadSuccess({ ...initRes.createUpload }));
-
       // iterate over presigned urls, reading and chunking file as we go,
       // and creating upload promises for each one
       const uploadedParts = [];
@@ -402,7 +352,7 @@ export const initMultipartUpload = (payload) => async (dispatch, getState) => {
 
       await Promise.all(activeUploads);
 
-      // close mulitpart upload
+      // close multipart upload
       uploadedParts.sort((a, b) => a.PartNumber - b.PartNumber);
       const closeRes = await call({
         request: 'closeUpload',
@@ -415,14 +365,16 @@ export const initMultipartUpload = (payload) => async (dispatch, getState) => {
       });
       console.log('closeRes: ', closeRes);
 
+      dispatch(uploadSuccess());
+      dispatch(fetchBatches());
     }
   } catch (err) {
     console.log('err: ', err)
-    dispatch(initMultipartUploadFailure(err))
+    dispatch(uploadFailure(err))
   }
 };
 
-// single-threaded upload thunk
+// single-threaded upload thunk (for zip files < 100 MB)
 export const uploadFile = (payload) => async (dispatch, getState) => {
   try {
     const currentUser = await Auth.currentAuthenticatedUser();