Add duration selector

src/assets/data/durations.js

@@ -0,0 +1,9 @@
+export const durations = [
+	{ duration: 30, label: '30min' },
+	{ duration: 60, label: '1h' },
+    { duration: 90, label: '1h30'},
+    { duration: 120, label: '2h'},
+    { duration: 150, label: '2h30'},
+    { duration: 180, label: '3h'},
+    { duration: 240, label: '4h'}
+];

src/components/General/TimezonePicker.js

@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { timezones } from '../../assets/data/timezonesFlat';
 import { InputPicker } from 'rsuite';
 
-export default function TimezonePicker(props) {
+export default function TimezonePicker() {
 	const [timezone, setTimezone] = useState('');
 
+	// TODO Remove this if not used
 	useEffect(() => {
 		console.log('useEffect:', timezone);
 	}, [timezone]);

src/screens/Schedule.js

@@ -1,9 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+	Container,
+	Form,
+	FormControl,
+	FormGroup,
+	InputGroup,
+	Input,
+	Icon,
+} from 'rsuite';
 
 import TimezonePicker from '../components/General/TimezonePicker';
-import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
+import { durations } from '../assets/data/durations';
 
 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>
@@ -23,6 +46,19 @@ export default function Schedule() {
 				<FormGroup>
 					<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>
+				</FormGroup>
 			</Form>
 		</Container>
 	);