frontend/src/screens/Invite.js

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, currentUser }) {
	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,
				// Info for invite email
				senderUsername: currentUser.username,
				meetingTitle: currentMeeting.title,
			};
		});

		// 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>
		</>
	);
}