From aa3a86c69cf6d0e656af0fad8c8a668ec8cd0825 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 15 Jun 2018 15:12:18 +0300
Subject: [PATCH] Main component declaged ro wrap Board Library Discover and
 Calendar

---
 src/app/app.js              | 22 ++--------------------
 src/routes/Main/Main.js     | 30 ++++++++++++++++++++++++++++++
 src/routes/Main/index.js    |  3 +++
 src/routes/Main/styles.less |  4 ++++
 src/routes/index.js         |  4 +++-
 5 files changed, 42 insertions(+), 21 deletions(-)
 create mode 100644 src/routes/Main/Main.js
 create mode 100644 src/routes/Main/index.js
 create mode 100644 src/routes/Main/styles.less

diff --git a/src/app/app.js b/src/app/app.js
index d57d88000..6db992534 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
-import { Board, Discover, Library, Calendar, Addons } from 'stremio-routes';
-import { NavBar } from 'stremio-common';
+import { Main, Addons } from 'stremio-routes';
 import styles from './styles';
 
 class App extends Component {
@@ -10,24 +9,7 @@ class App extends Component {
             <BrowserRouter>
                 <div className={styles['app']}>
                     <Switch>
-                        <Route path={'/(discover|library|calendar)?'} exact={true}>
-                            <div className={styles['app']}>
-                                <NavBar
-                                    tabs={[
-                                        { icon: 'ic_board', label: 'Board', to: '/', exact: true },
-                                        { icon: 'ic_discover', label: 'Discover', to: '/discover' },
-                                        { icon: 'ic_library', label: 'Library', to: '/library' },
-                                        { icon: 'ic_calendar', label: 'Calendar', to: '/calendar' }
-                                    ]}
-                                />
-                                <Switch>
-                                    <Route path={'/'} exact={true} component={Board} />
-                                    <Route path={'/discover'} component={Discover} />
-                                    <Route path={'/library'} component={Library} />
-                                    <Route path={'/calendar'} component={Calendar} />
-                                </Switch>
-                            </div>
-                        </Route>
+                        <Route path={'/(discover|library|calendar)?'} exact={true} component={Main} />
                         <Route path={'/addons'} component={Addons} />
                         <Redirect to={'/'} />
                     </Switch>
diff --git a/src/routes/Main/Main.js b/src/routes/Main/Main.js
new file mode 100644
index 000000000..01458a549
--- /dev/null
+++ b/src/routes/Main/Main.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NavBar } from 'stremio-common';
+import { Board, Discover, Library, Calendar } from 'stremio-routes';
+import styles from './styles';
+
+class Main extends Component {
+    render() {
+        return (
+            <div className={styles['root-container']}>
+                <NavBar
+                    tabs={[
+                        { icon: 'ic_board', label: 'Board', to: '/', exact: true },
+                        { icon: 'ic_discover', label: 'Discover', to: '/discover' },
+                        { icon: 'ic_library', label: 'Library', to: '/library' },
+                        { icon: 'ic_calendar', label: 'Calendar', to: '/calendar' }
+                    ]}
+                />
+                <Switch>
+                    <Route path={'/'} exact={true} component={Board} />
+                    <Route path={'/discover'} component={Discover} />
+                    <Route path={'/library'} component={Library} />
+                    <Route path={'/calendar'} component={Calendar} />
+                </Switch>
+            </div>
+        );
+    }
+}
+
+export default Main;
diff --git a/src/routes/Main/index.js b/src/routes/Main/index.js
new file mode 100644
index 000000000..d7872c9ac
--- /dev/null
+++ b/src/routes/Main/index.js
@@ -0,0 +1,3 @@
+import Main from './Main';
+
+export default Main;
diff --git a/src/routes/Main/styles.less b/src/routes/Main/styles.less
new file mode 100644
index 000000000..d8aec94c1
--- /dev/null
+++ b/src/routes/Main/styles.less
@@ -0,0 +1,4 @@
+.root-container {
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/routes/index.js b/src/routes/index.js
index 7ef145ad5..c1cde861e 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -3,11 +3,13 @@ import Discover from './Discover';
 import Library from './Library';
 import Calendar from './Calendar';
 import Addons from './Addons';
+import Main from './Main';
 
 export {
     Board,
     Discover,
     Library,
     Calendar,
-    Addons
+    Addons,
+    Main
 };