99 lines
2.3 KiB
JavaScript
99 lines
2.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Redirect } from 'react-router-dom';
|
|
|
|
import {
|
|
Panel,
|
|
Form,
|
|
FormControl,
|
|
ControlLabel,
|
|
Button,
|
|
ButtonGroup,
|
|
Message,
|
|
FormGroup,
|
|
} from 'rsuite';
|
|
|
|
import { NavBar, TimezonePicker, IntervalSelector } from '../components';
|
|
import './styles/Availability.less';
|
|
import './styles/layout.less';
|
|
|
|
export default function Availability({ possibleDates }) {
|
|
const [availability, setAvailability] = useState([]);
|
|
|
|
const handleClear = () => {
|
|
setAvailability([]);
|
|
};
|
|
|
|
const handleSelect = ({ start, end }) => {
|
|
let updatedEvents = [];
|
|
let newAvailability = {
|
|
start: start,
|
|
end: end,
|
|
};
|
|
updatedEvents.push(newAvailability);
|
|
setAvailability([...availability, ...updatedEvents]);
|
|
};
|
|
|
|
if(!possibleDates) {
|
|
return <Redirect to='/schedule' />
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<NavBar title='Add your availability' />
|
|
<Panel className={'app-container'}>
|
|
<Form className={'av-container'}>
|
|
<div className={'av-details'}>
|
|
<FormGroup>
|
|
<ControlLabel>Earliest time</ControlLabel>
|
|
<FormControl name='earliest-time' type='text' />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<ControlLabel>Latest time</ControlLabel>
|
|
<FormControl name='latest-time' type='text' />
|
|
</FormGroup>
|
|
<FormGroup className='av-timezone'>
|
|
<ControlLabel>Timezone</ControlLabel>
|
|
<TimezonePicker />
|
|
</FormGroup>
|
|
<div className='av-controls'>
|
|
<ButtonGroup justified>
|
|
<Button
|
|
appearance='ghost'
|
|
block
|
|
size='lg'
|
|
disabled={availability.length === 0}
|
|
onClick={() => handleClear()}
|
|
>
|
|
Clear selection
|
|
</Button>
|
|
<Button
|
|
appearance='primary'
|
|
size='lg'
|
|
block
|
|
disabled={availability.length === 0}
|
|
>
|
|
Save your availability
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</div>
|
|
<div className={'interval-selector'}>
|
|
<Message
|
|
showIcon
|
|
type='info'
|
|
description='Select your availability on the calendar.'
|
|
/>
|
|
<IntervalSelector
|
|
selectedDates={possibleDates}
|
|
availability={availability}
|
|
setAvailability={setAvailability}
|
|
handleSelect={handleSelect}
|
|
handleClear={handleClear}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</Panel>
|
|
</>
|
|
);
|
|
}
|