rickvanlieshout.com/components/ReadNext/index.jsx
Simon Reinsperger 2a77a52ed2 refactor: fixes linting errors components/ReadNext/index.jsx
adds readNext to my-second-post to show this feature in the demo
2017-03-08 17:24:56 +01:00

49 lines
1.2 KiB
JavaScript

import React from 'react';
import { Link } from 'react-router';
import { include as includes } from 'underscore.string';
import find from 'lodash/find';
import './style.css';
class ReadNext extends React.Component {
render() {
const { post } = this.props;
const { pages } = this.props.route;
const { readNext } = post;
let nextPost;
if (readNext) {
nextPost = find(pages, page => includes(page.path, readNext));
}
if (!nextPost) {
return React.createElement('noscript', null);
}
nextPost = find(pages, page => includes(page.path, readNext.slice(1, -1)));
const description = nextPost.data.description;
return (
<div>
<h6 style={{ fontSize: '16px', margin: '20px 0 0' }}>READ THIS NEXT:</h6>
<h3 style={{ margin: '5px 0 0' }}>
<Link to={nextPost.path} query={{ readNext: true }}>
{nextPost.data.title}
</Link>
</h3>
<p className="description">
{description}
</p>
</div>
);
}
}
ReadNext.propTypes = {
post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array,
route: React.PropTypes.object,
};
export default ReadNext;