diff --git a/src/files-and-videos/files-page/factories/mockApiResponses.jsx b/src/files-and-videos/files-page/factories/mockApiResponses.jsx index 80249a02a..22a6e1852 100644 --- a/src/files-and-videos/files-page/factories/mockApiResponses.jsx +++ b/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 = () => ({ diff --git a/src/files-and-videos/generic/FileTable.jsx b/src/files-and-videos/generic/FileTable.jsx index 08347a8c4..f8adae7eb 100644 --- a/src/files-and-videos/generic/FileTable.jsx +++ b/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 = ({