Add week selector

6 files changed, 76 insertions, 1 deletions

diff --git a/package.json b/package.json
index 83d624b..ae4310a 100644
--- a/package.json
+++ b/package.json
@@ -41,12 +41,15 @@
     "jade": "~1.11.0",
     "left-pad": "^1.1.1",
     "lodash": "^4.15.0",
+    "moment": "^2.20.1",
     "morgan": "~1.7.0",
     "node-sass": "^4.7.2",
     "prop-types": "^15.6.0",
+    "query-string": "^5.0.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-icons": "^2.2.7",
+    "react-moment-proptypes": "^1.5.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js
new file mode 100644
index 0000000..9f308f0
--- /dev/null
+++ b/src/client/react/components/container/WeekSelector.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import momentPropTypes from 'react-moment-proptypes';
+import queryString from 'query-string';
+import { withRouter } from 'react-router-dom';
+
+const WeekSelector = ({ urlWeek, location, history }) => {
+  const updateWeek = (change) => {
+    const newWeek = moment().week(urlWeek.week() + change);
+    const isCurrentWeek = moment().week() === newWeek.week();
+    history.push(`${location.pathname}?${queryString.stringify({ week: isCurrentWeek ? undefined : newWeek.week() })}`);
+  };
+
+  return (
+    <div>
+      <button onClick={() => updateWeek(-1)}>Prev</button>
+      Week {urlWeek.week()}
+      <button onClick={() => updateWeek(+1)}>Next</button>
+    </div>
+  );
+};
+
+WeekSelector.propTypes = {
+  urlWeek: momentPropTypes.momentObj.isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+  }).isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default withRouter(WeekSelector);
diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js
index ff304c0..980070f 100644
--- a/src/client/react/components/page/User.js
+++ b/src/client/react/components/page/User.js
@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
+import queryString from 'query-string';
+import moment from 'moment';
 import Search from '../container/Search';
 import View from '../container/View';
 import users from '../../users';
+import WeekSelector from '../container/WeekSelector';
 
-const App = ({ match }) => {
+const App = ({ match, location }) => {
   const user = `${match.params.type}/${match.params.value}`;
+  const weekStr = queryString.parse(location.search).week;
+  const week = weekStr ? moment().week(weekStr) : moment();
 
   if (!users.allIds.includes(user)) {
     // Invalid user, redirect to index.
@@ -18,6 +23,7 @@ const App = ({ match }) => {
       <div className="menu">
         <div className="menu-container">
           <Search urlUser={user} />
+          <WeekSelector urlWeek={week} />
         </div>
       </div>
       <View user={user} />
@@ -32,6 +38,9 @@ App.propTypes = {
       value: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
+  location: PropTypes.shape({
+    search: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 export default App;
diff --git a/src/client/react/index.js b/src/client/react/index.js
index e70b442..122d54b 100644
--- a/src/client/react/index.js
+++ b/src/client/react/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import moment from 'moment';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { createStore, applyMiddleware, compose } from 'redux';
@@ -9,6 +10,8 @@ import reducer from './reducers';
 import Index from './components/page/Index';
 import User from './components/page/User';
 
+moment.locale('nl');
+
 // eslint-disable-next-line no-underscore-dangle
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const store = createStore(
diff --git a/webpack.config.js b/webpack.config.js
index 061f0d1..cf63880 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
@@ -20,6 +21,9 @@ const js = {
   resolve: {
     extensions: ['.js', '.jsx'],
   },
+  plugins: [
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nl/),
+  ],
 };
 
 const style = {
diff --git a/yarn.lock b/yarn.lock
index 1886b4b..60ec725 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1945,6 +1945,10 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
 deep-diff@^0.3.5:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
@@ -4750,6 +4754,10 @@ module-deps@^4.0.8:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+moment@>=1.6.0, moment@^2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
 morgan@~1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.7.0.tgz#eb10ca8e50d1abe0f8d3dad5c0201d052d981c62"
@@ -5731,6 +5739,14 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.0.1.tgz#6e2b86fe0e08aef682ecbe86e85834765402bd88"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 querystring-es3@^0.2.0, querystring-es3@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -5792,6 +5808,12 @@ react-icons@^2.2.7:
   dependencies:
     react-icon-base "2.1.0"
 
+react-moment-proptypes@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.5.0.tgz#4a448cd6479efc5dd509283f361f3753c3abe60e"
+  dependencies:
+    moment ">=1.6.0"
+
 react-redux@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"