HistoryNav working with routing

This commit is contained in:
Nick Pegg 2017-10-07 12:27:33 -07:00
parent 0968c22cf6
commit 5d799021f0
2 changed files with 23 additions and 14 deletions

View file

@ -14,7 +14,7 @@ import { Container, Row, Column } from './skeleton';
import { Articles, RoutedArticle } from './Article'; import { Articles, RoutedArticle } from './Article';
import { Footer } from './Footer'; import { Footer } from './Footer';
import { Header } from './Header'; import { Header } from './Header';
import { NavList, TagNav, HistoryNav, HistoryNavStart } from './Nav'; import { NavList, TagNav, HistoryNav } from './Nav';
class App extends Component { class App extends Component {
@ -47,7 +47,7 @@ class App extends Component {
</Row> </Row>
{ /* Display HistoryNav if this is a series of articles */ } { /* Display HistoryNav if this is a series of articles */ }
<Route exact path="/" component={HistoryNavStart} /> <Route exact path="/" component={HistoryNav} />
<Route exact path="/page/:page" component={HistoryNav} /> <Route exact path="/page/:page" component={HistoryNav} />
</Container> </Container>

View file

@ -73,29 +73,38 @@ class TagNav extends Component {
class HistoryNav extends Component { class HistoryNav extends Component {
render() { render() {
let page = 0;
if (this.props.match.params.page) {
page = parseInt(this.props.match.params.page, 10);
}
console.log('nav page', page);
let left = ""; let left = "";
if (!this.props.newest) { if (page !== 0) {
let last_href = "/page/" + (page - 1);
if (page === 1) {
last_href = "/";
}
left = ( left = (
<a href=""> <Link to={last_href}>
<Icon name="arrow-left" /> <Icon name="arrow-left" />
<span> newer posts</span> <span> newer posts</span>
</a> </Link>
) )
} }
let next_href = "/page/" + (page + 1);
return ( return (
<Row> <Row>
{ left } { left }
<a className="u-pull-right" href=""> <Link className="u-pull-right" to={next_href}>
<span>older posts </span> <span>older posts </span>
<Icon name="arrow-right" /> <Icon name="arrow-right" />
</a> </Link>
</Row> </Row>
); );
} }
} }
const HistoryNavStart = ({match}) => ( export { ListLink, NavList, TagNav, HistoryNav };
<HistoryNav newest />
)
export { ListLink, NavList, TagNav, HistoryNav, HistoryNavStart };