client/View: Move API call to action

3 files changed, 55 insertions, 42 deletions

diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js
index 2ec2dbd..a601226 100644
--- a/src/client/react/components/container/View.js
+++ b/src/client/react/components/container/View.js
@@ -26,6 +26,7 @@ import extractSchedule from '../../lib/extractSchedule';
 
 import Schedule from '../presentational/Schedule';
 import Loading from '../presentational/Loading';
+import * as actions from '../../store/actions';
 
 class View extends React.Component {
   static propTypes = {
@@ -33,51 +34,15 @@ class View extends React.Component {
       state: PropTypes.string.isRequired,
       htmlStr: PropTypes.string,
     })).isRequired,
-
-    // react-router
     user: PropTypes.string.isRequired,
     week: PropTypes.number.isRequired,
 
-    // redux
-    dispatch: PropTypes.func.isRequired,
+    fetchScheduleIfNeeded: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
-    this.fetchScheduleIfNeeded();
-  }
-
-  fetchScheduleIfNeeded() {
-    const {
-      user,
-      week,
-      schedules,
-      dispatch,
-    } = this.props;
-
-    const schedule = extractSchedule(schedules, user, week);
-
-    if (schedule.state === 'NOT_REQUESTED') {
-      fetch(`/get/${user}?week=${week}`).then(r => r.text()).then(
-        // success
-        (htmlStr) => {
-          dispatch({
-            type: 'VIEW/FETCH_SCHEDULE_SUCCESS',
-            user,
-            week,
-            htmlStr,
-          });
-        },
-
-        // error
-        () => {
-          dispatch({
-            type: 'VIEW/FETCH_SCHEDULE_FAILURE',
-            week,
-            user,
-          });
-        },
-      );
-    }
+    const { fetchScheduleIfNeeded, user, week } = this.props;
+    fetchScheduleIfNeeded(user, week);
   }
 
   render() {
@@ -112,4 +77,10 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps)(View);
+const mapDispatchToProps = dispatch => ({
+  fetchScheduleIfNeeded: (user, week) => (
+    dispatch(actions.fetchScheduleIfNeeded(user, week))
+  ),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);
diff --git a/src/client/react/store/actions.js b/src/client/react/store/actions.js
index e7ef91d..2157030 100644
--- a/src/client/react/store/actions.js
+++ b/src/client/react/store/actions.js
@@ -4,6 +4,7 @@ import users from '../users';
 import { selectUser, selectWeek, selectCurrentWeek } from './selectors';
 import purifyWeek from '../lib/purifyWeek';
 import withinRange from '../lib/withinRange';
+import extractSchedule from '../lib/extractSchedule';
 
 function updatePathname(pathname = '') {
   return (dispatch, getState) => {
@@ -83,3 +84,44 @@ export function showRoomFinder() {
     dispatch({ type: 'ROOM_FINDER/SHOW' });
   };
 }
+
+const fetchScheduleStart = (user, week) => ({
+  type: 'VIEW/FETCH_SCHEDULE_START', user, week,
+});
+
+const fetchScheduleSuccess = (user, week, htmlStr) => ({
+  type: 'VIEW/FETCH_SCHEDULE_SUCCESS', user, week, htmlStr,
+});
+
+const fetchScheduleError = (user, week) => ({
+  type: 'VIEW/FETCH_SCHEDULE_ERROR', user, week,
+});
+
+
+export function fetchScheduleIfNeeded(user, week) {
+  return (dispatch, getState) => {
+    const { schedules } = getState();
+    const schedule = extractSchedule(schedules, user, week);
+
+    if (schedule.state !== 'NOT_REQUESTED') {
+      return;
+    }
+
+    dispatch(fetchScheduleStart(user, week));
+
+    fetch(`/get/${user}?week=${week}`)
+      .then(r => r.text())
+      .then(
+      // success
+        (htmlStr) => {
+          dispatch(fetchScheduleSuccess(user, week, htmlStr));
+        },
+
+        // error
+        () => {
+          // TODO: Handle error status
+          dispatch(fetchScheduleError(user, week));
+        },
+      );
+  };
+}
diff --git a/src/client/react/store/reducers.js b/src/client/react/store/reducers.js
index cd68d96..3e39096 100644
--- a/src/client/react/store/reducers.js
+++ b/src/client/react/store/reducers.js
@@ -30,7 +30,7 @@ const DEFAULT_STATE = {
 
 const schedule = (state = {}, action) => {
   switch (action.type) {
-    case 'VIEW/FETCH_SCHEDULE_REQUEST':
+    case 'VIEW/FETCH_SCHEDULE_START':
       return {
         ...state,
         state: 'FETCHING',
@@ -103,7 +103,7 @@ function reducer(state = DEFAULT_STATE, action) {
         isRoomFinderVisible: false,
       };
 
-    case 'VIEW/FETCH_SCHEDULE_REQUEST':
+    case 'VIEW/FETCH_SCHEDULE_START':
     case 'VIEW/FETCH_SCHEDULE_SUCCESS':
       return {
         ...state,