Main component declaged ro wrap Board Library Discover and Calendar

This commit is contained in:
NikolaBorislavovHristov 2018-06-15 15:12:18 +03:00
parent d654bc9e6c
commit aa3a86c69c
5 changed files with 42 additions and 21 deletions

View file

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

30
src/routes/Main/Main.js Normal file
View file

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

3
src/routes/Main/index.js Normal file
View file

@ -0,0 +1,3 @@
import Main from './Main';
export default Main;

View file

@ -0,0 +1,4 @@
.root-container {
width: 100%;
height: 100%;
}

View file

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