From ea8a8e5285ebd7d3abe1fbd5d8cd79d871f82f5b Mon Sep 17 00:00:00 2001 From: Muhammad Faraz Maqsood Date: Mon, 14 Apr 2025 15:32:20 +0500 Subject: [PATCH] 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. --- .../files-page/factories/mockApiResponses.jsx | 21 +++++++++++++ src/files-and-videos/generic/FileTable.jsx | 31 ++++++++++++++----- .../videos-page/data/slice.js | 10 ++++++ .../factories/mockApiResponses.jsx | 2 ++ 4 files changed, 56 insertions(+), 8 deletions(-) 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 = ({
- { currentView === 'card' && } - { currentView === 'list' && } + { ((fileType === 'video' && videosCurrentView === 'card') || (fileType === 'file' && filesCurrentView === 'card')) && } + { ((fileType === 'video' && videosCurrentView === 'list') || (fileType === 'file' && filesCurrentView === 'list')) && }
@@ -243,7 +258,7 @@ const FileTable = ({ fileType={fileType} /> - {fileType === 'files' && ( + {fileType === 'file' && ( { 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, diff --git a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx index 2fda8438d..cbab41eb6 100644 --- a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx +++ b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx @@ -84,6 +84,8 @@ export const initialState = { transcript: [], loading: '', }, + filesCurrentView: 'list', + videosCurrentView: 'card', }, models: { videos: {