Permalink
Browse files

Step 5: Display shows in the sidebar

  • Loading branch information...
hiquest committed Sep 20, 2017
1 parent 2a8dd0b commit e50a7b52da74a2cbffbb096a2c4704c8b200f389
Showing with 60 additions and 25 deletions.
  1. +60 −25 src/js/components/app.jsx
@@ -5,33 +5,68 @@ import { NavLink } from 'react-router-dom';
import Home from './home';
import Search from './search';
import store from '../store.js';
const history = createHashHistory();
export default () => (
<Router history={history}>
<div className="window">
<div className="window-content">
<div className="pane-group">
<div className="pane-sm sidebar">
<nav className="nav-group">
<h5 className="nav-group-title">Menu</h5>
<NavLink to='/' className='nav-group-item' exact>
<span className="icon icon-home"></span>
Home
</NavLink>
<NavLink to='/search' className='nav-group-item' exact>
<span className="icon icon-search"></span>
Search
</NavLink>
</nav>
</div>
<div className="pane padded-more">
<Route path="/" component={Home} exact />
<Route path="/search" component={Search} exact />
export default class extends React.Component {
constructor() {
super();
this.state = {
shows: []
};
}
componentDidMount() {
store.readAll((err, shows) => {
this.setState(Object.assign(this.state, {
shows: shows.map(show => {
const s = show.Data.Series[0];
return { id: s.id[0], name: s.SeriesName[0] };
})
}));
});
}
render() {
return (
<Router history={history}>
<div className="window">
<div className="window-content">
<div className="pane-group">
<div className="pane-sm sidebar">
<nav className="nav-group">
<h5 className="nav-group-title">Menu</h5>
<NavLink to='/' className='nav-group-item' exact>
<span className="icon icon-home"></span>
Home
</NavLink>
<NavLink to='/search' className='nav-group-item' exact>
<span className="icon icon-search"></span>
Search
</NavLink>
<h5 className="nav-group-title">My Shows</h5>
{ this.state.shows.map(renderShow) }
</nav>
</div>
<div className="pane padded-more">
<Route path="/" component={Home} exact />
<Route path="/search" component={Search} exact />
</div>
</div>
</div>
</div>
</div>
</div>
</Router>
);
</Router>
);
}
};
function renderShow({ id, name }) {
return (
<NavLink to={`/show/${id}`} key={ id } className='nav-group-item' exact>
{ name }
</NavLink>
);
}

0 comments on commit e50a7b5

Please sign in to comment.