From b29e9c260b86493b1ac5caa04a5c750b7a847cc6 Mon Sep 17 00:00:00 2001
From: Ekin Dursun <ekindursun@gmail.com>
Date: Mon, 21 Sep 2020 03:02:04 +0300
Subject: [PATCH] Extract ViewNavigation component

Three files use same navigation structure, so I extracted it to a
component for DRY.
---
 src/datetime/DaysView.js       | 20 +++++++++-----------
 src/datetime/MonthsView.js     | 23 ++++++++++-------------
 src/datetime/ViewNavigation.js | 17 +++++++++++++++++
 src/datetime/YearsView.js      | 22 +++++++++-------------
 4 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/datetime/ViewNavigation.js

diff --git a/src/datetime/DaysView.js b/src/datetime/DaysView.js
index 73ec2b505..571a4767a 100644
--- a/src/datetime/DaysView.js
+++ b/src/datetime/DaysView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ViewNavigation from './ViewNavigation';
 
 export default class DaysView extends React.Component {
 	static defaultProps = {
@@ -30,17 +31,14 @@ export default class DaysView extends React.Component {
 
 	renderNavigation( date, locale ) {
 		return (
-			<tr>
-				<th className="rdtPrev" onClick={ () => this.props.navigate( -1, 'months' ) }>
-					<span>‹</span>
-				</th>
-				<th className="rdtSwitch" onClick={ () => this.props.showView( 'months' ) } colSpan={5} data-value={ this.props.viewDate.month() }>
-					{ locale.months( date ) + ' ' + date.year() }
-				</th>
-				<th className="rdtNext" onClick={ () => this.props.navigate( 1, 'months' ) }>
-					<span>›</span>
-				</th>
-			</tr>
+			<ViewNavigation
+				onClickPrev={ () => this.props.navigate( -1, 'months' ) }
+				onClickSwitch={ () => this.props.showView( 'months' ) }
+				onClickNext={ () => this.props.navigate( 1, 'months' ) }
+				switchContent={ locale.months( date ) + ' ' + date.year() }
+				switchColSpan={5}
+				switchProps={ { 'data-value': this.props.viewDate.month() } }
+			/>
 		);
 	}
 
diff --git a/src/datetime/MonthsView.js b/src/datetime/MonthsView.js
index a215451a6..6bb8f5151 100644
--- a/src/datetime/MonthsView.js
+++ b/src/datetime/MonthsView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ViewNavigation from './ViewNavigation';
 
 export default class MonthsView extends React.Component {
 	render() {
@@ -6,7 +7,7 @@ export default class MonthsView extends React.Component {
 			<div className="rdtMonths">
 				<table>
 					<thead>
-						{ this.renderHeader() }
+						{ this.renderNavigation() }
 					</thead>
 				</table>
 				<table>
@@ -18,21 +19,17 @@ export default class MonthsView extends React.Component {
 		);
 	}
 
-	renderHeader() {
+	renderNavigation() {
 		let year = this.props.viewDate.year();
 
 		return (
-			<tr>
-				<th className="rdtPrev" onClick={ () => this.props.navigate( -1, 'years' ) }>
-					<span>‹</span>
-				</th>
-				<th className="rdtSwitch" onClick={ () => this.props.showView( 'years' ) } colSpan="2" data-value={ year } >
-					{ year }
-				</th>
-				<th className="rdtNext" onClick={ () => this.props.navigate( 1, 'years' ) }>
-					<span>›</span>
-				</th>
-			</tr>
+			<ViewNavigation
+				onClickPrev={ () => this.props.navigate( -1, 'years' ) }
+				onClickSwitch={ () => this.props.showView( 'years' ) }
+				onClickNext={ () => this.props.navigate( 1, 'years' ) }
+				switchContent={ year }
+				switchColSpan="2"
+			/>
 		);
 	}
 
diff --git a/src/datetime/ViewNavigation.js b/src/datetime/ViewNavigation.js
new file mode 100644
index 000000000..a04d63454
--- /dev/null
+++ b/src/datetime/ViewNavigation.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function ViewNavigation( { onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps } ) {
+	return (
+		<tr>
+			<th className="rdtPrev" onClick={ onClickPrev }>
+				<span>‹</span>
+			</th>
+			<th className="rdtSwitch" colSpan={ switchColSpan } onClick={ onClickSwitch } {...switchProps}>
+				{ switchContent }
+			</th>
+			<th className="rdtNext" onClick={ onClickNext }>
+				<span>›</span>
+			</th>
+		</tr>
+	);
+}
diff --git a/src/datetime/YearsView.js b/src/datetime/YearsView.js
index bdc8d3967..e767a3c7b 100644
--- a/src/datetime/YearsView.js
+++ b/src/datetime/YearsView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ViewNavigation from './ViewNavigation';
 
 export default class YearsView extends React.Component {
 	render() {
@@ -8,7 +9,7 @@ export default class YearsView extends React.Component {
 			<div className="rdtYears">
 				<table>
 					<thead>
-						{ this.renderHeader( viewYear ) }
+						{ this.renderNavigation( viewYear ) }
 					</thead>
 				</table>
 				<table>
@@ -20,19 +21,14 @@ export default class YearsView extends React.Component {
 		);
 	}
 
-	renderHeader( viewYear ) {
+	renderNavigation( viewYear ) {
 		return (
-			<tr>
-				<th className="rdtPrev" onClick={ () => this.props.navigate( -10, 'years' ) }>
-					<span>‹</span>
-				</th>
-				<th className="rdtSwitch" onClick={ () => this.props.showView( 'years' ) }>
-					{ `${viewYear}-${viewYear + 9}` }
-				</th>
-				<th className="rdtNext" onClick={ () => this.props.navigate( 10, 'years' ) }>
-					<span>›</span>
-				</th>
-			</tr>
+			<ViewNavigation
+				onClickPrev={ () => this.props.navigate( -10, 'years' ) }
+				onClickSwitch={ () => this.props.showView( 'years' ) }
+				onClickNext={ () => this.props.navigate( 10, 'years' ) }
+				switchContent={ `${viewYear}-${viewYear + 9}` }
+			/>
 		);
 	}