Invite participants

src/api/mailer.ts

@@ -1,15 +1,13 @@
-import { STATUS_CODES } from "http";
-import { useSelector } from "react-redux";
-import { RootState } from "../../src/store/store";
+import { MailerArgs } from "@models/poll";
 
 class mailerAPI {
-    senderID: string;
+    //senderID: string;
     token: string;
     headers: Headers | string[][] | Record<string, string> | undefined;
     URL: string;
 
     constructor() {
-        this.senderID = "userIDfromStore"
+        //this.senderID = "userIDfromStore"
         this.token = "tokenfromStore"
         this.headers = {
             "Content-Type": "application/json",
@@ -33,15 +31,9 @@ class mailerAPI {
         };
     }
 
-    sendInvite = async (voteArgs: {
-        pollid: string;
-        recieverIDs: [string]
-    }) => {
-        const { pollid, recieverIDs } = voteArgs;
-        const payload = JSON.stringify({
-            pollid: pollid,
-            recieverIDs: recieverIDs
-        });
+    sendInvite = async (mailerArgs: MailerArgs) => {
+        const payload = JSON.stringify(mailerArgs);
+        console.log(payload)
         const { statusCode } = await this.httpPost(payload)
         return statusCode;
     }

src/components/Login.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Router from "next/router";
 import { useSelector, useDispatch } from "react-redux";
 import { Button } from "react-bootstrap";
 import { auth, firebase } from "./Firebase";
@@ -17,6 +18,7 @@ const Login = (): JSX.Element => {
       // token generated
       const token = user && (await user.getIdToken());
       dispatch(login(user.displayName, user.email, token));
+      Router.push(`/dashboard`);
     });
   };
 
@@ -36,14 +38,14 @@ const Login = (): JSX.Element => {
           Log in with Google
         </Button>
       ) : (
-        <Button
-          variant="outline-primary"
-          className="login-button"
-          onClick={googleLogout}
-        >
-          Logout
-        </Button>
-      )}
+          <Button
+            variant="outline-primary"
+            className="login-button"
+            onClick={googleLogout}
+          >
+            Logout
+          </Button>
+        )}
     </div>
   );
 };

src/components/shareinvite.tsx

@@ -6,11 +6,20 @@ import {
   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";
 
 const Invitation = (props: { pollid: string }): JSX.Element => {
   const { pollid } = props;
-  const pollurl = `http://localhost:3000/poll/${pollid}`;
-  /* This should be replaced */
+  const pollurl = `http://localhost:3000/poll/${pollid}`; /* This should be replaced */
+  const loggedInUserEmailID = useSelector(
+    (state: RootState) => state.authReducer.username
+  );
+  const [currentEmail, setCurrentEmail] = useState<string>("");
+  const [emailList, setEmails] = useState<string[]>([]);
+  const [error, setError] = useState<string>("");
 
   const handleCopy = (): void => {
     copy(pollurl);
@@ -20,20 +29,106 @@ const Invitation = (props: { pollid: string }): JSX.Element => {
       <Popover.Content>Copied</Popover.Content>
     </Popover>
   );
+  const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (["Enter", "Tab", ","].includes(evt.key)) {
+      evt.preventDefault();
+      var value = currentEmail.trim();
+      if (value && isValid(value)) {
+        setEmails([...emailList, currentEmail])
+        setCurrentEmail("")
+      }
+    }
+  };
+  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+    setCurrentEmail(evt.target.value)
+    setError("")
+  };
+  const handleDelete = (email: any) => {
+    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);
+    if (emails) {
+      var 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)
+    const mailerArgs: MailerArgs = {
+      pollID: pollid,
+      receiverIDs: emailList,
+      senderID: loggedInUserEmailID,
+    }
+    const status = await MailerAPI.sendInvite(mailerArgs);
+    if (status) {
+      alert("Successfully send invites")
+    } else {
+      alert("Internal Server Error")
+    }
+  }
+
   return (
     <div
       className="d-flex flex-column p-4 m-1 border"
       id="share"
       style={{ width: "90%", maxWidth: "500px" }}
     >
-      <Form>
+      <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 => (
+                <div className="tag-item" key={email}>
+                  {email}
+                  <button
+                    type="button"
+                    className="button"
+                    onClick={() => handleDelete(email)}
+                  >
+                    &times;
+                  </button>
+                </div>
+              ))}
+            </div>
           </Form.Label>
-          <Form.Control multiple type="email" placeholder="Enter emails" />
-          <Button className="my-2">Invite</Button>
+          <Form.Control
+            multiple type="email"
+            placeholder="Enter emails"
+            value={currentEmail}
+            onKeyDown={handleKeyDown}
+            onChange={handleChange}
+            onPaste={handlePaste}
+          />
+          <Button className="my-2" onClick={handleSubmit}>Invite</Button>
         </Form.Group>
+        {error && <p className="error">{error}</p>}
 
         <Form.Group className="text-center">
           <Form.Label className="font-weight-bold">Share Link</Form.Label>

src/models/poll.ts

@@ -43,3 +43,9 @@ export interface RocketMeetPollFromDB {
   updatedAt: string;
   __v: number;
 }
+
+export interface MailerArgs {
+  pollid: string;
+  recieverIDs: [string],
+  senderID: string
+}

src/styles/global.css

@@ -10,3 +10,14 @@ body {
 * {
   box-sizing: border-box;
 }
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #efefef;
+  border-radius: 2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #cccccc; 
+}

src/styles/index.css

@@ -155,4 +155,42 @@ a.ctl-button {
   padding: inherit;
   align-items: center;
   box-shadow: 1px 1px 20px 6px #f5f5f5;
+}
+
+/*Invite tags*/
+
+.error {
+  margin: 0;
+  font-size: 90%;
+  color: tomato;
+}
+
+.tag-item {
+  background-color: #d4d5d6;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 300;
+  border-radius: 30px;
+  height: 30px;
+  padding: 0 4px 0 1rem;
+  display: inline-flex;
+  align-items: center;
+  margin: 0 0.3rem 0.3rem 0;
+}
+
+.tag-item > .button {
+  background-color: white;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  margin-left: 10px;
+  font-weight: bold;
+  padding: 0;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }