174 lines
4.1 KiB
JavaScript
174 lines
4.1 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 { backend } from '../helpers/http-common';
|
|
import './styles/Invite.less';
|
|
import './styles/layout.less';
|
|
|
|
export default function Invite({ currentMeeting }) {
|
|
const [emailList, setEmailList] = useState([]);
|
|
const [contactDropdown, setContactDropdown] = useState([]);
|
|
const [status, setStatus] = useState({
|
|
error: null,
|
|
success: null,
|
|
message: '',
|
|
});
|
|
|
|
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) => {
|
|
setEmailList(value);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setContactDropdown([]);
|
|
setEmailList([]);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
// Create a list of participants to post
|
|
const participantsList = emailList.map((email) => {
|
|
return {
|
|
email: email,
|
|
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 postParticipant = (data) => {
|
|
return backend.post('/participants', data);
|
|
};
|
|
|
|
const requests = participantsList.map((participant) =>
|
|
postParticipant(participant),
|
|
);
|
|
|
|
Promise.all(requests)
|
|
.then(function (results) {
|
|
setStatus({
|
|
success: true,
|
|
error: false,
|
|
message: 'Participants successfully invited.',
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
setStatus({
|
|
error: true,
|
|
success: false,
|
|
message: "Participants couldn't be added.",
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<NavBar title='Invite participants' />
|
|
<Panel className={'app-container'}>
|
|
<Form className={'av-container'}>
|
|
<div className={'interval-selector'}>
|
|
{status.error || status.success ? (
|
|
<Message
|
|
showIcon
|
|
type={status.success ? 'success' : 'error'}
|
|
description={status.message}
|
|
/>
|
|
) : (
|
|
<Message
|
|
showIcon
|
|
type='info'
|
|
description='Add emails of participants.'
|
|
/>
|
|
)}
|
|
{/* {!status.error && (
|
|
|
|
)} */}
|
|
|
|
<TagPicker
|
|
block
|
|
creatable
|
|
searchable
|
|
data={contactDropdown}
|
|
value={emailList}
|
|
onSelect={(value) => handleSelect(value)}
|
|
onChange={(value) => handleChange(value)}
|
|
/>
|
|
{!status.success && (
|
|
<ButtonGroup justified>
|
|
<Button
|
|
appearance='ghost'
|
|
block
|
|
size='lg'
|
|
onClick={handleClear}
|
|
>
|
|
Clear selection
|
|
</Button>
|
|
<Button
|
|
appearance='primary'
|
|
size='lg'
|
|
block
|
|
onClick={() => handleSubmit()}
|
|
>
|
|
Send invites
|
|
</Button>
|
|
</ButtonGroup>
|
|
)}
|
|
{status.success && (
|
|
<ButtonGroup justified>
|
|
<Button
|
|
appearance='primary'
|
|
size='lg'
|
|
block
|
|
onClick={() => history.push('dashboard')}
|
|
>
|
|
Go to dashboard
|
|
</Button>
|
|
</ButtonGroup>
|
|
)}
|
|
</div>
|
|
</Form>
|
|
</Panel>
|
|
</>
|
|
);
|
|
}
|