fix: video & file page toggles

- react redux state changes back to default whenever page refreshes.
 - On course authoring mfe, whenever we redirect from one page to another, it automatically refreshes the page which react app shouldn't do.
 - So, instead of managing video and file pages previously selected view in react redux, save & manage these values in localStorage. So that page refreshes doesn't bother end users.

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

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

@@ -58,8 +58,7 @@ export const initialState = {
       transcript: [],
       loading: '',
     },
-    filesCurrentView: 'card',
-    videosCurrentView: 'list',
+    defaultView: 'card',
   },
 };
 

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 = ({
           <div data-testid="files-data-table" className="bg-light-200">
             <DataTable.TableControlBar />
             <hr className="mb-5 border-light-700" />
-            { ((fileType === 'video' && videosCurrentView === 'card') || (fileType === 'file' && filesCurrentView === 'card')) && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
-            { ((fileType === 'video' && videosCurrentView === 'list') || (fileType === 'file' && filesCurrentView === 'list')) && <DataTable.Table /> }
+            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
+            { currentView === 'list' && <DataTable.Table /> }
             <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
             <Footer />
           </div>

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', () => {

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,

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