142 lines
3.4 KiB
JavaScript
142 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import { Panel, Form, Button, ButtonGroup, Message, TagPicker } from 'rsuite';
|
|
|
|
import NavBar from '../../components/Navbar/NavBar';
|
|
import './Invite.less';
|
|
|
|
export default function Invite({ title }) {
|
|
const [participants, setParticipants] = useState([]);
|
|
const [contactDropdown, setContactDropdown] = useState([]);
|
|
|
|
const history = useHistory();
|
|
|
|
useEffect(() => {
|
|
console.log('useEffect participants: ', participants);
|
|
console.log('useEffect contactDropdown: ', contactDropdown);
|
|
}, [participants, contactDropdown]);
|
|
|
|
const handleSelect = (value) => {
|
|
// TODO Verify if input contains an email
|
|
// TODO 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={title} />
|
|
<Panel style={containerStyle}>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const containerStyle = {
|
|
// TODO Move to a .less file
|
|
maxWidth: '1200px',
|
|
margin: '30px auto',
|
|
backgroundColor: 'rgba(255,255,255,0.6)',
|
|
};
|
|
|
|
// TODO Remove fake data
|
|
// const contactsList = [
|
|
// {
|
|
// label: 'rui@protonmail.com',
|
|
// value: 'rui@protonmail.com',
|
|
// },
|
|
// {
|
|
// label: 'ln@armada.digital',
|
|
// value: 'ln@armada.digital',
|
|
// },
|
|
// {
|
|
// label: 'serge@goldwicht.be',
|
|
// value: 'serge@goldwicht.be',
|
|
// },
|
|
// {
|
|
// label: 'penkova@penkova.cc',
|
|
// value: 'penkova@penkova.cc',
|
|
// },
|
|
// ];
|