Make <View /> a stateless component

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 => ({