Fix Article/Post naming

Post/Posts is better than FullArticle/Articles since that's really what
they are. Paves the way for a Page to render an Article.
This commit is contained in:
Nick Pegg 2017-10-07 15:11:21 -07:00
parent 60e6e75cb4
commit 5e7fbcd3a4
2 changed files with 26 additions and 26 deletions

View file

@ -10,7 +10,7 @@ import 'highlight.js/styles/github-gist.css';
import { Container, Row, Column } from './skeleton';
import { Articles, FullArticle } from './Article';
import { Post, Posts } from './Article';
import { Footer } from './Footer';
import { Header } from './Header';
import { NavList, TagNav, HistoryNav } from './Nav';
@ -37,13 +37,13 @@ class App extends Component {
</Column>
<Column width="eight">
<Switch>
<Route exact path="/" component={Articles} />
<Route exact path="/" component={Posts} />
{ /* Page routes */ }
<Route path="/about" component={About} />
{ /* Article routes */ }
<Route path="/page/:page" component={Articles} />
<Route path="/:year/:month/:slug" component={FullArticle} />
{ /* Post routes */ }
<Route path="/page/:page" component={Posts} />
<Route path="/:year/:month/:slug" component={Post} />
{ /* 404 fallback */ }
<Route component={NotFound} />

View file

@ -83,18 +83,18 @@ class Article extends Component {
}
class FullArticle extends Component {
class Post extends Component {
constructor(props) {
super(props);
this.props = props;
this.params = props.match.params;
this.state = {
article: null
post: null
}
}
fetchArticle() {
fetchPost() {
fetch('/site.json')
.then((resp) => resp.json())
.then((blob) => {
@ -106,33 +106,33 @@ class FullArticle extends Component {
}
if (slug === this.params.slug) {
this.setState({article: post})
this.setState({post: post})
found = true;
break
}
}
if (!found) {
console.log('article not found');
console.log('post not found');
/* TODO: return 404 */
}
});
}
componentDidMount() {
this.fetchArticle();
this.fetchPost();
}
componentWillReceiveProps(props) {
this.params = props.match.params;
this.fetchArticle();
this.fetchPost();
}
render() {
if (this.state.article) {
if (this.state.post) {
return (
<Article
article={this.state.article}
article={this.state.post}
/>
)
} else {
@ -143,7 +143,7 @@ class FullArticle extends Component {
}
}
class Articles extends Component {
class Posts extends Component {
constructor(props) {
super(props);
@ -153,12 +153,12 @@ class Articles extends Component {
this.params = props.match.params;
this.state = {
articles: null,
posts: null,
}
}
fetchArticles() {
// Fetch articles from JSON blob
fetchPosts() {
// Fetch posts from JSON blob
fetch('/site.json')
.then((resp) => resp.json())
.then((blob) => {
@ -168,25 +168,25 @@ class Articles extends Component {
}
let posts = blob.posts.slice(offset, offset + this.per_page);
this.setState({articles: posts});
this.setState({posts: posts});
});
}
componentDidMount() {
this.fetchArticles();
this.fetchPosts();
}
componentWillReceiveProps(props) {
this.params = props.match.params;
this.fetchArticles();
this.fetchPosts();
}
render() {
if (this.state.articles != null) {
let articles = this.state.articles.map(article =>
if (this.state.posts != null) {
let articles = this.state.posts.map(post =>
<Article
key={article.title}
article={article}
key={post.title}
article={post}
blurb
/>
);
@ -205,4 +205,4 @@ class Articles extends Component {
}
}
export { Article, FullArticle, Articles };
export { Article, Post, Posts };