From 8007b05805d5947ef008a79885ba0b890f67c25d Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 2 Aug 2024 12:46:01 -0700
Subject: Use snackbar to display RSVP status
---
client/src/components/Home.tsx | 2 +-
client/src/components/RsvpForm.tsx | 44 ++++++++++++++++++++++++++++++--------
2 files changed, 36 insertions(+), 10 deletions(-)
(limited to 'client/src')
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index bfa3fa8..b6ecc47 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -9,7 +9,7 @@ import p4 from '/EngagmentSession_06.23.2024-267.jpg';
import p5 from '/EngagmentSession_06.23.2024-284.jpg';
function Home() {
- const [currentIndex, setIndex] = useState(0);
+ const [currentIndex, setIndex] = useState<number>(0);
const photos = [p0, p1, p2, p3, p4, p5];
useEffect(() => {
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 63981f8..708a1fb 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { useRef } from 'react';
import { useOutletContext } from 'react-router-dom';
import {
@@ -10,17 +10,42 @@ import {
Grid,
Radio,
RadioGroup,
+ Snackbar,
TextField,
} from '@mui/material';
import { useForm, Controller, useFieldArray } from 'react-hook-form';
import { useUpdateGuestMutation } from '../slices/apiSlice';
import type { Guest } from '../slices/apiSlice';
+interface StatusProps {
+ error: boolean;
+ setOpen: (open: boolean) => void;
+}
+
+const Status = ({ error, setOpen }: StatusProps) => {
+ return error ? (
+ <Alert severity="error" onClose={() => setOpen(false)}>
+ RSVP failed
+ </Alert>
+ ) : (
+ <Alert severity="success" onClose={() => setOpen(false)}>
+ RSVP updated
+ </Alert>
+ );
+};
+
function RsvpForm() {
- const [updateGuest, { isSuccess: success, isError: error }] =
- useUpdateGuestMutation();
+ const [
+ updateGuest,
+ { isLoading: loading, isSuccess: success, isError: error },
+ ] = useUpdateGuestMutation();
const guest: Guest = useOutletContext();
const previousPartySize = useRef(guest?.partySize - 1);
+ const [open, setOpen] = useState<boolean>(false);
+
+ useEffect(() => {
+ setOpen(success || error);
+ }, [success, error]);
const {
register,
@@ -229,14 +254,15 @@ function RsvpForm() {
RSVP
</Button>
</div>
- <div
- style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}
+ <Snackbar
+ open={!loading && open}
+ onClose={() => setOpen(false)}
+ autoHideDuration={5000}
>
- <div style={{ width: 180 }}>
- {success && <Alert severity="success">RSVP updated</Alert>}
- {error && <Alert severity="error">RSVP failed</Alert>}
+ <div>
+ <Status error={error} setOpen={setOpen} />
</div>
- </div>
+ </Snackbar>
</Grid>
</Grid>
</form>
--
cgit v1.2.3