Extract shiftWeek from WeekSelector

4 files changed, 24 insertions, 21 deletions

diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js
index 96c5663..c3f03f1 100644
--- a/src/client/react/components/container/WeekSelector.js
+++ b/src/client/react/components/container/WeekSelector.js
@@ -20,7 +20,7 @@
 
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { setWeek } from '../../store/actions';
+import { shiftWeek } from '../../store/actions';
 import { weekFromLocation } from '../../lib/url';
 
 import WeekSelector from '../presentational/WeekSelector';
@@ -30,7 +30,7 @@ const mapStateToProps = (state, { location }) => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  setWeek: newWeek => dispatch(setWeek(newWeek)),
+  shiftWeek: newWeek => dispatch(shiftWeek(newWeek)),
 });
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(WeekSelector));
diff --git a/src/client/react/components/presentational/WeekSelector.js b/src/client/react/components/presentational/WeekSelector.js
index e47a175..1b2cfb3 100644
--- a/src/client/react/components/presentational/WeekSelector.js
+++ b/src/client/react/components/presentational/WeekSelector.js
@@ -25,8 +25,6 @@ import moment from 'moment';
 import ArrowBackIcon from 'react-icons/lib/md/arrow-back';
 import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward';
 
-import purifyWeek from '../../lib/purifyWeek';
-
 import './WeekSelector.scss';
 import WeekDisplay from './WeekDisplay';
 
@@ -34,23 +32,15 @@ class WeekSelector extends React.Component {
   static propTypes = {
     // react-router
     week: PropTypes.number.isRequired,
-    setWeek: PropTypes.func.isRequired,
+    shiftWeek: PropTypes.func.isRequired,
   };
 
-  updateWeek(change) {
-    const { week, setWeek } = this.props;
-    const newWeek = purifyWeek(week + change);
-
-    const isCurrentWeek = moment().week() === newWeek;
-    setWeek(isCurrentWeek ? undefined : newWeek);
-  }
-
   render() {
-    const { week } = this.props;
+    const { week, shiftWeek } = this.props;
 
     return (
       <div className="WeekSelector">
-        <button type="button" onClick={() => this.updateWeek(-1)}>
+        <button type="button" onClick={() => shiftWeek(-1)}>
           <ArrowBackIcon />
         </button>
         <div className="text">
@@ -59,7 +49,7 @@ class WeekSelector extends React.Component {
             currentWeek={moment().week()}
           />
         </div>
-        <button type="button" onClick={() => this.updateWeek(+1)}>
+        <button type="button" onClick={() => shiftWeek(+1)}>
           <ArrowForwardIcon />
         </button>
       </div>
diff --git a/src/client/react/index.js b/src/client/react/index.js
index 2e35594..f01a361 100644
--- a/src/client/react/index.js
+++ b/src/client/react/index.js
@@ -47,7 +47,10 @@ const store = createStore(
   // Redux devtools extension
   // https://github.com/zalmoxisus/redux-devtools-extension
   compose(
-    applyMiddleware(thunk.withExtraArgument(makeGetHistory(history))),
+    applyMiddleware(thunk.withExtraArgument({
+      getHistory: makeGetHistory(history),
+      moment,
+    })),
   ),
 );
 
diff --git a/src/client/react/store/actions.js b/src/client/react/store/actions.js
index 30b573c..46a38ab 100644
--- a/src/client/react/store/actions.js
+++ b/src/client/react/store/actions.js
@@ -1,7 +1,8 @@
 import users from '../users';
+import purifyWeek from '../lib/purifyWeek';
 
 export function setUser(newUser) {
-  return (dispatch, getState, getHistory) => {
+  return (dispatch, getState, { getHistory }) => {
     const { user, updatePathname } = getHistory();
 
     if (newUser === user) {
@@ -18,17 +19,26 @@ export function setUser(newUser) {
 }
 
 export function setWeek(newWeek) {
-  return (dispatchEvent, getState, getHistory) => {
+  return (dispatch, getState, { getHistory, moment }) => {
     const { updateQuery } = getHistory();
 
+    const isCurrentWeek = moment().week() === newWeek;
+
     updateQuery({
-      week: newWeek,
+      week: isCurrentWeek ? undefined : newWeek,
     });
   };
 }
 
+export function shiftWeek(shift) {
+  return (dispatch, getState, { getHistory }) => {
+    const { week } = getHistory();
+    dispatch(setWeek(purifyWeek(week + shift)));
+  };
+}
+
 export function showRoomFinder() {
-  return (dispatch, getState, getHistory) => {
+  return (dispatch, getState, { getHistory }) => {
     const { user } = getHistory();
 
     if (user == null || users.byId[user].type !== 'r') {