From efa3586f059f1f8bf06a7a800f027b35ddfd11f4 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 14 Nov 2019 13:23:50 +0200
Subject: [PATCH] filter videos by season inside seasons reducer to keep state
 consistent

---
 src/routes/Detail/VideosList/VideosList.js           |  7 +------
 src/routes/Detail/VideosList/useSelectableSeasons.js | 11 +++++++++--
 2 files changed, 10 insertions(+), 8 deletions(-)

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