aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-01-28 19:11:00 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-01-28 19:11:00 +0100
commit7dd214d57c7dab9626abef1516a862f46c1e02bd (patch)
tree9fb9c0060d0e595550a064caa4efb4289d2b7eb8 /src/client
parent9f438225db07b7214e4a41d133634309cba80073 (diff)
Refactor View.js
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/container/View.js68
-rw-r--r--src/client/react/lib/extractSchedule.js10
-rw-r--r--src/client/react/reducers/view.js4
3 files changed, 41 insertions, 41 deletions
diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index 7539609..2823fe9 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -5,55 +5,49 @@ import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { fetchSchedule } from '../../actions/view';
-
-function cleanMeetingpointHTML(htmlStr) {
- const DOMPurify = createDOMPurify(window);
-
- return DOMPurify.sanitize(htmlStr, {
- ADD_ATTR: ['rules'],
- });
-}
+import extractSchedule from '../../lib/extractSchedule';
class View extends React.Component {
- componentDidMount() {
- if (!this.loadingFinished(this.props.user, this.props.week)) {
- this.props.dispatch(fetchSchedule(this.props.user, this.props.week));
- }
- }
-
- componentWillReceiveProps(nextProps) {
- if ((nextProps.user !== this.props.user || nextProps.week !== this.props.week)
- && !this.loadingFinished(nextProps.user, nextProps.week)) {
- this.props.dispatch(fetchSchedule(nextProps.user, nextProps.week));
- }
- }
-
- loadingFinished(user, week) {
- return this.props.schedules.hasOwnProperty(user) &&
- this.props.schedules[user].hasOwnProperty(week) &&
- this.props.schedules[user][week].state === 'finished';
+ renderLoading() {
+ return (
+ <div>
+ Loading...
+ </div>
+ );
}
- render() {
- if (!this.loadingFinished(this.props.user, this.props.week)) {
- return (
- <div>
- Loading...
- </div>
- );
- }
+ renderSchedule(htmlStr) {
+ const DOMPurify = createDOMPurify(window);
- const cleanHTML = cleanMeetingpointHTML(this.props.schedules[this.props.user][this.props.week].htmlStr);
+ const cleanHTML = DOMPurify.sanitize(htmlStr, {
+ ADD_ATTR: ['rules'],
+ });
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.`);
+ }
+ }
}
View.propTypes = {
- user: PropTypes.string,
+ user: PropTypes.string.isRequired,
week: PropTypes.number.isRequired,
dispatch: PropTypes.func.isRequired,
schedules: PropTypes.objectOf(PropTypes.objectOf(PropTypes.shape({
@@ -62,10 +56,6 @@ View.propTypes = {
}))).isRequired,
};
-View.defaultProps = {
- user: null,
-};
-
const mapStateToProps = state => ({
schedules: state.view.schedules,
});
diff --git a/src/client/react/lib/extractSchedule.js b/src/client/react/lib/extractSchedule.js
new file mode 100644
index 0000000..e74411b
--- /dev/null
+++ b/src/client/react/lib/extractSchedule.js
@@ -0,0 +1,10 @@
+export default function extractSchedule(schedules, user, week) {
+ const scheduleExists =
+ schedules.hasOwnProperty(user) && schedules[user].hasOwnProperty(week);
+
+ if (!scheduleExists) {
+ return { state: 'NOT_REQUESTED' };
+ }
+
+ return schedules[user][week];
+}
diff --git a/src/client/react/reducers/view.js b/src/client/react/reducers/view.js
index 603f1d4..301a1cf 100644
--- a/src/client/react/reducers/view.js
+++ b/src/client/react/reducers/view.js
@@ -3,12 +3,12 @@ const schedule = (state = {}, action) => {
case 'VIEW/FETCH_SCHEDULE_REQUEST':
return {
...state,
- state: 'fetching',
+ state: 'FETCHING',
};
case 'VIEW/FETCH_SCHEDULE_SUCCESS':
return {
...state,
- state: 'finished',
+ state: 'FINISHED',
htmlStr: action.htmlStr,
};
default: