filter videos by season inside seasons reducer to keep state consistent

This commit is contained in:
NikolaBorislavovHristov 2019-11-14 13:23:50 +02:00
parent f32173797b
commit efa3586f05
2 changed files with 10 additions and 8 deletions

View file

@ -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 (
<div className={classnames(className, styles['videos-list-container'])}>
{

View file

@ -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;