aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/View.js73
1 files changed, 37 insertions, 36 deletions
diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index 2823fe9..7ac5d3e 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -7,53 +7,54 @@ import { withRouter } from 'react-router-dom';
import { fetchSchedule } from '../../actions/view';
import extractSchedule from '../../lib/extractSchedule';
-class View extends React.Component {
- renderLoading() {
- return (
- <div>
- Loading...
- </div>
- );
- }
+const Loading = () => <div>Loading...</div>;
- renderSchedule(htmlStr) {
- const DOMPurify = createDOMPurify(window);
+const Schedule = ({ htmlStr }) => {
+ const DOMPurify = createDOMPurify(window);
- const cleanHTML = DOMPurify.sanitize(htmlStr, {
- ADD_ATTR: ['rules'],
- });
+ const cleanHTML = DOMPurify.sanitize(htmlStr, {
+ ADD_ATTR: ['rules'],
+ });
- return (
- // eslint-disable-next-line react/no-danger
- <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
- );
- }
+ return (
+ // eslint-disable-next-line react/no-danger
+ <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
+ );
+};
- render() {
- const schedule = extractSchedule(this.props.schedules, this.props.user, this.props.week);
-
- switch (schedule.state) {
- case 'NOT_REQUESTED':
- this.props.dispatch(fetchSchedule(this.props.user, this.props.week));
- return this.renderLoading();
- case 'FETCHING':
- return this.renderLoading();
- case 'FINISHED':
- return this.renderSchedule(schedule.htmlStr);
- default:
- throw new Error(`${schedule.state} is not a valid schedule state.`);
- }
+Schedule.propTypes = {
+ htmlStr: PropTypes.string.isRequired,
+};
+
+const View = ({
+ schedules,
+ user,
+ week,
+ dispatch,
+}) => {
+ const schedule = extractSchedule(schedules, user, week);
+
+ switch (schedule.state) {
+ case 'NOT_REQUESTED':
+ dispatch(fetchSchedule(user, week));
+ return <Loading />;
+ case 'FETCHING':
+ return <Loading />;
+ case 'FINISHED':
+ return <Schedule htmlStr={schedule.htmlStr} />;
+ default:
+ throw new Error(`${schedule.state} is not a valid schedule state.`);
}
-}
+};
View.propTypes = {
- user: PropTypes.string.isRequired,
- week: PropTypes.number.isRequired,
- dispatch: PropTypes.func.isRequired,
schedules: PropTypes.objectOf(PropTypes.objectOf(PropTypes.shape({
state: PropTypes.string.isRequired,
htmlStr: PropTypes.string,
}))).isRequired,
+ user: PropTypes.string.isRequired,
+ week: PropTypes.number.isRequired,
+ dispatch: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({