Show 404 if you ask for a page of posts that has none
A later TODO is to to only display the Older Posts link if there are older posts to show. That's a little complicated, this is at least a quick win.
This commit is contained in:
parent
9f307a15c4
commit
698a553afc
1 changed files with 18 additions and 12 deletions
|
|
@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
|
||||||
import slugify from 'slugify';
|
import slugify from 'slugify';
|
||||||
|
|
||||||
import { ListLink } from './Nav';
|
import { ListLink } from './Nav';
|
||||||
|
import { NotFound } from './NotFound';
|
||||||
|
|
||||||
|
|
||||||
class Article extends Component {
|
class Article extends Component {
|
||||||
|
|
@ -152,11 +153,11 @@ class Articles extends Component {
|
||||||
|
|
||||||
// Number of Articles per page
|
// Number of Articles per page
|
||||||
// TODO: Pull this from a configuration somehow
|
// TODO: Pull this from a configuration somehow
|
||||||
this.per_page = 5;
|
this.per_page = 4;
|
||||||
|
|
||||||
this.params = props.match.params;
|
this.params = props.match.params;
|
||||||
this.state = {
|
this.state = {
|
||||||
articles: [],
|
articles: null,
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("page", this.params.page);
|
console.log("page", this.params.page);
|
||||||
|
|
@ -188,17 +189,22 @@ class Articles extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.state.articles.length > 0) {
|
if (this.state.articles != null) {
|
||||||
|
let articles = this.state.articles.map(article =>
|
||||||
|
<Article
|
||||||
|
key={article.title}
|
||||||
|
article={article}
|
||||||
|
blurb
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
let jawn = articles;
|
||||||
|
if (articles.length === 0) {
|
||||||
|
jawn = <NotFound />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>{ jawn }</div>
|
||||||
{this.state.articles.map(article =>
|
|
||||||
<Article
|
|
||||||
key={article.title}
|
|
||||||
article={article}
|
|
||||||
blurb
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return <p>Loading...</p>
|
return <p>Loading...</p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue