nick/nickpegg.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Article/Post naming

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

10
src/App.js
View file

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

42
src/Article.js
View file

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