Extract DurationSelector to its own component

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>
+	);
+}

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' }}>
+					<DurationSelector />
-						<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>
 				</FormGroup>
+				<FormGroup>
 					<DaySelector />
-				<FormGroup></FormGroup>
+				</FormGroup>
 			</Form>
 		</Container>
 	);