From f03fc0c461f584c1622e200c6b5f41993f7881e1 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Tue, 2 Jun 2020 11:17:10 +0200
Subject: [PATCH] Extract DurationSelector to its own component

---
 src/components/Schedule/DurationSelector.js | 31 ++++++++++++++++++
 src/screens/Schedule.js                     | 35 +++++----------------
 2 files changed, 38 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Schedule/DurationSelector.js

diff --git a/src/components/Schedule/DurationSelector.js b/src/components/Schedule/DurationSelector.js
new file mode 100644
index 0000000..42c4739
--- /dev/null
+++ b/src/components/Schedule/DurationSelector.js
@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+import { InputGroup, Icon } from 'rsuite';
+import { durations } from '../../assets/data/durations';
+
+export default function DurationSelector() {
+	const [durationIdx, setDurationIdx] = useState(0);
+
+	const handleIncrement = () => {
+		if (durationIdx <= durations.length - 2) {
+			setDurationIdx(durationIdx + 1);
+		}
+	};
+	const handleDecrement = () => {
+		if (durationIdx > 0) {
+			setDurationIdx(durationIdx - 1);
+		}
+	};
+	return (
+		<InputGroup style={{ background: 'white' }}>
+			<InputGroup.Button onClick={handleDecrement}>
+				<Icon icon='minus' />
+			</InputGroup.Button>
+			<div style={{ textAlign: 'center', paddingTop: 5 }}>
+				{durations[durationIdx].label}
+			</div>
+			<InputGroup.Button onClick={handleIncrement}>
+				<Icon icon='plus' />
+			</InputGroup.Button>
+		</InputGroup>
+	);
+}
diff --git a/src/screens/Schedule.js b/src/screens/Schedule.js
index eeb88e9..35a6cc3 100644
--- a/src/screens/Schedule.js
+++ b/src/screens/Schedule.js
@@ -4,29 +4,17 @@ import {
 	Form,
 	FormControl,
 	FormGroup,
-	InputGroup,
 	Input,
+	Divider,
 	Icon,
 } from 'rsuite';
+import { DateTime } from 'luxon';
 
 import TimezonePicker from '../components/General/TimezonePicker';
 import DaySelector from '../components/Schedule/DaySelector';
-import { durations } from '../assets/data/durations';
+import DurationSelector from '../components/Schedule/DurationSelector';
 
 export default function Schedule() {
-	const [durationIdx, setDurationIdx] = useState(0);
-
-	const handleIncrement = () => {
-		if (durationIdx <= durations.length - 2) {
-			setDurationIdx(durationIdx + 1);
-		}
-	};
-	const handleDecrement = () => {
-		if (durationIdx > 0) {
-			setDurationIdx(durationIdx - 1);
-		}
-	};
-
 	return (
 		<Container>
 			<h3>Schedule a meeting</h3>
@@ -47,20 +35,11 @@ export default function Schedule() {
 					<TimezonePicker />
 				</FormGroup>
 				<FormGroup style={{ width: 200 }}>
-					<InputGroup style={{ background: 'white' }}>
-						<InputGroup.Button onClick={handleDecrement}>
-							<Icon icon='minus' />
-						</InputGroup.Button>
-						<div style={{ textAlign: 'center', paddingTop: 5 }}>
-							{durations[durationIdx].label}
-						</div>
-						<InputGroup.Button onClick={handleIncrement}>
-							<Icon icon='plus' />
-						</InputGroup.Button>
-					</InputGroup>
+					<DurationSelector />
+				</FormGroup>
+				<FormGroup>
+					<DaySelector />
 				</FormGroup>
-				<DaySelector />
-				<FormGroup></FormGroup>
 			</Form>
 		</Container>
 	);