diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/client/react/components/container/WeekSelector.js | 34 | ||||
| -rw-r--r-- | src/client/react/components/page/User.js | 11 | ||||
| -rw-r--r-- | src/client/react/index.js | 3 | ||||
| -rw-r--r-- | webpack.config.js | 4 | ||||
| -rw-r--r-- | yarn.lock | 22 |
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 = { @@ -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" |