Update example guests.json with RTK query

1 files changed, 109 insertions, 0 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
new file mode 100644
index 0000000..9dbc54c
--- /dev/null
+++ b/src/components/RsvpForm.tsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+
+import { useGetGuestsQuery, useUpdateGuestMutation } from '../apiSlice';
+
+function RsvpForm() {
+  const {
+    data: guests,
+    isLoading,
+    isSuccess,
+    isError,
+    error
+  } = useGetGuestsQuery()
+
+  const [updateGuest] = useUpdateGuestMutation()
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    console.log('handle')
+    let guest = guests[0]
+    if (guest.attendance === 'true') {
+      updateGuest({...guest, attendance: 'false'})
+    } else {
+      updateGuest({...guest, attendance: 'true'})
+    }
+  }
+
+  return (
+    <Paper>
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={4} lg={4}>
+          <Typography>Date: April 14, 2025</Typography>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <Typography>Location: </Typography>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <Typography>RSVP Deadline: </Typography>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <TextField required label="Name" variant="outlined" />
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <FormControl>
+            <FormLabel>Will you attend our wedding?</FormLabel>
+            <RadioGroup>
+              <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+              <FormControlLabel value="No" control={<Radio />} label="No" />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <TextField required label="Plus-One" variant="outlined" />
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <FormControl>
+            <FormLabel>Meal Preference</FormLabel>
+              <FormControlLabel
+                value="Beef"
+                control={<Radio />}
+                label="Beef"
+              />
+              <FormControlLabel
+                value="Chicken"
+                control={<Radio />}
+                label="Chicken"
+              />
+              <FormControlLabel
+                value="Fish"
+                control={<Radio />}
+                label="Fish"
+              />
+              <FormControlLabel
+                value="Vegetarian"
+                control={<Radio />}
+                label="Vegetarian"
+              />
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <TextField
+            label="Dietary Restrictions"
+            variant="outlined"
+          />
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <TextField
+            label="Advice"
+            variant="outlined"
+          />
+        </Grid>
+        <Grid item>
+          <Button onClick={handleSubmit} variant="contained">Submit</Button>
+        </Grid>
+      </Grid>
+    </Paper>
+  )
+}
+
+export default RsvpForm;