155 lines
3.9 KiB
JavaScript
155 lines
3.9 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([]);
|
|
};
|
|
|
|
// const handleSubmit = () => {
|
|
// // Create a list of participants to post
|
|
// const participantsList = participants.map((participant) => {
|
|
// //
|
|
|
|
// return {
|
|
// account_id: '',
|
|
// meeting_id: currentMeeting.id,
|
|
// quorum: 0, // update when implementing functionality
|
|
// mandatory: false, // update when implementing functionality
|
|
// host: 0, // update when implementing functionality
|
|
// answered: 0,
|
|
// };
|
|
// });
|
|
|
|
// // Create participants post request
|
|
// const postAvailability = (data) => {
|
|
// return backend.post('/participants', data);
|
|
// };
|
|
|
|
// const requests = participantsList.map((event) =>
|
|
// postAvailability(event),
|
|
// );
|
|
|
|
// Promise.all(requests)
|
|
// .then(function (results) {
|
|
// // Add confirmation message
|
|
// setStatus({
|
|
// success: true,
|
|
// error: false,
|
|
// message: 'Your availability has been added to the meeting.',
|
|
// });
|
|
// })
|
|
// .catch((error) => {
|
|
// setStatus({
|
|
// error: true,
|
|
// success: false,
|
|
// message:
|
|
// "Your availability couldn't be added to the meeting.",
|
|
// });
|
|
// });
|
|
// };
|
|
|
|
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 onClick={() => console.log("boo")}>
|
|
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>
|
|
</>
|
|
);
|
|
}
|