From 1b3f4ea79f947558573fbce5a2e2d0c2c5dd6a8d Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 17 Jan 2018 16:26:04 +0100
Subject: Add view code

---
 src/client/react/components/container/View.js | 70 +++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/client/react/components/container/View.js

(limited to 'src/client/react/components/container/View.js')

diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
new file mode 100644
index 0000000..9bac66f
--- /dev/null
+++ b/src/client/react/components/container/View.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import createDOMPurify from 'dompurify';
+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'],
+  });
+}
+
+class View extends React.Component {
+  componentDidMount() {
+    if (!this.loadingFinished(this.props.user)) {
+      this.props.dispatch(fetchSchedule(this.props.user));
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.user !== this.props.user && !this.loadingFinished(nextProps.user)) {
+      this.props.dispatch(fetchSchedule(nextProps.user));
+    }
+  }
+
+  loadingFinished(user) {
+    return this.props.schedules.hasOwnProperty(user) &&
+      this.props.schedules[user].state === 'finished';
+  }
+
+  render() {
+    if (!this.loadingFinished(this.props.user)) {
+      return (
+        <div>
+          Loading...
+        </div>
+      );
+    }
+
+    const cleanHTML = cleanMeetingpointHTML(this.props.schedules[this.props.user].htmlStr);
+
+    return (
+      // eslint-disable-next-line react/no-danger
+      <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
+    );
+  }
+}
+
+View.propTypes = {
+  user: PropTypes.string,
+  dispatch: PropTypes.func.isRequired,
+  schedules: PropTypes.objectOf(PropTypes.shape({
+    state: PropTypes.string.isRequired,
+    htmlStr: PropTypes.string,
+  })).isRequired,
+};
+
+View.defaultProps = {
+  user: null,
+};
+
+const mapStateToProps = state => ({
+  schedules: state.view.schedules,
+});
+
+export default withRouter(connect(mapStateToProps)(View));
-- 
cgit v1.1


From 8670ada517bc8beb69d152c82f282322b9ea8d64 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 28 Jan 2018 15:43:11 +0100
Subject: Implement week selector in the view

---
 src/client/react/components/container/View.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'src/client/react/components/container/View.js')

diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index 9bac66f..be550cd 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -16,24 +16,26 @@ function cleanMeetingpointHTML(htmlStr) {
 
 class View extends React.Component {
   componentDidMount() {
-    if (!this.loadingFinished(this.props.user)) {
-      this.props.dispatch(fetchSchedule(this.props.user));
+    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 && !this.loadingFinished(nextProps.user)) {
-      this.props.dispatch(fetchSchedule(nextProps.user));
+    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) {
+  loadingFinished(user, week) {
     return this.props.schedules.hasOwnProperty(user) &&
-      this.props.schedules[user].state === 'finished';
+      this.props.schedules[user].hasOwnProperty(week) &&
+      this.props.schedules[user][week].state === 'finished';
   }
 
   render() {
-    if (!this.loadingFinished(this.props.user)) {
+    if (!this.loadingFinished(this.props.user, this.props.week)) {
       return (
         <div>
           Loading...
@@ -41,7 +43,7 @@ class View extends React.Component {
       );
     }
 
-    const cleanHTML = cleanMeetingpointHTML(this.props.schedules[this.props.user].htmlStr);
+    const cleanHTML = cleanMeetingpointHTML(this.props.schedules[this.props.user][this.props.week].htmlStr);
 
     return (
       // eslint-disable-next-line react/no-danger
-- 
cgit v1.1


From 9f438225db07b7214e4a41d133634309cba80073 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 28 Jan 2018 16:10:10 +0100
Subject: Fix View.js prop types

---
 src/client/react/components/container/View.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/client/react/components/container/View.js')

diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index be550cd..7539609 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -54,11 +54,12 @@ class View extends React.Component {
 
 View.propTypes = {
   user: PropTypes.string,
+  week: PropTypes.number.isRequired,
   dispatch: PropTypes.func.isRequired,
-  schedules: PropTypes.objectOf(PropTypes.shape({
+  schedules: PropTypes.objectOf(PropTypes.objectOf(PropTypes.shape({
     state: PropTypes.string.isRequired,
     htmlStr: PropTypes.string,
-  })).isRequired,
+  }))).isRequired,
 };
 
 View.defaultProps = {
-- 
cgit v1.1


From 7dd214d57c7dab9626abef1516a862f46c1e02bd Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 28 Jan 2018 19:11:00 +0100
Subject: Refactor View.js

---
 src/client/react/components/container/View.js | 68 ++++++++++++---------------
 1 file changed, 29 insertions(+), 39 deletions(-)

(limited to 'src/client/react/components/container/View.js')

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,
 });
-- 
cgit v1.1


From 9e539c650b40ea76f9c7d00d9b28b33905d1b1d6 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 28 Jan 2018 19:25:17 +0100
Subject: Make <View /> a stateless component

---
 src/client/react/components/container/View.js | 73 ++++++++++++++-------------
 1 file changed, 37 insertions(+), 36 deletions(-)

(limited to 'src/client/react/components/container/View.js')

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 => ({
-- 
cgit v1.1


From dde583c2fa9b990e1d30f7292f9cf28d9310e570 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 28 Jan 2018 19:59:09 +0100
Subject: Move Schedule and Loading to seperate files

---
 src/client/react/components/container/View.js | 21 ++-------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

(limited to 'src/client/react/components/container/View.js')

diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index 7ac5d3e..4f16100 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -1,30 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import createDOMPurify from 'dompurify';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 
 import { fetchSchedule } from '../../actions/view';
 import extractSchedule from '../../lib/extractSchedule';
 
-const Loading = () => <div>Loading...</div>;
-
-const Schedule = ({ htmlStr }) => {
-  const DOMPurify = createDOMPurify(window);
-
-  const cleanHTML = DOMPurify.sanitize(htmlStr, {
-    ADD_ATTR: ['rules'],
-  });
-
-  return (
-    // eslint-disable-next-line react/no-danger
-    <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
-  );
-};
-
-Schedule.propTypes = {
-  htmlStr: PropTypes.string.isRequired,
-};
+import Schedule from '../presentational/Schedule';
+import Loading from '../presentational/Loading';
 
 const View = ({
   schedules,
-- 
cgit v1.1