From 97130830bf5b5061520975d28a91e577f490d807 Mon Sep 17 00:00:00 2001 From: VipinVIP Date: Mon, 25 Jan 2021 11:53:55 +0530 Subject: [PATCH 1/2] fix lintiong errors in shareInvite --- src/components/shareinvite.tsx | 103 ++++++++++++++++++--------------- 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/src/components/shareinvite.tsx b/src/components/shareinvite.tsx index 5664968..e3dfc46 100644 --- a/src/components/shareinvite.tsx +++ b/src/components/shareinvite.tsx @@ -3,14 +3,15 @@ import { InputGroup, Button, Popover, + Toast, OverlayTrigger, } from "react-bootstrap"; import copy from "copy-to-clipboard"; import { useState } from "react"; import { useSelector } from "react-redux"; -import { MailerAPI } from "../api/mailer" -import { MailerArgs } from "@models/poll"; -import { RootState } from "src/store/store"; +import { MailerArgs } from "../models/poll"; +import { RootState } from "../store/store"; +import { MailerAPI } from "../api/mailer"; const Invitation = (props: { pollid: string }): JSX.Element => { const { pollid } = props; @@ -30,67 +31,68 @@ const Invitation = (props: { pollid: string }): JSX.Element => { 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 (["Enter", "Tab", ","].includes(evt.key)) { evt.preventDefault(); - var value = currentEmail.trim(); + let value = currentEmail.trim(); if (value && isValid(value)) { - setEmails([...emailList, currentEmail]) - setCurrentEmail("") + setEmails([...emailList, currentEmail]); + setCurrentEmail(""); } } }; const handleChange = (evt: React.ChangeEvent): void => { - setCurrentEmail(evt.target.value) - setError("") + setCurrentEmail(evt.target.value); + setError(""); }; - const handleDelete = (email: any) => { - setEmails(emailList.filter(i => i !== email)) + /* added void and removed email:any to email:string ( remove this comment at last PR) */ + const handleDelete = (email: string): void => { + setEmails(emailList.filter((i) => i !== email)); }; const handlePaste = (evt: React.ClipboardEvent): void => { evt.preventDefault(); - var paste = evt.clipboardData.getData("text"); - var emails = paste.match(/[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/g); + let paste = evt.clipboardData.getData("text"); + let emails = paste.match(/[\w\d.-]+@[\w\d.-]+\.[\w\d.-]+/g); if (emails) { - var toBeAdded = emails.filter(email => !isInList(email)); + let toBeAdded = emails.filter((email) => !isInList(email)); setEmails([...emailList, ...toBeAdded]); } }; - - const isValid = (email: string): Boolean => { - let error = null; - if (isInList(email)) { - error = `${email} has already been added.`; - } - if (!isEmail(email)) { - error = `${email} is not a valid email address.`; - } - if (error) { - setError(error); - return false; - } - return true; - } - const isInList = (email: string): Boolean => { - return emailList.includes(email); - } - const isEmail = (email: string): Boolean => { - return /[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/.test(email); - } - const handleSubmit = async () => { - console.log(emailList) + /* added void below( remove this comment at last PR) */ + const handleSubmit = async (): Promise => { + /* console.log(emailList); which is also to be removed */ const mailerArgs: MailerArgs = { pollID: pollid, receiverIDs: emailList, senderID: loggedInUserEmailID, - } + }; const status = await MailerAPI.sendInvite(mailerArgs); if (status) { - alert("Successfully send invites") + alert("Successfully send invites"); } else { - alert("Internal Server Error") + alert("Internal Server Error"); } - } + }; return (
{ id="share" style={{ width: "90%", maxWidth: "500px" }} > -
{ - e.preventDefault(); - }}> + { + e.preventDefault(); + }} + > Invite participants by email
- {emailList.map(email => ( + {emailList.map((email) => (
{email} @@ -120,14 +126,17 @@ const Invitation = (props: { pollid: string }): JSX.Element => {
- + {error &&

{error}

} From ab16049c4f70ca2b856b4e01ae4d1dcfb6ba243d Mon Sep 17 00:00:00 2001 From: VipinVIP Date: Mon, 25 Jan 2021 11:55:43 +0530 Subject: [PATCH 2/2] removed js alerts with bootstrap alerts --- pages/poll/[id].tsx | 35 ++++++++++++++++++++++++++++++++-- src/components/shareinvite.tsx | 17 ++++++++++------- src/styles/index.css | 8 ++++++++ 3 files changed, 51 insertions(+), 9 deletions(-) diff --git a/pages/poll/[id].tsx b/pages/poll/[id].tsx index 3a7c1ef..dea60e9 100644 --- a/pages/poll/[id].tsx +++ b/pages/poll/[id].tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { GetServerSideProps } from "next"; -import { Row, Col, Jumbotron } from "react-bootstrap"; +import { Row, Col, Jumbotron, Alert } from "react-bootstrap"; import { useSelector } from "react-redux"; import dayjs from "dayjs"; import localizedFormat from "dayjs/plugin/localizedFormat"; @@ -36,6 +36,15 @@ const Poll = (props: { choices: [], }); const [finalChoice, setFinalChoice] = useState(); + const [showPopS, setShowPopS] = useState(false); + const [showPopF, setShowPopF] = useState(false); + + const handleChangeS = (newValS: boolean): void => { + setShowPopS(newValS); + }; + const handleChangeF = (newValF: boolean): void => { + setShowPopF(newValF); + }; return ( @@ -44,7 +53,11 @@ const Poll = (props: { {pollFromDB.open && loggedInUserEmailID === pollCreatorEmailID && ( - + )} @@ -64,6 +77,24 @@ const Poll = (props: { +
+ setShowPopS(false)} + dismissible + > + Successfully sent mails + + setShowPopF(false)} + dismissible + > + Mails not sent + +
); }; diff --git a/src/components/shareinvite.tsx b/src/components/shareinvite.tsx index e3dfc46..c354887 100644 --- a/src/components/shareinvite.tsx +++ b/src/components/shareinvite.tsx @@ -3,7 +3,6 @@ import { InputGroup, Button, Popover, - Toast, OverlayTrigger, } from "react-bootstrap"; import copy from "copy-to-clipboard"; @@ -13,7 +12,11 @@ import { MailerArgs } from "../models/poll"; import { RootState } from "../store/store"; import { MailerAPI } from "../api/mailer"; -const Invitation = (props: { pollid: string }): JSX.Element => { +const Invitation = (props: { + pollid: string; + onChangeS(arg: boolean): void; + onChangeF(arg: boolean): void; +}): JSX.Element => { const { pollid } = props; const pollurl = `http://localhost:3000/poll/${pollid}`; /* This should be replaced */ const loggedInUserEmailID = useSelector( @@ -88,15 +91,15 @@ const Invitation = (props: { pollid: string }): JSX.Element => { }; const status = await MailerAPI.sendInvite(mailerArgs); if (status) { - alert("Successfully send invites"); + props.onChangeS(true); } else { - alert("Internal Server Error"); + props.onChangeF(true); } }; return (
@@ -134,7 +137,7 @@ const Invitation = (props: { pollid: string }): JSX.Element => { onChange={handleChange} onPaste={handlePaste} /> - @@ -146,7 +149,7 @@ const Invitation = (props: { pollid: string }): JSX.Element => { - diff --git a/src/styles/index.css b/src/styles/index.css index 9ec3106..bb54ed8 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -642,6 +642,7 @@ h4 { .tag-item { background-color: #d4d5d6; + color: #000000; display: inline-block; font-size: 14px; font-weight: 300; @@ -734,3 +735,10 @@ h4 { -webkit-box-shadow: -1px 5px 43px 5px rgba(0, 0, 0, 0.31); box-shadow: -1px 5px 43px 5px rgba(0, 0, 0, 0.31); } +.alert-corner { + position: fixed; + bottom: 1px; + right: 5px; + max-height: 200px; + width: 400px; +}