78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Route, NavLink } from 'react-router-dom';
|
|
import { Header, Ballots, NewBallot, Settings, Footer } from './components';
|
|
import './assets/App.css';
|
|
//import DevTools from 'mobx-react-devtools'
|
|
import Loading from './Loading';
|
|
import { inject, observer } from 'mobx-react';
|
|
|
|
@inject("commonStore")
|
|
@observer
|
|
class App extends Component {
|
|
onBallotsRender = () => {
|
|
const { commonStore } = this.props;
|
|
commonStore.isActiveFilter = false;
|
|
return <Ballots/>;
|
|
}
|
|
|
|
onActiveBallotsRender = () => {
|
|
const { commonStore } = this.props;
|
|
commonStore.isActiveFilter = true;
|
|
return <Ballots/>;
|
|
}
|
|
|
|
onNewBallotRender = () => {
|
|
return <NewBallot/>;
|
|
}
|
|
|
|
onSettingsRender = () => {
|
|
return <Settings/>;
|
|
}
|
|
|
|
onSearch = (e) => {
|
|
const { commonStore } = this.props;
|
|
commonStore.setSearchTerm(e.target.value.toLowerCase());
|
|
}
|
|
|
|
shouldShowNavPan = () => {
|
|
const { commonStore } = this.props;
|
|
const currentPath = this.props.location.pathname;
|
|
let showNavPan =
|
|
currentPath === `${commonStore.rootPath}`
|
|
|| currentPath === "/"
|
|
|| currentPath === `${commonStore.rootPath}/`
|
|
|| currentPath === `${commonStore.rootPath}/active`;
|
|
return showNavPan;
|
|
}
|
|
|
|
render() {
|
|
const { commonStore } = this.props;
|
|
const loading = commonStore.loading ? <Loading /> : ''
|
|
const nav = this.shouldShowNavPan() ? <div className="search">
|
|
<div className="container flex-container">
|
|
<div className="nav">
|
|
<NavLink className="nav-i" exact activeClassName="nav-i_active" to={`${commonStore.rootPath}/`}>All</NavLink>
|
|
<NavLink className="nav-i" activeClassName="nav-i_active" to={`${commonStore.rootPath}/active`}>Active</NavLink>
|
|
</div>
|
|
<input type="search" className="search-input" onChange={this.onSearch}/>
|
|
</div>
|
|
</div> : null;
|
|
return (
|
|
<div>
|
|
{loading}
|
|
<Header />
|
|
{nav}
|
|
<Route exact path={`/`} render={this.onBallotsRender}/>
|
|
<Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender}/>
|
|
<Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender}/>
|
|
<Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender}/>
|
|
{/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
|
|
<Footer />
|
|
{/*<DevTools />*/}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|