Complete Invite backend requests

src/screens/Invite.js

@@ -3,12 +3,18 @@ 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() {
-	const [participants, setParticipants] = useState([]);
+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();
 
@@ -48,56 +54,52 @@ export default function Invite() {
 	};
 
 	const handleChange = (value) => {
-		setParticipants(value);
+		setEmailList(value);
 	};
 
 	const handleClear = () => {
 		setContactDropdown([]);
-		setParticipants([]);
+		setEmailList([]);
 	};
 
-	// const handleSubmit = () => {
-	// 	// Create a list of participants to post
-	// 	const participantsList = participants.map((participant) => {
-	// 		// 
+	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,
+			};
+		});
 
-	// 		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 postParticipant = (data) => {
+			return backend.post('/participants', data);
+		};
 
-	// 	// Create participants post request
-	// 	const postAvailability = (data) => {
-	// 		return backend.post('/participants', data);
-	// 	};
+		const requests = participantsList.map((participant) =>
+			postParticipant(participant),
+		);
 
-	// 	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.",
-	// 			});
-	// 		});
-	// };
+		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 (
 		<>
@@ -105,47 +107,64 @@ export default function Invite() {
 			<Panel className={'app-container'}>
 				<Form className={'av-container'}>
 					<div className={'interval-selector'}>
-						<Message
-							showIcon
-							type='info'
-							description='Add emails of participants. (Optional)'
-						/>
+						{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={participants}
+							value={emailList}
 							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>
+						{!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>