Share invite

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<Choice | undefined>();
+  const [showPopS, setShowPopS] = useState<boolean>(false);
+  const [showPopF, setShowPopF] = useState<boolean>(false);
+
+  const handleChangeS = (newValS: boolean): void => {
+    setShowPopS(newValS);
+  };
+  const handleChangeF = (newValF: boolean): void => {
+    setShowPopF(newValF);
+  };
 
   return (
     <Layout>
@@ -44,7 +53,11 @@ const Poll = (props: {
           <Jumbotron className="poll-info">
             <PollInfo poll={pollFromDB} />
             {pollFromDB.open && loggedInUserEmailID === pollCreatorEmailID && (
-              <ShareInvite pollid={pollid} />
+              <ShareInvite
+                pollid={pollid}
+                onChangeS={handleChangeS}
+                onChangeF={handleChangeF}
+              />
             )}
           </Jumbotron>
         </Col>
@@ -64,6 +77,24 @@ const Poll = (props: {
           </Jumbotron>
         </Col>
       </Row>
+      <div className="alert-corner">
+        <Alert
+          variant="success"
+          show={showPopS}
+          onClose={() => setShowPopS(false)}
+          dismissible
+        >
+          <Alert.Heading>Successfully sent mails</Alert.Heading>
+        </Alert>
+        <Alert
+          variant="danger"
+          show={showPopF}
+          onClose={() => setShowPopF(false)}
+          dismissible
+        >
+          <Alert.Heading>Mails not sent</Alert.Heading>
+        </Alert>
+      </div>
     </Layout>
   );
 };

src/components/shareinvite.tsx

@@ -8,11 +8,15 @@ import {
 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 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(
@@ -30,88 +34,93 @@ const Invitation = (props: { pollid: string }): JSX.Element => {
       <Popover.Content>Copied</Popover.Content>
     </Popover>
   );
+  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<HTMLInputElement>): 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<HTMLInputElement>): 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<HTMLInputElement>): 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<void> => {
+    /* 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")
+      props.onChangeS(true);
     } else {
-      alert("Internal Server Error")
+      props.onChangeF(true);
     }
-  }
+  };
 
   return (
     <div
-      className="d-flex flex-column p-4 m-1 border"
+      className="d-flex flex-column p-4 m-1 mt-4 border"
       id="share"
       style={{ width: "90%", maxWidth: "500px" }}
     >
-      <Form onSubmit={(e): void => {
-        e.preventDefault();
-      }}>
+      <Form
+        onSubmit={(e): void => {
+          e.preventDefault();
+        }}
+      >
         <Form.Group controlId="formBasicEmail" className="text-center">
           <Form.Label className="font-weight-bold">
             Invite participants by email
             <div className="emailList">
-              {emailList.map(email => (
+              {emailList.map((email) => (
                 <div className="tag-item" key={email}>
                   {email}
                   <button
                     type="button"
                     className="button"
-                    onClick={() => handleDelete(email)}
+                    onClick={(): void =>
+                      handleDelete(email)
+                    } /* added void ( remove this comment at last PR) */
                   >
                     &times;
                   </button>
@@ -120,14 +129,17 @@ const Invitation = (props: { pollid: string }): JSX.Element => {
             </div>
           </Form.Label>
           <Form.Control
-            multiple type="email"
+            multiple
+            type="email"
             placeholder="Enter emails"
             value={currentEmail}
             onKeyDown={handleKeyDown}
             onChange={handleChange}
             onPaste={handlePaste}
           />
-          <Button className="my-2" onClick={handleSubmit}>Invite</Button>
+          <Button className="my-2" variant="light" onClick={handleSubmit}>
+            Invite
+          </Button>
         </Form.Group>
         {error && <p className="error">{error}</p>}
 
@@ -137,7 +149,7 @@ const Invitation = (props: { pollid: string }): JSX.Element => {
             <Form.Control type="text" readOnly defaultValue={pollurl} />
             <InputGroup.Append>
               <OverlayTrigger trigger="click" placement="top" overlay={popover}>
-                <Button variant="outline-secondary" onClick={handleCopy}>
+                <Button variant="light" onClick={handleCopy}>
                   copy
                 </Button>
               </OverlayTrigger>

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;
+}