From 74ef968a45e147069d044fbfde814886d7275aa3 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Fri, 6 Jul 2018 18:36:55 +0200
Subject: client/View: Move API call to action
---
src/client/react/components/container/View.js | 51 ++++++---------------------
src/client/react/store/actions.js | 42 ++++++++++++++++++++++
src/client/react/store/reducers.js | 4 +--
3 files changed, 55 insertions(+), 42 deletions(-)
(limited to 'src/client')
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,
--
cgit v1.1