aboutsummaryrefslogtreecommitdiff
path: root/src/client/react
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react')
-rw-r--r--src/client/react/components/presentational/WeekDisplay.js26
-rw-r--r--src/client/react/components/presentational/WeekSelector.js25
2 files changed, 33 insertions, 18 deletions
diff --git a/src/client/react/components/presentational/WeekDisplay.js b/src/client/react/components/presentational/WeekDisplay.js
new file mode 100644
index 0000000..38125b2
--- /dev/null
+++ b/src/client/react/components/presentational/WeekDisplay.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class WeekDisplay extends React.Component {
+ static propTypes = {
+ selectedWeek: PropTypes.number.isRequired,
+ currentWeek: PropTypes.number.isRequired,
+ }
+
+ render() {
+ const { selectedWeek, currentWeek } = this.props;
+
+ switch (selectedWeek) {
+ case currentWeek:
+ return `Huidige week • ${selectedWeek}`;
+ case currentWeek + 1:
+ return `Volgende week • ${selectedWeek}`;
+ case currentWeek - 1:
+ return `Vorige week • ${selectedWeek}`;
+ default:
+ return `Week ${selectedWeek}`;
+ }
+ }
+}
+
+export default WeekDisplay;
diff --git a/src/client/react/components/presentational/WeekSelector.js b/src/client/react/components/presentational/WeekSelector.js
index 9f69121..e47a175 100644
--- a/src/client/react/components/presentational/WeekSelector.js
+++ b/src/client/react/components/presentational/WeekSelector.js
@@ -28,6 +28,7 @@ import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward';
import purifyWeek from '../../lib/purifyWeek';
import './WeekSelector.scss';
+import WeekDisplay from './WeekDisplay';
class WeekSelector extends React.Component {
static propTypes = {
@@ -36,23 +37,6 @@ class WeekSelector extends React.Component {
setWeek: PropTypes.func.isRequired,
};
- getWeekText() {
- const { week } = this.props;
-
- const currentWeek = moment().week();
-
- switch (week) {
- case currentWeek:
- return `Huidige week • ${week}`;
- case currentWeek + 1:
- return `Volgende week • ${week}`;
- case currentWeek - 1:
- return `Vorige week • ${week}`;
- default:
- return `Week ${week}`;
- }
- }
-
updateWeek(change) {
const { week, setWeek } = this.props;
const newWeek = purifyWeek(week + change);
@@ -62,13 +46,18 @@ class WeekSelector extends React.Component {
}
render() {
+ const { week } = this.props;
+
return (
<div className="WeekSelector">
<button type="button" onClick={() => this.updateWeek(-1)}>
<ArrowBackIcon />
</button>
<div className="text">
- {this.getWeekText()}
+ <WeekDisplay
+ selectedWeek={week}
+ currentWeek={moment().week()}
+ />
</div>
<button type="button" onClick={() => this.updateWeek(+1)}>
<ArrowForwardIcon />