aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/WeekSelector.js34
-rw-r--r--src/client/react/components/page/User.js11
2 files changed, 44 insertions, 1 deletions
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;