diff --git a/src/assets/data/durations.js b/src/assets/data/durations.js new file mode 100644 index 0000000..7e1b1f5 --- /dev/null +++ b/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'} +]; diff --git a/src/components/General/TimezonePicker.js b/src/components/General/TimezonePicker.js index 511c58f..c11b718 100644 --- a/src/components/General/TimezonePicker.js +++ b/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]); diff --git a/src/screens/Schedule.js b/src/screens/Schedule.js index 2b3e000..a3b406f 100644 --- a/src/screens/Schedule.js +++ b/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 (

Schedule a meeting

@@ -23,6 +46,19 @@ export default function Schedule() { + + + + + +
+ {durations[durationIdx].label} +
+ + + +
+
);