Skip to content

Commit

Permalink
v0.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@njyjn
njyjn committed May 28, 2022
1 parent 5e7050f commit f49dc97
Show file tree
Hide file tree
Showing 10 changed files with 673 additions and 71 deletions.
130 changes: 80 additions & 50 deletions components/InviteCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ import {
Card,
Form,
ListGroup,
Toast,
ToastBody,
ToastContainer,
Modal,
} from "react-bootstrap";
import { printFormalName } from "../lib/utils";
import { Faq } from "./Faq";
Expand Down Expand Up @@ -46,10 +44,18 @@ const InviteCard: React.FC<{
const [isSubmitting, setIsSubmitting] = useState(false);
const [isAttending, setIsAttending] = useState(null);

const [responseToastText, setResponseToastText] = useState(null);
const [hasError, setHasError] = useState(false);

const hcaptchaRef = useRef(null);

const [responseModalText, setResponseModalText] = useState(null);
const [showModal, setShowModal] = useState(false);
const handleCloseModal = () => {
setShowModal(false);
setHasError(false);
};
const handleShowModal = () => setShowModal(true);

const [rsvpWindowClosed, setRsvpWindowClosed] = useState(false);
useEffect(() => {
try {
Expand All @@ -66,7 +72,7 @@ const InviteCard: React.FC<{

useEffect(() => {
window.scrollTo(0, 0);
}, [responseToastText]);
}, [responseModalText]);

const submit = async (e: React.SyntheticEvent) => {
e.preventDefault();
Expand All @@ -88,41 +94,45 @@ const InviteCard: React.FC<{
setIsSubmitting(false);
return;
}
let toastText: string;
let modalText: string;
if (isAttending) {
try {
if (attendingGuestCount < 1) {
toastText =
modalText =
'Please indicate which guests are attending. If not, select "Not Attending"';
// return false;
}
const attending = guests.map((g, i) => {
g.isAttending = attendingGuests[i];
return g;
});
const body = {
id: invite.id,
attendingGuests: attending,
recipientNotes: recipientNotes,
dietaryRequirements: dietaryRequirements,
attending: true,
captcha: captchaCode,
};
const response = await fetch("/api/rsvp", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
if (response.ok) {
toastText = "Thanks for your response. See you there!";
setHasError(true);
} else {
toastText =
"We have received your response but something went wrong in the backend. Please let your host know directly. Thank you";
const attending = guests.map((g, i) => {
g.isAttending = attendingGuests[i];
return g;
});
const body = {
id: invite.id,
attendingGuests: attending,
recipientNotes: recipientNotes,
dietaryRequirements: dietaryRequirements,
attending: true,
captcha: captchaCode,
};
const response = await fetch("/api/rsvp", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
if (response.ok) {
modalText = "Thanks for your response. See you there!";
setHasError(false);
} else {
modalText =
"We have received your response but something went wrong in the backend. Please let your host know directly. Thank you";
setHasError(true);
}
}
} catch (error) {
console.error(error);
toastText =
modalText =
"Something went wrong, please contact your host for assistance";
setHasError(true);
}
} else {
try {
Expand All @@ -144,44 +154,64 @@ const InviteCard: React.FC<{
body: JSON.stringify(body),
});
if (response.ok) {
toastText =
modalText =
"Thank you for letting us know. We'll catch up another time!";
setHasError(false);
} else {
toastText =
modalText =
"We have received your response but something went wrong in the backend. Please let your host know directly. Thank you";
setHasError(true);
}
} catch (error) {
console.error(error);
toastText =
modalText =
"Something went wrong, please contact your host for assistance";
setHasError(true);
}
}
setResponseToastText(toastText);
setResponseModalText(modalText);
handleShowModal();
setIsSubmitting(false);
};

const back = () => {
setIsSubmitting(true);
router.push("/");
router.reload();
};

const recipientTitle = printFormalName(guests);

return (
<div>
<ToastContainer className="p-3" position="top-center">
<Toast
onClose={() => setResponseToastText(null)}
animation
autohide
delay={10000}
show={responseToastText}
>
<ToastBody style={{ textAlign: "center" }}>
{responseToastText}
</ToastBody>
</Toast>
</ToastContainer>
<Modal
show={showModal}
onHide={handleCloseModal}
backdrop="static"
keyboard={false}
centered
>
<Modal.Header closeButton>
<Modal.Title>{hasError ? "Oops!" : "All set!"}</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{responseModalText}</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseModal}>Edit response</Button>
{ hasError ? <></> :
<Button
variant="primary"
onClick={() => {
// showBack flag is set to False for /rsvp component
if (showBack) {
router.reload();
} else {
router.push("/");
}
}}>Go to homepage</Button>
}
</Modal.Footer>
</Modal>
<Card>
<Card.Header>
Invite Code <code>{invite.inviteCode.toUpperCase()}</code>
Expand Down Expand Up @@ -329,7 +359,7 @@ const InviteCard: React.FC<{
variant="light"
type="button"
onClick={back}
hidden={!showBack && isSubmitting}
hidden={!showBack || isSubmitting}
>
Back
</Button>
Expand Down
6 changes: 5 additions & 1 deletion components/Rsvp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,11 @@ const Rsvp: React.FC<{ rsvpProps: RsvpProps }> = ({ rsvpProps }) => {
const submit = async (e: React.SyntheticEvent) => {
e.preventDefault();
setIsLoading(true);
hcaptchaRef.current.execute();
try {
hcaptchaRef.current.execute();
} catch (e) {
setIsLoading(false);
}
};

const onHCaptchaChange = async (captchaCode) => {
Expand Down
Loading

1 comment on commit f49dc97

@vercel
Copy link

@vercel vercel bot commented on f49dc97 May 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wedo – ./

wedo-git-main-njyjn.vercel.app
wedo.vercel.app
wedo-njyjn.vercel.app
www.wedo.sg
wedo.sg

Please sign in to comment.