diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js index 9f2394d3e..c2ba033fe 100644 --- a/src/routes/Detail/VideosList/VideosList.js +++ b/src/routes/Detail/VideosList/VideosList.js @@ -13,12 +13,7 @@ const VideosList = ({ className, metaGroup }) => { : []; }, [metaGroup]); - const [seasons, selectedSeason, selectSeason] = useSelectableSeasons(videos); - const videosForSeason = React.useMemo(() => { - return videos.filter((video) => { - return selectedSeason === null || video.season === selectedSeason; - }); - }, [videos, selectedSeason]); + const [seasons, selectedSeason, videosForSeason, selectSeason] = useSelectableSeasons(videos); return (
{ diff --git a/src/routes/Detail/VideosList/useSelectableSeasons.js b/src/routes/Detail/VideosList/useSelectableSeasons.js index 04815b4fa..3a407836d 100644 --- a/src/routes/Detail/VideosList/useSelectableSeasons.js +++ b/src/routes/Detail/VideosList/useSelectableSeasons.js @@ -20,6 +20,7 @@ const reducer = (state, action) => { null; return { ...state, + videos: action.videos, seasons, selectedSeason }; @@ -42,6 +43,7 @@ const reducer = (state, action) => { const initializer = (videos) => { const initialState = { + videos: [], seasons: [], selectedSeason: null }; @@ -54,7 +56,7 @@ const initializer = (videos) => { }; const useSelectableSeasons = (videos) => { - const [{ seasons, selectedSeason }, dispatch] = React.useReducer( + const [state, dispatch] = React.useReducer( reducer, videos, initializer @@ -65,13 +67,18 @@ const useSelectableSeasons = (videos) => { season }); }, []); + const videosForSeason = React.useMemo(() => { + return state.videos.filter((video) => { + return video.season === state.selectedSeason; + }); + }, [state.videos, state.selectedSeason]); React.useEffect(() => { dispatch({ type: 'videos-changed', videos }); }, [videos]); - return [seasons, selectedSeason, selectSeason]; + return [state.seasons, state.selectedSeason, videosForSeason, selectSeason]; }; module.exports = useSelectableSeasons;