fix: total file count update on add and delete (#681)

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,

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,

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) {

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,

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,

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,

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 => {

src/files-and-videos/videos-page/factories/mockApiResponses.jsx

@@ -83,7 +83,6 @@ export const initialState = {
       usageMetrics: [],
       transcript: [],
     },
-    totalCount: 0,
   },
   models: {
     videos: {