112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { Panel, Form, Button, ButtonGroup, Message, TagPicker } from 'rsuite';
|
|
|
|
import { NavBar } from '../components';
|
|
import './styles/Invite.less';
|
|
import './styles/layout.less';
|
|
|
|
export default function Invite() {
|
|
const [participants, setParticipants] = useState([]);
|
|
const [contactDropdown, setContactDropdown] = useState([]);
|
|
|
|
const history = useHistory();
|
|
|
|
const handleSelect = (value) => {
|
|
// TODO Verify if input contains an email
|
|
// Verify if email is already in the participants
|
|
let updatedContactDropdown = [...contactDropdown];
|
|
|
|
if (value.length > 0) {
|
|
// Find emails in text input
|
|
let emailRegex = /[-.\w]+@([\w-]+\.)+[\w-]+/g;
|
|
let emailsRaw = value[value.length - 1].match(emailRegex);
|
|
// Remove duplicates from the text input
|
|
let emails = [...new Set(emailsRaw)];
|
|
|
|
if (emails && emails.length > 1) {
|
|
// Delete input from participants
|
|
value.pop();
|
|
emails.forEach((email) => {
|
|
// add each email to participants
|
|
value.push(email);
|
|
|
|
// Create new contact and add it to dropdown
|
|
let newContact = {
|
|
label: email,
|
|
value: email,
|
|
// TODO add contact groups here
|
|
// see rsuite TagPicker doc
|
|
};
|
|
// Add it to the updated dropdown
|
|
updatedContactDropdown.push(newContact);
|
|
});
|
|
}
|
|
// Update dropdown
|
|
setContactDropdown(updatedContactDropdown);
|
|
}
|
|
};
|
|
|
|
const handleChange = (value) => {
|
|
setParticipants(value);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setContactDropdown([]);
|
|
setParticipants([]);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<NavBar title='Invite participants' />
|
|
<Panel className={'app-container'}>
|
|
<Form className={'av-container'}>
|
|
<div className={'interval-selector'}>
|
|
<Message
|
|
showIcon
|
|
type='info'
|
|
description='Add emails of participants. (Optional)'
|
|
/>
|
|
<TagPicker
|
|
block
|
|
creatable
|
|
searchable
|
|
data={contactDropdown}
|
|
value={participants}
|
|
onSelect={(value) => handleSelect(value)}
|
|
onChange={(value) => handleChange(value)}
|
|
/>
|
|
<ButtonGroup justified>
|
|
<Button
|
|
appearance='ghost'
|
|
block
|
|
size='lg'
|
|
onClick={handleClear}
|
|
>
|
|
Clear selection
|
|
</Button>
|
|
<Button appearance='primary' size='lg' block>
|
|
Send invites
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
<div className={'av-details'}>
|
|
<ButtonGroup justified>
|
|
<Button
|
|
appearance='primary'
|
|
size='lg'
|
|
block
|
|
onClick={() => {
|
|
history.push('availability');
|
|
}}
|
|
>
|
|
Add your availability
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Form>
|
|
</Panel>
|
|
</>
|
|
);
|
|
}
|