124 lines
2.7 KiB
JavaScript
124 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import {
|
|
Panel,
|
|
Form,
|
|
FormControl,
|
|
ControlLabel,
|
|
Button,
|
|
ButtonGroup,
|
|
Message,
|
|
FormGroup,
|
|
} from 'rsuite';
|
|
import { DateTime } from 'luxon';
|
|
|
|
import NavBar from '../../components/Navbar/NavBar';
|
|
import TimezonePicker from '../../components/General/TimezonePicker';
|
|
import IntervalSelector from '../../components/Availability/IntervalSelector';
|
|
|
|
import './Availability.less';
|
|
|
|
const eventsList = [
|
|
{
|
|
start: '2020-06-10',
|
|
display: 'background',
|
|
},
|
|
{
|
|
start: '2020-06-11',
|
|
display: 'background',
|
|
},
|
|
{
|
|
start: '2020-06-12',
|
|
display: 'background',
|
|
},
|
|
{
|
|
start: '2020-06-13',
|
|
display: 'background',
|
|
},
|
|
];
|
|
|
|
export default function Availability({ title }) {
|
|
// const [eventsList, setEventsList] = useState([]);
|
|
const [availability, setAvailability] = useState([]);
|
|
|
|
const handleClear = () => {
|
|
setAvailability([]);
|
|
};
|
|
|
|
const handleSelect = () => {
|
|
console.log('Congrats, you have selected!');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<NavBar title={title} />
|
|
<Panel style={containerStyle}>
|
|
<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 availibility on the calendar.'
|
|
/>
|
|
<IntervalSelector
|
|
eventsList={eventsList}
|
|
handleSelect={handleSelect}
|
|
handleClear={handleClear}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</Panel>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Convert events to Luxon Datetime objects
|
|
const eventsToDates = (events) => {
|
|
let dates = [];
|
|
events.forEach((event) => {
|
|
dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
|
|
});
|
|
return dates;
|
|
};
|
|
|
|
const containerStyle = {
|
|
// TODO Move to a .less file
|
|
maxWidth: '1200px',
|
|
margin: '30px auto',
|
|
backgroundColor: 'rgba(255,255,255,0.6)',
|
|
};
|