Extract <WeekDisplay /> from <WeekSelector />

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 />