fix: toggle behaviour for video & file view

- fix toggle behaviour for video and file view.
- Before:
  - The default view was card. And The videos and files both pages were sharing same variable & default view.
  - Whenever user selects list view on videos/files page and redirects to another page, the toggle/view shifts again to default(card) view whenever it returns to videos/files page.

- After:
  - The default view is list now. And The videos and files both pages can have different state & default view.
  - Whenever user selects card view on videos/files page and redirects to another page, the toggle/view remain same whatever user had selected before when it returns to videos/files page.

Note: Refreshing a page will use default(list) view.

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

@@ -40,6 +40,27 @@ export const initialState = {
       },
     },
   },
+  videos: {
+    videoIds: ['mOckID1'],
+    pageSettings: {},
+    loadingStatus: RequestStatus.SUCCESSFUL,
+    updatingStatus: '',
+    addingStatus: '',
+    deletingStatus: '',
+    usageStatus: '',
+    transcriptStatus: '',
+    errors: {
+      add: [],
+      delete: [],
+      thumbnail: [],
+      download: [],
+      usageMetrics: [],
+      transcript: [],
+      loading: '',
+    },
+    filesCurrentView: 'card',
+    videosCurrentView: 'list',
+  },
 };
 
 export const generateFetchAssetApiResponse = () => ({

src/files-and-videos/generic/FileTable.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -26,6 +27,10 @@ import {
 } from './table-components';
 import ApiStatusToast from './ApiStatusToast';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
+import {
+  setFilesCurrentViewState,
+  setVideosCurrentViewState,
+} from '../videos-page/data/slice';
 
 const FileTable = ({
   files,
@@ -44,7 +49,7 @@ const FileTable = ({
   // injected
   intl,
 }) => {
-  const defaultVal = 'card';
+  const dispatch = useDispatch();
   const pageCount = Math.ceil(files.length / 50);
   const columnSizes = {
     xs: 12,
@@ -53,7 +58,10 @@ const FileTable = ({
     lg: 3,
     xl: 2,
   };
-  const [currentView, setCurrentView] = useState(defaultVal);
+  const {
+    filesCurrentView,
+    videosCurrentView,
+  } = useSelector((state) => state.videos);
   const [isDeleteOpen, setDeleteOpen, setDeleteClose] = useToggle(false);
   const [isDownloadOpen, setDownloadOpen, setDownloadClose] = useToggle(false);
   const [isAssetInfoOpen, openAssetInfo, closeAssetinfo] = useToggle(false);
@@ -198,8 +206,15 @@ const FileTable = ({
         defaultColumnValues={{ Filter: TextFilter }}
         dataViewToggleOptions={{
           isDataViewToggleEnabled: true,
-          onDataViewToggle: val => setCurrentView(val),
-          defaultActiveStateValue: defaultVal,
+          onDataViewToggle: (val) => {
+            if (fileType === 'video') {
+              dispatch(setVideosCurrentViewState({ videosCurrentView: val }));
+            } else {
+              // There's only 2 fileTypes currently being used i.e. video or file
+              dispatch(setFilesCurrentViewState({ filesCurrentView: val }));
+            }
+          },
+          defaultActiveStateValue: (fileType === 'video' && videosCurrentView) || (fileType === 'file' && filesCurrentView),
           togglePlacement: 'left',
         }}
         initialState={initialState}
@@ -227,8 +242,8 @@ const FileTable = ({
           <div data-testid="files-data-table" className="bg-light-200">
             <DataTable.TableControlBar />
             <hr className="mb-5 border-light-700" />
-            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
-            { currentView === 'list' && <DataTable.Table /> }
+            { ((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 /> }
             <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
             <Footer />
           </div>
@@ -243,7 +258,7 @@ const FileTable = ({
           fileType={fileType}
         />
 
-        {fileType === 'files' && (
+        {fileType === 'file' && (
           <ApiStatusToast
             actionType={intl.formatMessage(messages.apiStatusAddingAction)}
             selectedRowCount={selectedRows.length}

src/files-and-videos/videos-page/data/slice.js

@@ -23,11 +23,19 @@ const slice = createSlice({
       transcript: [],
       loading: '',
     },
+    filesCurrentView: 'list',
+    videosCurrentView: '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;
     },
@@ -98,6 +106,8 @@ const slice = createSlice({
 
 export const {
   setVideoIds,
+  setVideosCurrentViewState,
+  setFilesCurrentViewState,
   setPageSettings,
   updateLoadingStatus,
   deleteVideoSuccess,

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

@@ -84,6 +84,8 @@ export const initialState = {
       transcript: [],
       loading: '',
     },
+    filesCurrentView: 'list',
+    videosCurrentView: 'card',
   },
   models: {
     videos: {