Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import React, { Component } from 'react';
import ReactRouterPropTypes from 'react-router-prop-types';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import moment from 'moment';
import { articlesFetchData } from './actions';
import Loader from '../../components/Loader';
import styles from '../../assets/styles/page.scss';
class ContentPage extends Component {
static propTypes = {
history: ReactRouterPropTypes.history.isRequired,
article: PropTypes.shape({
title: PropTypes.string,
body: PropTypes.string,
updatedAt: PropTypes.string,
}).isRequired,
isLoading: PropTypes.bool.isRequired,
isNotFound: PropTypes.bool.isRequired,
fetchData: PropTypes.func.isRequired,
};
componentDidMount() {
const { fetchData } = this.props;
fetchData();
}
componentDidUpdate() {
const { isNotFound, history } = this.props;
if (isNotFound) {
history.push('/not/found');
}
}
render() {
const { isLoading, article } = this.props;
const { title, body, updatedAt } = article;
return (
(isLoading)
? <Loader className={styles.page} />
: (
<main className={styles.page}>
<header className={styles.page__header}>
<small className={styles.lastModified}>
Last modified:
{' '}
{moment(updatedAt).format('LL')}
</small>
<h2 className={styles.page__title}>{title}</h2>
</header>
<article dangerouslySetInnerHTML={{ __html: body }} />
</main>
));
}
}
const mapStateToProps = (state, ownProps) => {
const { slug } = ownProps.match.params;
const { articles } = state;
let isNotFound = false;
let article = {};
if (articles.items
&& articles.items.length) {
const hasSlug = slug !== undefined;
const matchedArticle = hasSlug && articles.items.filter(obj => obj.slug === slug);
if (!matchedArticle.length && hasSlug) {
isNotFound = true;
} else {
({ 0: article } = (hasSlug ? matchedArticle : articles.items));
}
}
return {
hasErrored: articles.hasErrored,
isLoading: articles.isLoading,
slug,
article,
isNotFound,
};
};
const mapDispatchToProps = dispatch => ({
fetchData: () => { dispatch(articlesFetchData()); },
});
export default connect(mapStateToProps, mapDispatchToProps)(ContentPage);
|