From 2fbb490cbb4975d36fb8bcb8aa78cef370b6061e Mon Sep 17 00:00:00 2001 From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com> Date: Mon, 13 Nov 2023 14:46:31 -0500 Subject: [PATCH] fix: total file count update on add and delete (#681) --- src/files-and-videos/files-page/FilesPage.jsx | 6 ++---- src/files-and-videos/files-page/data/slice.js | 5 ----- src/files-and-videos/files-page/data/thunks.js | 8 ++------ src/files-and-videos/generic/FileTable.jsx | 7 +++---- src/files-and-videos/videos-page/VideosPage.jsx | 4 +--- src/files-and-videos/videos-page/data/slice.js | 5 ----- src/files-and-videos/videos-page/data/thunks.js | 7 +------ .../videos-page/factories/mockApiResponses.jsx | 1 - 8 files changed, 9 insertions(+), 34 deletions(-) diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx index 1a9f518ec..3439b8cd3 100644 --- a/src/files-and-videos/files-page/FilesPage.jsx +++ b/src/files-and-videos/files-page/FilesPage.jsx @@ -45,7 +45,6 @@ const FilesPage = ({ }, [courseId]); const { - totalCount, assetIds, loadingStatus, addingStatus: addAssetStatus, @@ -56,8 +55,8 @@ const FilesPage = ({ } = useSelector(state => state.assets); const handleErrorReset = (error) => dispatch(resetErrors(error)); - const handleAddFile = (file) => dispatch(addAssetFile(courseId, file, totalCount)); - const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id, totalCount)); + const handleAddFile = (file) => dispatch(addAssetFile(courseId, file)); + const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id)); const handleDownloadFile = (selectedRows) => dispatch(fetchAssetDownload({ selectedRows, courseId })); const handleLockFile = (fileId, locked) => { handleErrorReset({ errorType: 'lock' }); @@ -76,7 +75,6 @@ const FilesPage = ({ const assets = useModels('assets', assetIds); const data = { - totalCount, fileIds: assetIds, loadingStatus, usagePathStatus, diff --git a/src/files-and-videos/files-page/data/slice.js b/src/files-and-videos/files-page/data/slice.js index 5a4917953..080f0ea02 100644 --- a/src/files-and-videos/files-page/data/slice.js +++ b/src/files-and-videos/files-page/data/slice.js @@ -19,15 +19,11 @@ const slice = createSlice({ download: [], usageMetrics: [], }, - totalCount: 0, }, reducers: { setAssetIds: (state, { payload }) => { state.assetIds = payload.assetIds; }, - setTotalCount: (state, { payload }) => { - state.totalCount = payload.totalCount; - }, updateLoadingStatus: (state, { payload }) => { state.loadingStatus = payload.status; }, @@ -73,7 +69,6 @@ const slice = createSlice({ export const { setAssetIds, - setTotalCount, updateLoadingStatus, deleteAssetSuccess, addAssetSuccess, diff --git a/src/files-and-videos/files-page/data/thunks.js b/src/files-and-videos/files-page/data/thunks.js index f7e1d6df2..490520431 100644 --- a/src/files-and-videos/files-page/data/thunks.js +++ b/src/files-and-videos/files-page/data/thunks.js @@ -16,7 +16,6 @@ import { } from './api'; import { setAssetIds, - setTotalCount, updateLoadingStatus, deleteAssetSuccess, addAssetSuccess, @@ -39,7 +38,6 @@ export function fetchAssets(courseId) { dispatch(setAssetIds({ assetIds: assets.map(asset => asset.id), })); - dispatch(setTotalCount({ totalCount })); dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL })); } catch (error) { if (error.response && error.response.status === 403) { @@ -59,7 +57,7 @@ export function updateAssetOrder(courseId, assetIds) { }; } -export function deleteAssetFile(courseId, id, totalCount) { +export function deleteAssetFile(courseId, id) { return async (dispatch) => { dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.IN_PROGRESS })); @@ -67,7 +65,6 @@ export function deleteAssetFile(courseId, id, totalCount) { await deleteAsset(courseId, id); dispatch(deleteAssetSuccess({ assetId: id })); dispatch(removeModel({ modelType: 'assets', id })); - dispatch(setTotalCount({ totalCount: totalCount - 1 })); dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.SUCCESSFUL })); } catch (error) { dispatch(updateErrors({ error: 'delete', message: `Failed to delete file id ${id}.` })); @@ -76,7 +73,7 @@ export function deleteAssetFile(courseId, id, totalCount) { }; } -export function addAssetFile(courseId, file, totalCount) { +export function addAssetFile(courseId, file) { return async (dispatch) => { dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.IN_PROGRESS })); @@ -90,7 +87,6 @@ export function addAssetFile(courseId, file, totalCount) { dispatch(addAssetSuccess({ assetId: asset.id, })); - dispatch(setTotalCount({ totalCount: totalCount + 1 })); dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.SUCCESSFUL })); } catch (error) { if (error.response && error.response.status === 413) { diff --git a/src/files-and-videos/generic/FileTable.jsx b/src/files-and-videos/generic/FileTable.jsx index 3011d0f69..065df94f6 100644 --- a/src/files-and-videos/generic/FileTable.jsx +++ b/src/files-and-videos/generic/FileTable.jsx @@ -45,6 +45,7 @@ const FileTable = ({ intl, }) => { const defaultVal = 'card'; + const pageCount = Math.ceil(files.length / 50); const columnSizes = { xs: 12, sm: 6, @@ -59,7 +60,6 @@ const FileTable = ({ const [isDeleteConfirmationOpen, openDeleteConfirmation, closeDeleteConfirmation] = useToggle(false); const { - totalCount, loadingStatus, usagePathStatus, usageErrorMessages, @@ -191,8 +191,8 @@ const FileTable = ({ tableActions={headerActions} bulkActions={headerActions} columns={tableColumns} - itemCount={totalCount} - pageCount={Math.ceil(totalCount / 50)} + itemCount={files.length} + pageCount={pageCount} data={files} FilterStatusComponent={FilterStatus} > @@ -269,7 +269,6 @@ FileTable.propTypes = { courseId: PropTypes.string.isRequired, files: PropTypes.arrayOf(PropTypes.shape({})), data: PropTypes.shape({ - totalCount: PropTypes.number.isRequired, fileIds: PropTypes.arrayOf(PropTypes.string).isRequired, loadingStatus: PropTypes.string.isRequired, usagePathStatus: PropTypes.string.isRequired, diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx index 0706c6aa2..a1774f9c6 100644 --- a/src/files-and-videos/videos-page/VideosPage.jsx +++ b/src/files-and-videos/videos-page/VideosPage.jsx @@ -56,7 +56,6 @@ const VideosPage = ({ }, [courseId]); const { - totalCount, videoIds, loadingStatus, transcriptStatus, @@ -79,7 +78,7 @@ const VideosPage = ({ const supportedFileFormats = { 'video/*': videoSupportedFileFormats || FILES_AND_UPLOAD_TYPE_FILTERS.video }; const handleAddFile = (file) => dispatch(addVideoFile(courseId, file)); - const handleDeleteFile = (id) => dispatch(deleteVideoFile(courseId, id, totalCount)); + const handleDeleteFile = (id) => dispatch(deleteVideoFile(courseId, id)); const handleDownloadFile = (selectedRows) => dispatch(fetchVideoDownload({ selectedRows })); const handleUsagePaths = (video) => dispatch(getUsagePaths({ video, courseId })); const handleErrorReset = (error) => dispatch(resetErrors(error)); @@ -99,7 +98,6 @@ const VideosPage = ({ const data = { supportedFileFormats, encodingsDownloadUrl, - totalCount, fileIds: videoIds, loadingStatus, usagePathStatus, diff --git a/src/files-and-videos/videos-page/data/slice.js b/src/files-and-videos/videos-page/data/slice.js index 3e766292f..6a6410fcd 100644 --- a/src/files-and-videos/videos-page/data/slice.js +++ b/src/files-and-videos/videos-page/data/slice.js @@ -22,7 +22,6 @@ const slice = createSlice({ usageMetrics: [], transcript: [], }, - totalCount: 0, }, reducers: { setVideoIds: (state, { payload }) => { @@ -31,9 +30,6 @@ const slice = createSlice({ setPageSettings: (state, { payload }) => { state.pageSettings = payload; }, - setTotalCount: (state, { payload }) => { - state.totalCount = payload.totalCount; - }, updateLoadingStatus: (state, { payload }) => { state.loadingStatus = payload.status; }, @@ -93,7 +89,6 @@ const slice = createSlice({ export const { setVideoIds, setPageSettings, - setTotalCount, updateLoadingStatus, deleteVideoSuccess, addVideoSuccess, diff --git a/src/files-and-videos/videos-page/data/thunks.js b/src/files-and-videos/videos-page/data/thunks.js index ef515686e..42547a471 100644 --- a/src/files-and-videos/videos-page/data/thunks.js +++ b/src/files-and-videos/videos-page/data/thunks.js @@ -26,7 +26,6 @@ import { import { setVideoIds, setPageSettings, - setTotalCount, updateLoadingStatus, deleteVideoSuccess, addVideoSuccess, @@ -51,7 +50,6 @@ export function fetchVideos(courseId) { videoIds: parsedVideos.map(video => video.id), })); dispatch(setPageSettings({ ...data })); - dispatch(setTotalCount({ totalCount: parsedVideos.length })); dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL })); } catch (error) { if (error.response && error.response.status === 403) { @@ -75,7 +73,7 @@ export function updateVideoOrder(courseId, videoIds) { }; } -export function deleteVideoFile(courseId, id, totalCount) { +export function deleteVideoFile(courseId, id) { return async (dispatch) => { dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.IN_PROGRESS })); @@ -83,8 +81,6 @@ export function deleteVideoFile(courseId, id, totalCount) { await deleteVideo(courseId, id); dispatch(deleteVideoSuccess({ videoId: id })); dispatch(removeModel({ modelType: 'videos', id })); - dispatch(setTotalCount({ totalCount: totalCount - 1 })); - dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.SUCCESSFUL })); } catch (error) { dispatch(updateErrors({ error: 'delete', message: `Failed to delete file id ${id}.` })); @@ -115,7 +111,6 @@ export function addVideoFile(courseId, file) { dispatch(addVideoSuccess({ videoId: edxVideoId, })); - dispatch(setTotalCount({ totalCount: parsedVideos.length })); dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.SUCCESSFUL })); if (!isEmpty(errors)) { errors.forEach(error => { diff --git a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx index 8a5085b70..9bda11b0f 100644 --- a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx +++ b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx @@ -83,7 +83,6 @@ export const initialState = { usageMetrics: [], transcript: [], }, - totalCount: 0, }, models: { videos: {