From a851df5041b0dd48cb13a2f64bc7fef31e6e6b72 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 12 Nov 2019 17:54:19 +0200
Subject: [PATCH] useSeasons refactored to use reducer to keep state consistent

---
 src/routes/Detail/VideosList/useSeasons.js | 72 ++++++++++++++++++----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/routes/Detail/VideosList/useSeasons.js b/src/routes/Detail/VideosList/useSeasons.js
index acb39f1f3..d4bfc6135 100644
--- a/src/routes/Detail/VideosList/useSeasons.js
+++ b/src/routes/Detail/VideosList/useSeasons.js
@@ -1,23 +1,71 @@
 const React = require('react');
 
-const useSeasons = (metaItem) => {
-    const seasons = React.useMemo(() => {
-        return metaItem !== null ?
-            metaItem.videos
+const seasonsReducer = (state, action) => {
+    switch (action.type) {
+        case 'videos-changed': {
+            const seasons = action.videos
                 .map(({ season }) => season)
                 .filter((season, index, seasons) => {
                     return season !== null &&
                         !isNaN(season) &&
+                        typeof season === 'number' &&
                         seasons.indexOf(season) === index;
-                })
-            :
-            [];
-    }, [metaItem]);
-    const [season, setSeason] = React.useState(seasons[0]);
+                });
+            const selectedSeason = seasons.includes(state.selectedSeason) ?
+                state.selectedSeason
+                :
+                seasons.length > 0 ?
+                    seasons[0]
+                    :
+                    null;
+            return {
+                ...state,
+                seasons,
+                selectedSeason
+            };
+        }
+        case 'season-changed': {
+            const selectedSeason = state.seasons.includes(action.season) ?
+                action.season
+                :
+                state.season;
+            return {
+                ...state,
+                selectedSeason
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+};
+
+const useSeasons = (metaItem) => {
+    const [{ selectedSeason, seasons }, dispatch] = React.useReducer(
+        seasonsReducer,
+        [metaItem],
+        (metaItem) => {
+            const videos = metaItem && Array.isArray(metaItem.videos) ? metaItem.videos : [];
+            return seasonsReducer({}, {
+                type: 'videos-changed',
+                videos
+            });
+        }
+    );
+    const setSeason = React.useCallback((season) => {
+        dispatch({
+            type: 'season-changed',
+            season
+        });
+    }, []);
     React.useEffect(() => {
-        setSeason(seasons[0]);
-    }, [seasons]);
-    return [season, seasons, setSeason];
+        const videos = metaItem && Array.isArray(metaItem.videos) ? metaItem.videos : [];
+        dispatch({
+            type: 'videos-changed',
+            videos
+        });
+    }, [metaItem]);
+    return [selectedSeason, seasons, setSeason];
 };
 
 module.exports = useSeasons;