Implement TimezonePicker component

src/components/General/TimezonePicker.js

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import { timezones } from '../../assets/data/timezonesFlat';
+import { InputPicker } from 'rsuite';
+
+export default function TimezonePicker(props) {
+	const [timezone, setTimezone] = useState('');
+
+	useEffect(() => {
+		console.log('useEffect:', timezone);
+	}, [timezone]);
+
+	return (
+		<InputPicker
+			data={timezones}
+			// cleanable={false}
+			style={{ width: 320 }}
+			labelKey='timezone'
+			groupBy='area'
+			placeholder='Type to search and select your timezone'
+			onSelect={(value, item, event) => setTimezone(item.timezone)}
+			onClean={(event) => setTimezone('')}
+			value={timezone}
+			valueKey='timezone'
+		/>
+	);
+}

src/components/General/TimezonesCascader.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { timezones } from '../../assets/data/timezones';
-import { Cascader } from 'rsuite';
-
-export default function TzDropdown() {
-	// do something here
-	// const handleSelect = event => {
-	// 	console.log(event)
-	// }
-
-	return (
-		<>
-			<h1>Aha!</h1>
-			<Cascader data={timezones} style={{ width: 224 }} />
-		</>
-	);
-}

src/screens/Register.js

@@ -9,7 +9,7 @@ import {
 	Button,
 } from 'rsuite';
 
-import TzDropdown from '../components/General/TimezonesCascader';
+import TimezonePicker from '../components/General/TimezonePicker';
 
 const boxStyle = {
 	maxWidth: 373,
@@ -43,7 +43,7 @@ export default function Register() {
 					/>
 				</FormGroup>
 				<FormGroup>
-					<TzDropdown />
+					<TimezonePicker />
 				</FormGroup>
 				<FormGroup>
 					<FormControl

src/screens/Schedule.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import TzDropdown from '../components/General/TimezonesCascader';
+import TimezonePicker from '../components/General/TimezonePicker';
 import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
 
 export default function Schedule() {
 	return (
 		<Container>
 			<h3>Schedule a meeting</h3>
-			<Form horizontal>
+			<Form>
 				<FormGroup>
 					<FormControl name='title' type='text' placeholder='title' />
 				</FormGroup>
@@ -21,7 +21,7 @@ export default function Schedule() {
 					/>
 				</FormGroup>
 				<FormGroup>
-					<TzDropdown />
+					<TimezonePicker />
 				</FormGroup>
 			</Form>
 		</Container>