From 19534b4770b4f4097b02f5fa021a24822b12d907 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 26 Jan 2018 20:30:34 +0100 Subject: Add week selector --- .../react/components/container/WeekSelector.js | 34 ++++++++++++++++++++++ src/client/react/components/page/User.js | 11 ++++++- src/client/react/index.js | 3 ++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/client/react/components/container/WeekSelector.js (limited to 'src/client/react') 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 ( +
+ + Week {urlWeek.week()} + +
+ ); +}; + +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 }) => {
+
@@ -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( -- cgit v1.1