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;