diff --git a/pages/poll/[id].tsx b/pages/poll/[id].tsx index 5224b59..2f7c7f6 100644 --- a/pages/poll/[id].tsx +++ b/pages/poll/[id].tsx @@ -8,6 +8,7 @@ import { serverAPI } from "../../src/api/server"; import Layout from "../../src/components/Layout"; import PollInfo from "../../src/components/PollInfo"; import PollTable from "../../src/components/PollTable"; +import InviteMail from "../../src/components/InviteMail"; import { Choice, ChoiceFromDB, @@ -49,9 +50,17 @@ const Poll = (props: { loggedInUserEmailID === pollCreatorEmailID && ( )} + {!pollFromDB.open && + loggedInUserEmailID === pollCreatorEmailID && ( + + )} -
+
{ + const { pollid, polltitle, finalChoice } = props; + + const displayName = useSelector( + (state: RootState) => state.authReducer.displayName + ); + const loggedInUserEmailID = useSelector( + (state: RootState) => state.authReducer.username + ); + const token = useSelector((state: RootState) => state.authReducer.token); + const [currentEmail, setCurrentEmail] = useState(""); + const [emailList, setEmails] = useState([]); + const [error, setError] = useState(""); + + const [response, setResponse] = useState({ + status: false, + type: "null", + msg: "", + }); + + const isInList = (email: string): boolean => { + return emailList.includes(email); + }; + + const isEmail = (email: string): boolean => { + return /[\w\d.-]+@[\w\d.-]+\.[\w\d.-]+/.test(email); + }; + + const isValid = (email: string): boolean => { + let mailerror = null; + if (isInList(email)) { + mailerror = `${email} has already been added.`; + } + if (!isEmail(email)) { + mailerror = `${email} is not a valid email address.`; + } + if (mailerror) { + setError(mailerror); + return false; + } + return true; + }; + + const handleKeyDown = (evt: React.KeyboardEvent): void => { + if ([","].includes(evt.key)) { + evt.preventDefault(); + let value = currentEmail.trim(); + if (value && isValid(value)) { + setEmails([...emailList, value]); + setCurrentEmail(""); + } + } + }; + + const handleChange = (evt: React.ChangeEvent): void => { + setCurrentEmail(evt.target.value); + setError(""); + }; + + const handleDelete = (email: string): void => { + setEmails(emailList.filter((i) => i !== email)); + }; + + const handlePaste = (evt: React.ClipboardEvent): void => { + evt.preventDefault(); + let paste = evt.clipboardData.getData("text"); + let emails = paste.match(/[\w\d.-]+@[\w\d.-]+\.[\w\d.-]+/g); + if (emails) { + let toBeAdded = emails.filter((email) => !isInList(email)); + setEmails([...emailList, ...toBeAdded]); + } + }; + + const handleSubmit = async (): Promise => { + try { + let sendEmailsResponse; + if (finalChoice) { + const mailerEvArgs: MailerEventArgs = { + senderName: displayName, + pollTitle: polltitle, + finalOption: finalChoice, + receiverIDs: emailList, + }; + sendEmailsResponse = await mailerAPI.sendEventInvites(mailerEvArgs, token); + } else { + const mailerArgs: MailerPollArgs = { + pollID: pollid, + pollTitle: polltitle, + receiverIDs: emailList, + senderName: displayName, + senderEmailID: loggedInUserEmailID, + }; + sendEmailsResponse = await mailerAPI.sendPollInvites(mailerArgs, token); + } + if (sendEmailsResponse.statusCode === 200) { + setEmails([]); // emailList is cleared if mails are sent. + setResponse({ + status: true, + type: "success", + msg: "Emails successfully sent.", + }); + } else { + setResponse({ + status: true, + type: "error", + msg: "Unable to send emails. Please try again later.", + }); + } + } catch (err) { + setResponse({ + status: true, + type: "error", + msg: "Unable to send emails. Check your connection.", + }); + } + }; + + return ( +
+ + + Invite participants + + +
+ {emailList.map((email) => ( +
+ {email} + +
+ ))} + {error &&

{error}

} +
+ +
+ + setResponse({ status: false, type: "null", msg: "" }) + } + /> +
+ ); +}; + +export default InviteMail; diff --git a/src/components/ShareInvite.tsx b/src/components/ShareInvite.tsx index 685d156..9899bfa 100644 --- a/src/components/ShareInvite.tsx +++ b/src/components/ShareInvite.tsx @@ -6,12 +6,8 @@ import { OverlayTrigger, } from "react-bootstrap"; import copy from "copy-to-clipboard"; -import { useState } from "react"; -import { useSelector } from "react-redux"; -import ResponseMessage from "./ResponseMessage"; -import { MailerPollArgs } from "../models/poll"; -import { RootState } from "../store/store"; import { mailerAPI } from "../api/mailer"; +import InviteMail from "./InviteMail"; const ShareInvite = (props: { pollid: string; @@ -20,22 +16,6 @@ const ShareInvite = (props: { const { pollid } = props; const { polltitle } = props; const pollurl = `${mailerAPI.domain}/poll/${pollid}`; /* This should be replaced */ - const displayName = useSelector( - (state: RootState) => state.authReducer.displayName - ); - const loggedInUserEmailID = useSelector( - (state: RootState) => state.authReducer.username - ); - const token = useSelector((state: RootState) => state.authReducer.token); - const [currentEmail, setCurrentEmail] = useState(""); - const [emailList, setEmails] = useState([]); - const [error, setError] = useState(""); - - const [response, setResponse] = useState({ - status: false, - type: "null", - msg: "", - }); const handleCopy = (): void => { copy(pollurl); @@ -46,167 +26,44 @@ const ShareInvite = (props: { Copied! ); - - const isInList = (email: string): boolean => { - return emailList.includes(email); - }; - - const isEmail = (email: string): boolean => { - return /[\w\d.-]+@[\w\d.-]+\.[\w\d.-]+/.test(email); - }; - - const isValid = (email: string): boolean => { - let mailerror = null; - if (isInList(email)) { - mailerror = `${email} has already been added.`; - } - if (!isEmail(email)) { - mailerror = `${email} is not a valid email address.`; - } - if (mailerror) { - setError(mailerror); - return false; - } - return true; - }; - - const handleKeyDown = (evt: React.KeyboardEvent): void => { - if ([","].includes(evt.key)) { - evt.preventDefault(); - let value = currentEmail.trim(); - if (value && isValid(value)) { - setEmails([...emailList, value]); - setCurrentEmail(""); - } - } - }; - - const handleChange = (evt: React.ChangeEvent): void => { - setCurrentEmail(evt.target.value); - setError(""); - }; - - const handleDelete = (email: string): void => { - setEmails(emailList.filter((i) => i !== email)); - }; - - const handlePaste = (evt: React.ClipboardEvent): void => { - evt.preventDefault(); - let paste = evt.clipboardData.getData("text"); - let emails = paste.match(/[\w\d.-]+@[\w\d.-]+\.[\w\d.-]+/g); - if (emails) { - let toBeAdded = emails.filter((email) => !isInList(email)); - setEmails([...emailList, ...toBeAdded]); - } - }; - - const handleSubmit = async (): Promise => { - const mailerArgs: MailerPollArgs = { - pollID: pollid, - pollTitle: polltitle, - receiverIDs: emailList, - senderName: displayName, - senderEmailID: loggedInUserEmailID, - }; - try { - const sendEmailsResponse = await mailerAPI.sendPollInvites( - mailerArgs, - token - ); - if (sendEmailsResponse.statusCode === 200) { - setEmails([]); // emailList is cleared if mails are sent. - setResponse({ - status: true, - type: "success", - msg: "Emails successfully sent.", - }); - } else { - setResponse({ - status: true, - type: "error", - msg: "Unable to send emails. Please try again later.", - }); - } - } catch (err) { - setResponse({ - status: true, - type: "error", - msg: "Unable to send emails. Check your connection.", - }); - } - }; - + return ( -
+
{ e.preventDefault(); }} > - - Share link - - - - - - - - - - - - - Invite participants - - -
- {emailList.map((email) => ( -
- {email} - -
- ))} - {error &&

{error}

} -
- -
+ + + + + +
+ - - setResponse({ status: false, type: "null", msg: "" }) - } - />
); }; diff --git a/src/styles/index.css b/src/styles/index.css index 4241c5a..53fdb1d 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -469,6 +469,12 @@ h4 { padding-right: 3rem; } +.poll-invitemail { + margin-top: 2rem; + padding-left: 2rem; + padding-right: 3rem; +} + .poll-info-title { font-size: 3rem; font-weight: 700; @@ -507,7 +513,8 @@ h4 { padding-right: 0; } - .poll-shareinvite-content { + .poll-shareinvite-content, + .poll-invitemail { padding-left: 0; padding-right: 0; }