From 7e53b28fda33761d9a26c05c9804c0388bc5d131 Mon Sep 17 00:00:00 2001
From: Anand <anandbaburajan@gmail.com>
Date: Sat, 30 Jan 2021 21:10:04 +0530
Subject: [PATCH] invite

---
 pages/404.tsx                                 |  13 +-
 pages/_app.tsx                                |   2 +-
 pages/poll/[id].tsx                           |  38 +----
 src/components/PollInfo.tsx                   |   2 +-
 src/components/PollsList.tsx                  |  26 +--
 src/components/ResponseMessage.tsx            |  24 +--
 .../{shareinvite.tsx => ShareInvite.tsx}      | 148 ++++++++++--------
 src/components/SubmitChoices.tsx              |   2 +-
 src/components/SubmitFinalChoice.tsx          |   2 +-
 src/styles/index.css                          |  82 +++++++++-
 10 files changed, 210 insertions(+), 129 deletions(-)
 rename src/components/{shareinvite.tsx => ShareInvite.tsx} (65%)

diff --git a/pages/404.tsx b/pages/404.tsx
index dcc46df..1fe7670 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -5,14 +5,17 @@ import Layout from "../src/components/Layout";
 const NotFound = (): JSX.Element => {
   return (
     <Layout>
-      <Container fluid>
-        <Row>
+      <Container className="outer-container" fluid>
+        <Row className="inner-container">
           <Col>
-            <h1>Page not found</h1>
+            <h1>404</h1>
+            <h3>We can't seem to find the page you're looking for.</h3>
             <h3>
+              But here's the link to our
               <Link href="/">
-                <a>Landing page</a>
-              </Link>
+                <a> homepage!</a>
+              </Link>{" "}
+              :D
             </h3>
           </Col>
         </Row>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f261149..8b25c28 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -12,7 +12,7 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => {
   const persistor = persistStore(store);
 
   return (
-    <PersistGate persistor={persistor} loading={<div>Loading</div>}>
+    <PersistGate persistor={persistor} loading={<div />}>
       <Component {...pageProps} />
     </PersistGate>
   );
diff --git a/pages/poll/[id].tsx b/pages/poll/[id].tsx
index 7bbd2eb..cc2dd2b 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, Container, Jumbotron, Alert } from "react-bootstrap";
+import { Row, Container, Jumbotron } from "react-bootstrap";
 import { useSelector } from "react-redux";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -15,7 +15,7 @@ import {
   RocketMeetPollFromDB,
 } from "../../src/models/poll";
 import { decrypt } from "../../src/helpers/helpers";
-import ShareInvite from "../../src/components/shareinvite";
+import ShareInvite from "../../src/components/ShareInvite";
 import { RootState } from "../../src/store/store";
 
 dayjs.extend(localizedFormat);
@@ -37,15 +37,6 @@ 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>
@@ -56,12 +47,7 @@ const Poll = (props: {
               <PollInfo poll={pollFromDB} />
               {pollFromDB.open &&
                 loggedInUserEmailID === pollCreatorEmailID && (
-                  <ShareInvite
-                    polltitle={pollFromDB.title}
-                    pollid={pollid}
-                    onChangeS={handleChangeS}
-                    onChangeF={handleChangeF}
-                  />
+                  <ShareInvite polltitle={pollFromDB.title} pollid={pollid} />
                 )}
             </Jumbotron>
           </div>
@@ -81,24 +67,6 @@ const Poll = (props: {
             </Jumbotron>
           </div>
         </Row>
-        <div className="alert-corner">
-          <Alert
-            variant="success"
-            show={showPopS}
-            onClose={(): void => setShowPopS(false)}
-            dismissible
-          >
-            <Alert.Heading>Successfully sent mails</Alert.Heading>
-          </Alert>
-          <Alert
-            variant="danger"
-            show={showPopF}
-            onClose={(): void => setShowPopF(false)}
-            dismissible
-          >
-            <Alert.Heading>Mails not sent</Alert.Heading>
-          </Alert>
-        </div>
       </Container>
     </Layout>
   );
diff --git a/src/components/PollInfo.tsx b/src/components/PollInfo.tsx
index 1e6ebe1..3af3e25 100644
--- a/src/components/PollInfo.tsx
+++ b/src/components/PollInfo.tsx
@@ -19,7 +19,7 @@ const PollInfo = (props: { poll: RocketMeetPollFromDB }): JSX.Element => {
       <Badge
         pill
         variant={poll.open ? "success" : "secondary"}
-        className="rm-badge"
+        className="rm-badge-poll"
       >
         {poll.open ? "Open" : "Closed"}
       </Badge>
diff --git a/src/components/PollsList.tsx b/src/components/PollsList.tsx
index 87c5988..a874495 100644
--- a/src/components/PollsList.tsx
+++ b/src/components/PollsList.tsx
@@ -48,16 +48,22 @@ const PollsList = (): JSX.Element => {
     return pollList.reverse().map((item: RocketMeetPollFromDB) => (
       <div key={item._id}>
         <Card bg="dark" text="white" className="pt-4 px-4 my-2 cardindash">
-          <Card.Title className="d-flex flex-row justify-content-between">
-            <span className="card-title">{item.title}</span>
-            <Badge
-              pill
-              variant={item.open ? "success" : "secondary"}
-              className="rm-badge"
-            >
-              {item.open ? "open" : "closed"}
-            </Badge>
-          </Card.Title>
+          <Row>
+            <div className="col-8">
+              <Card.Title className="d-flex flex-row justify-content-between">
+                <span className="card-title">{item.title}</span>
+              </Card.Title>
+            </div>
+            <div className="col-4">
+              <Badge
+                pill
+                variant={item.open ? "success" : "secondary"}
+                className="rm-badge-dash"
+              >
+                {item.open ? "open" : "closed"}
+              </Badge>
+            </div>
+          </Row>
           <Card.Body className="text-justify">
             <a
               href={`/poll/${item._id}`}
diff --git a/src/components/ResponseMessage.tsx b/src/components/ResponseMessage.tsx
index 60832da..4145465 100644
--- a/src/components/ResponseMessage.tsx
+++ b/src/components/ResponseMessage.tsx
@@ -5,6 +5,16 @@ const ResponseMessage = (props: {
   onHide(arg: boolean): void;
 }): JSX.Element => {
   const { response, onHide } = props;
+  let responseClassName: string;
+
+  if (response.type === "error") {
+    responseClassName = "rm-response-error";
+  } else if (response.type === "success") {
+    responseClassName = "rm-response-success";
+  } else {
+    responseClassName = "rm-response-null";
+  }
+
   return (
     <Modal
       show={response.status}
@@ -13,15 +23,11 @@ const ResponseMessage = (props: {
       aria-labelledby="contained-modal-title-vcenter"
       centered
     >
-      <Modal.Header
-        closeButton
-        className={
-          response.type === "error"
-            ? "rm-response-error"
-            : "rm-response-success"
-        }
-      >
-        <Modal.Title id="contained-modal-title-vcenter">
+      <Modal.Header closeButton className={responseClassName}>
+        <Modal.Title
+          id="contained-modal-title-vcenter"
+          className="rm-response-title"
+        >
           {response.msg}
         </Modal.Title>
       </Modal.Header>
diff --git a/src/components/shareinvite.tsx b/src/components/ShareInvite.tsx
similarity index 65%
rename from src/components/shareinvite.tsx
rename to src/components/ShareInvite.tsx
index 7431f41..2dcb76c 100644
--- a/src/components/shareinvite.tsx
+++ b/src/components/ShareInvite.tsx
@@ -8,15 +8,14 @@ import {
 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";
 
-const Invitation = (props: {
+const ShareInvite = (props: {
   pollid: string;
   polltitle: string;
-  onChangeS(arg: boolean): void;
-  onChangeF(arg: boolean): void;
 }): JSX.Element => {
   const { pollid } = props;
   const { polltitle } = props;
@@ -32,20 +31,30 @@ const Invitation = (props: {
   const [emailList, setEmails] = useState<string[]>([]);
   const [error, setError] = useState<string>("");
 
+  const [response, setResponse] = useState({
+    status: false,
+    type: "null",
+    msg: "",
+  });
+
   const handleCopy = (): void => {
     copy(pollurl);
   };
+
   const popover = (
     <Popover id="popover-basic">
-      <Popover.Content>Copied</Popover.Content>
+      <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)) {
@@ -60,8 +69,9 @@ const Invitation = (props: {
     }
     return true;
   };
+
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (["Enter", "Tab", " ", ","].includes(evt.key)) {
+    if ([","].includes(evt.key)) {
       evt.preventDefault();
       let value = currentEmail.trim();
       if (value && isValid(value)) {
@@ -70,14 +80,16 @@ const Invitation = (props: {
       }
     }
   };
+
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>): void => {
     setCurrentEmail(evt.target.value);
     setError("");
   };
-  /* 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();
     let paste = evt.clipboardData.getData("text");
@@ -87,18 +99,8 @@ const Invitation = (props: {
       setEmails([...emailList, ...toBeAdded]);
     }
   };
-  const handlePreSubmit = (): void => {
-    let value = currentEmail.trim();
-    if (value && isValid(value)) {
-      setEmails([...emailList, value]);
-      setCurrentEmail("");
-    }
-    handleSubmit();
-  }
-  /* added void below( remove this comment at last PR) */
-  const handleSubmit = async (): Promise<void> => {
-    /* console.log(emailList); which is also to be removed */
 
+  const handleSubmit = async (): Promise<void> => {
     const mailerArgs: MailerPollArgs = {
       pollID: pollid,
       pollTitle: polltitle,
@@ -106,75 +108,97 @@ const Invitation = (props: {
       senderName: displayName,
       senderEmailID: loggedInUserEmailID,
     };
-    const { statusCode } = await mailerAPI.sendPollInvites(mailerArgs, token);
-    if (statusCode === 200) {
-      props.onChangeS(true);
+    const sendEmailsResponse = await mailerAPI.sendPollInvites(
+      mailerArgs,
+      token
+    );
+    if (sendEmailsResponse.statusCode === 200) {
+      setResponse({
+        status: true,
+        type: "success",
+        msg: "Emails successfully sent.",
+      });
     } else {
-      props.onChangeF(true);
+      setResponse({
+        status: true,
+        type: "error",
+        msg: "Unable to send emails. Please try again later.",
+      });
     }
   };
 
   return (
-    <div
-      className="d-flex flex-column p-4 m-1 mt-4 border"
-      id="share"
-      style={{ width: "90%", maxWidth: "500px" }}
-    >
+    <div className="poll-shareinvite-content">
       <Form
         onSubmit={(e): void => {
           e.preventDefault();
         }}
       >
-        <Form.Group controlId="formBasicEmail" className="text-center">
+        <Form.Group>
+          <Form.Label className="font-weight-bold">Share link</Form.Label>
+          <InputGroup className="mb-3">
+            <Form.Control
+              type="text"
+              readOnly
+              defaultValue={pollurl}
+              className="share-textbox"
+            />
+            <InputGroup.Append>
+              <OverlayTrigger trigger="click" placement="top" overlay={popover}>
+                <Button variant="light" onClick={handleCopy}>
+                  Copy
+                </Button>
+              </OverlayTrigger>
+            </InputGroup.Append>
+          </InputGroup>
+        </Form.Group>
+
+        <Form.Group controlId="formBasicEmail">
           <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={(): void =>
-                      handleDelete(email)
-                    } /* added void ( remove this comment at last PR) */
-                  >
-                    &times;
-                  </button>
-                </div>
-              ))}
-            </div>
+            Invite participants
           </Form.Label>
           <Form.Control
             multiple
             type="email"
-            placeholder="Enter emails"
+            className="invite-textbox"
+            placeholder="Enter comma-separated emails"
             value={currentEmail}
             onKeyDown={handleKeyDown}
             onChange={handleChange}
             onPaste={handlePaste}
           />
-          <Button className="my-2" variant="light" onClick={handlePreSubmit}>
+          <div className="emailList">
+            {emailList.map((email) => (
+              <div className="tag-item" key={email}>
+                {email}
+                <button
+                  type="button"
+                  className="button"
+                  onClick={(): void => handleDelete(email)}
+                >
+                  &times;
+                </button>
+              </div>
+            ))}
+            {error && <p className="error">{error}</p>}
+          </div>
+          <Button
+            className="my-2"
+            variant="light"
+            onClick={handleSubmit}
+            disabled={emailList.length < 1}
+          >
             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>
-          <InputGroup className="mb-3">
-            <Form.Control type="text" readOnly defaultValue={pollurl} />
-            <InputGroup.Append>
-              <OverlayTrigger trigger="click" placement="top" overlay={popover}>
-                <Button variant="light" onClick={handleCopy}>
-                  copy
-                </Button>
-              </OverlayTrigger>
-            </InputGroup.Append>
-          </InputGroup>
-        </Form.Group>
       </Form>
+      <ResponseMessage
+        response={response}
+        onHide={(): void =>
+          setResponse({ status: false, type: "null", msg: "" })
+        }
+      />
     </div>
   );
 };
-export default Invitation;
+export default ShareInvite;
diff --git a/src/components/SubmitChoices.tsx b/src/components/SubmitChoices.tsx
index 8082ecc..9497f85 100644
--- a/src/components/SubmitChoices.tsx
+++ b/src/components/SubmitChoices.tsx
@@ -34,7 +34,7 @@ const SubmitChoices = (props: {
       setResponse({
         status: true,
         type: "error",
-        msg: `${JSON.stringify(submitChoiceResponse.data.message)}`,
+        msg: "Please try again later.",
       });
     }
   };
diff --git a/src/components/SubmitFinalChoice.tsx b/src/components/SubmitFinalChoice.tsx
index a1aa142..447ffd1 100644
--- a/src/components/SubmitFinalChoice.tsx
+++ b/src/components/SubmitFinalChoice.tsx
@@ -45,7 +45,7 @@ const SubmitFinalChoice = (props: {
       setResponse({
         status: true,
         type: "error",
-        msg: `${JSON.stringify(submitFinalChoiceResponse.data.message)}`,
+        msg: "Please try again later.",
       });
     }
   };
diff --git a/src/styles/index.css b/src/styles/index.css
index 57ac252..b7ce4ff 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -392,7 +392,15 @@ h4 {
   float: right;
 }
 
-.rm-badge {
+.rm-badge-dash {
+  padding-top: 0.6em !important;
+  padding-left: 0.6em !important;
+  padding-right: 0.6em !important;
+  padding-bottom: 0.6em !important;
+  float: right !important;
+}
+
+.rm-badge-poll {
   padding-top: 0.6em !important;
   padding-left: 0.6em !important;
   padding-right: 0.6em !important;
@@ -427,6 +435,12 @@ h4 {
   padding-right: 3rem;
 }
 
+.poll-shareinvite-content {
+  margin-top: 3rem;
+  padding-left: 2rem;
+  padding-right: 3rem;
+}
+
 .poll-info-title {
   font-size: 3.5rem;
   font-weight: 700;
@@ -462,6 +476,11 @@ h4 {
     padding-right: 0;
   }
 
+  .poll-shareinvite-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .poll-info-title {
     font-size: 2.3rem;
   }
@@ -471,6 +490,10 @@ h4 {
   }
 }
 
+.emailList {
+  margin-top: 0.5rem;
+}
+
 .poll-info-final-date {
   padding-top: 2rem;
   display: block;
@@ -662,7 +685,7 @@ h4 {
   min-height: inherit !important;
 }
 .card-body {
-  padding: 0.5rem !important;
+  padding: 0 !important;
   min-height: 80px !important;
 }
 
@@ -685,8 +708,8 @@ h4 {
 }
 
 .tag-item {
-  background-color: #d4d5d6;
-  color: #000000;
+  background-color: #575757;
+  color: #ffffff;
   display: inline-block;
   font-size: 14px;
   font-weight: 300;
@@ -886,6 +909,10 @@ h4 {
   position: absolute;
 }
 
+.rm-response-null {
+  display: none !important;
+}
+
 .rm-response-error {
   background-color: #f8d7da !important;
   color: #721c24 !important;
@@ -895,3 +922,50 @@ h4 {
   background-color: #d4edda !important;
   color: #155724 !important;
 }
+
+.rm-response-title {
+  font-size: 1.2rem !important;
+}
+
+@media (min-width: 0) and (max-width: 992px) {
+  .rm-response-title {
+    font-size: 1rem !important;
+  }
+}
+
+.share-textbox {
+  background-color: #101010 !important;
+  color: #e0e0e0 !important;
+  border: 2px solid #6c757d !important;
+  border-top-left-radius: 1rem !important;
+  border-bottom-left-radius: 1rem !important;
+}
+
+.share-textbox:focus {
+  border: 2px solid #a9aaac !important;
+}
+
+.invite-textbox {
+  background-color: #101010 !important;
+  color: #e0e0e0 !important;
+  border: 2px solid #6c757d !important;
+  border-radius: 1rem !important;
+}
+
+.invite-textbox:focus {
+  border: 2px solid #a9aaac !important;
+}
+
+.invite-textbox::placeholder {
+  color: #e0e0e0 !important;
+}
+
+@media (min-width: 0) and (max-width: 992px) {
+  .share-textbox {
+    font-size: 1rem !important;
+  }
+
+  .invite-textbox {
+    font-size: 1rem !important;
+  }
+}