From c60629a1d25603f2339be923b46fcdfb94a4b239 Mon Sep 17 00:00:00 2001 From: Nathaniel Rindlaub Date: Wed, 20 Dec 2023 17:26:24 -0800 Subject: [PATCH] Dispatch upload start, fail, success actions --- src/features/upload/BulkUploadForm.jsx | 5 +- src/features/upload/uploadSlice.js | 84 ++++++-------------------- 2 files changed, 20 insertions(+), 69 deletions(-) diff --git a/src/features/upload/BulkUploadForm.jsx b/src/features/upload/BulkUploadForm.jsx index 34423436..a55f1b6d 100644 --- 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 index e7ca6182..3871fe7e 100644 --- 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();