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) */
- >
- ×
- </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)}
+ >
+ ×
+ </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;
+ }
+}