diff --git a/src/files-and-videos/files-page/FilesPage.test.jsx b/src/files-and-videos/files-page/FilesPage.test.jsx index 44f003f1e..80bb8f1f8 100644 --- a/src/files-and-videos/files-page/FilesPage.test.jsx +++ b/src/files-and-videos/files-page/FilesPage.test.jsx @@ -163,6 +163,7 @@ describe('FilesAndUploads', () => { store = initializeStore(initialState); axiosMock = new MockAdapter(getAuthenticatedHttpClient()); file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' }); + global.localStorage.clear(); }); afterEach(() => { diff --git a/src/files-and-videos/files-page/factories/mockApiResponses.jsx b/src/files-and-videos/files-page/factories/mockApiResponses.jsx index 22a6e1852..aa4cb63b9 100644 --- a/src/files-and-videos/files-page/factories/mockApiResponses.jsx +++ b/src/files-and-videos/files-page/factories/mockApiResponses.jsx @@ -58,8 +58,7 @@ export const initialState = { transcript: [], loading: '', }, - filesCurrentView: 'card', - videosCurrentView: 'list', + defaultView: 'card', }, }; diff --git a/src/files-and-videos/generic/FileTable.jsx b/src/files-and-videos/generic/FileTable.jsx index f8adae7eb..ded6884a8 100644 --- a/src/files-and-videos/generic/FileTable.jsx +++ b/src/files-and-videos/generic/FileTable.jsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import isEmpty from 'lodash/isEmpty'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; @@ -27,10 +27,6 @@ import { } from './table-components'; import ApiStatusToast from './ApiStatusToast'; import DeleteConfirmationModal from './DeleteConfirmationModal'; -import { - setFilesCurrentViewState, - setVideosCurrentViewState, -} from '../videos-page/data/slice'; const FileTable = ({ files, @@ -49,7 +45,6 @@ const FileTable = ({ // injected intl, }) => { - const dispatch = useDispatch(); const pageCount = Math.ceil(files.length / 50); const columnSizes = { xs: 12, @@ -58,10 +53,7 @@ const FileTable = ({ lg: 3, xl: 2, }; - const { - filesCurrentView, - videosCurrentView, - } = useSelector((state) => state.videos); + const { defaultView } = useSelector((state) => state.videos); const [isDeleteOpen, setDeleteOpen, setDeleteClose] = useToggle(false); const [isDownloadOpen, setDownloadOpen, setDownloadClose] = useToggle(false); const [isAssetInfoOpen, openAssetInfo, closeAssetinfo] = useToggle(false); @@ -85,6 +77,8 @@ const FileTable = ({ supportedFileFormats, fileType, } = data; + const defaultCurrentView = (fileType === 'video' && localStorage.getItem('videosCurrentView')) || (fileType === 'file' && localStorage.getItem('filesCurrentView')) || defaultView; + const [currentView, setCurrentView] = useState(defaultCurrentView); useEffect(() => { if (!isEmpty(selectedRows) && Object.keys(selectedRows[0]).length > 0) { @@ -208,13 +202,15 @@ const FileTable = ({ isDataViewToggleEnabled: true, onDataViewToggle: (val) => { if (fileType === 'video') { - dispatch(setVideosCurrentViewState({ videosCurrentView: val })); + localStorage.setItem('videosCurrentView', val); + setCurrentView(val); } else { // There's only 2 fileTypes currently being used i.e. video or file - dispatch(setFilesCurrentViewState({ filesCurrentView: val })); + localStorage.setItem('filesCurrentView', val); + setCurrentView(val); } }, - defaultActiveStateValue: (fileType === 'video' && videosCurrentView) || (fileType === 'file' && filesCurrentView), + defaultActiveStateValue: defaultCurrentView, togglePlacement: 'left', }} initialState={initialState} @@ -242,8 +238,8 @@ const FileTable = ({

- { ((fileType === 'video' && videosCurrentView === 'card') || (fileType === 'file' && filesCurrentView === 'card')) && } - { ((fileType === 'video' && videosCurrentView === 'list') || (fileType === 'file' && filesCurrentView === 'list')) && } + { currentView === 'card' && } + { currentView === 'list' && }
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx index fa73cd2e3..1a5746839 100644 --- a/src/files-and-videos/videos-page/VideosPage.test.jsx +++ b/src/files-and-videos/videos-page/VideosPage.test.jsx @@ -110,6 +110,7 @@ describe('Videos page', () => { axiosMock = new MockAdapter(getAuthenticatedHttpClient()); axiosUnauthenticateMock = new MockAdapter(getHttpClient()); file = new File(['(⌐□_□)'], 'download.mp4', { type: 'video/mp4' }); + global.localStorage.clear(); }); it('should return placeholder component', async () => { @@ -166,6 +167,7 @@ describe('Videos page', () => { axiosMock = new MockAdapter(getAuthenticatedHttpClient()); axiosUnauthenticateMock = new MockAdapter(getHttpClient()); file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' }); + global.localStorage.clear(); }); describe('table view', () => { diff --git a/src/files-and-videos/videos-page/data/slice.js b/src/files-and-videos/videos-page/data/slice.js index 15f06e5bd..138d51f8a 100644 --- a/src/files-and-videos/videos-page/data/slice.js +++ b/src/files-and-videos/videos-page/data/slice.js @@ -23,19 +23,12 @@ const slice = createSlice({ transcript: [], loading: '', }, - filesCurrentView: 'list', - videosCurrentView: 'list', + defaultView: 'list', }, reducers: { setVideoIds: (state, { payload }) => { state.videoIds = payload.videoIds; }, - setVideosCurrentViewState: (state, { payload }) => { - state.videosCurrentView = payload.videosCurrentView; - }, - setFilesCurrentViewState: (state, { payload }) => { - state.filesCurrentView = payload.filesCurrentView; - }, setPageSettings: (state, { payload }) => { state.pageSettings = payload; }, @@ -106,8 +99,6 @@ const slice = createSlice({ export const { setVideoIds, - setVideosCurrentViewState, - setFilesCurrentViewState, setPageSettings, updateLoadingStatus, deleteVideoSuccess, diff --git a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx index cbab41eb6..b6aae7f3d 100644 --- a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx +++ b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx @@ -84,8 +84,7 @@ export const initialState = { transcript: [], loading: '', }, - filesCurrentView: 'list', - videosCurrentView: 'card', + defaultView: 'card', }, models: { videos: {