From 98fa16c9c13e856b74d6121268efbc4bc0bf5eb3 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 25 Nov 2019 14:21:57 +0200
Subject: [PATCH] meta details state mapped in the initial state too

---
 src/routes/MetaDetails/useMetaDetails.js | 60 ++++++++++++------------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/routes/MetaDetails/useMetaDetails.js b/src/routes/MetaDetails/useMetaDetails.js
index 705fe8378..88869c769 100644
--- a/src/routes/MetaDetails/useMetaDetails.js
+++ b/src/routes/MetaDetails/useMetaDetails.js
@@ -1,43 +1,41 @@
 const React = require('react');
 const { useServices } = require('stremio/services');
 
+const mapMetaDetailsState = (state) => {
+    const selected = state.meta_details.selected;
+    const meta_groups = state.meta_details.meta_groups.map((meta_group) => {
+        if (meta_group.content.type === 'Ready') {
+            meta_group.content.content.released = new Date(meta_group.content.content.released);
+            meta_group.content.content.videos = meta_group.content.content.videos.map((video) => {
+                video.released = new Date(video.released);
+                video.upcoming = !isNaN(video.released.getTime()) ?
+                    video.released.getTime() > Date.now()
+                    :
+                    false;
+                video.href = `#/metadetails/${meta_group.content.content.type}/${meta_group.content.content.id}/${video.id}`;
+                // TODO add watched and progress
+                return video;
+            });
+        }
+
+        return meta_group;
+    });
+    const streams_groups = state.meta_details.streams_groups;
+    return { selected, meta_groups, streams_groups };
+};
+
 const useMetaDetails = (urlParams) => {
     const { core } = useServices();
-    const [metaDetails, setMetaDetails] = React.useState({
-        selected: {
-            meta_resource_ref: null,
-            streams_resource_ref: null
-        },
-        meta_groups: [],
-        streams_groups: []
+    const [metaDetails, setMetaDetails] = React.useState(() => {
+        const state = core.getState();
+        const metaDetails = mapMetaDetailsState(state);
+        return metaDetails;
     });
     React.useEffect(() => {
         const onNewModel = () => {
             const state = core.getState();
-            const selected = state.meta_details.selected;
-            const meta_groups = state.meta_details.meta_groups.map((meta_group) => {
-                if (meta_group.content.type === 'Ready') {
-                    meta_group.content.content.released = new Date(meta_group.content.content.released);
-                    meta_group.content.content.videos = meta_group.content.content.videos.map((video) => {
-                        video.released = new Date(video.released);
-                        video.upcoming = !isNaN(video.released.getTime()) ?
-                            video.released.getTime() > Date.now()
-                            :
-                            false;
-                        video.href = `#/metadetails/${meta_group.content.content.type}/${meta_group.content.content.id}/${video.id}`;
-                        // TODO add watched and progress
-                        return video;
-                    });
-                }
-
-                return meta_group;
-            });
-            const streams_groups = state.meta_details.streams_groups;
-            setMetaDetails({
-                selected,
-                meta_groups,
-                streams_groups
-            });
+            const metaDetails = mapMetaDetailsState(state);
+            setMetaDetails(metaDetails);
         };
         core.on('NewModel', onNewModel);
         core.dispatch({