summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Admin.tsx35
-rw-r--r--src/components/GuestLogin.tsx18
-rw-r--r--src/components/NavBar.tsx13
-rw-r--r--src/components/Registry.tsx2
-rw-r--r--src/components/Rsvp.tsx118
-rw-r--r--src/components/RsvpForm.tsx109
6 files changed, 190 insertions, 105 deletions
diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
new file mode 100644
index 0000000..8f6ce12
--- /dev/null
+++ b/src/components/Admin.tsx
@@ -0,0 +1,35 @@
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+
+import { useGetGuestsQuery } from '../apiSlice'
+
+function Admin() {
+ const {
+ data: guests,
+ isLoading,
+ isSuccess,
+ isError,
+ error
+ } = useGetGuestsQuery()
+
+ let content
+
+ if (isLoading) {
+ content = <Typography variant="h4">Loading...</Typography>
+ } else if (isSuccess) {
+ content = JSON.stringify(guests)
+ } else if (isError) {
+ content = <>{error.toString()}</>
+ }
+
+ return (
+ <Paper>
+ <Typography variant="h4" component="h4">
+ Admin
+ </Typography>
+ {content}
+ </Paper>
+ )
+}
+
+export default Admin;
diff --git a/src/components/GuestLogin.tsx b/src/components/GuestLogin.tsx
new file mode 100644
index 0000000..5637276
--- /dev/null
+++ b/src/components/GuestLogin.tsx
@@ -0,0 +1,18 @@
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+
+function GuestLogin({ loggedIn, setLoggedIn }) {
+ return (
+ <Paper>
+ <Typography variant="h6">
+ Enter your name to RSVP
+ </Typography>
+ <Button onClick={() => setLoggedIn(!loggedIn)} variant="contained">
+ Login
+ </Button>
+ </Paper>
+ )
+}
+
+export default GuestLogin;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a4b46c8..2cf1b31 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
@@ -15,12 +15,13 @@ import { ThemeContext } from '../ThemeContextProvider';
function NavBar({ mode }) {
const theme = useTheme();
- const { switchColorMode } = useContext(ThemeContext);
+ const { toggleColorMode } = useContext(ThemeContext);
const pages = [
{ name: 'Schedule', to: '/schedule'},
{ name: 'RSVP', to: '/rsvp' },
- { name: 'Registry', to: '/registry' }
+ { name: 'Registry', to: '/registry' },
+ { name: 'Admin', to: '/admin' }
];
return (
@@ -36,18 +37,18 @@ function NavBar({ mode }) {
Madison and Michael's Wedding
</Typography>
<Stack direction="row" sx={{ marginLeft: 'auto' }}>
- {pages.map((page) => (
+ {pages.map(page => (
<Button color="inherit" component={Link} to={page.to} key={page.name}>
{page.name}
</Button>
))}
- <IconButton color="inherit" onClick={switchColorMode}>
+ <IconButton color="inherit" onClick={toggleColorMode}>
{theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
</IconButton>
</Stack>
</Toolbar>
</AppBar>
);
-}
+};
export default NavBar;
diff --git a/src/components/Registry.tsx b/src/components/Registry.tsx
index b07d680..5856909 100644
--- a/src/components/Registry.tsx
+++ b/src/components/Registry.tsx
@@ -8,7 +8,7 @@ function Registry() {
Registry
</Typography>
</Paper>
- );
+ )
}
export default Registry;
diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx
index 81f37fc..858ca71 100644
--- a/src/components/Rsvp.tsx
+++ b/src/components/Rsvp.tsx
@@ -1,107 +1,29 @@
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 RsvpForm from './RsvpForm';
+import GuestLogin from './GuestLogin';
+import { useGetGuestsQuery } from '../apiSlice'
function Rsvp() {
- const [guestList, setGuestList] = useState([]);
+ // Enter your name to RSVP; query the database
+ const [loggedIn, setLoggedIn] = useState(false);
- const onAddBtnClick = event => {
- setGuestList(guestList.concat(
- <Grid container spacing={2}>
- <Grid item xs={6} md={6} lg={6}>
- <TextField key={guestList.length} label="Name" variant="outlined" />
- </Grid>
- <Grid item xs={6} md={6} lg={6}>
- <FormControl>
- <FormLabel>Meal Preference</FormLabel>
- <RadioGroup>
- <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"
- />
- </RadioGroup>
- </FormControl>
- </Grid>
- </Grid>
- ));
- }
+ const {
+ data: guests,
+ isLoading,
+ isSuccess,
+ isError,
+ error
+ } = useGetGuestsQuery()
return (
- <Paper>
- <Grid container spacing={2}>
- <Grid item xs={4} md={4} lg={4}>
- <Typography>Date: April 14, 2025</Typography>
- </Grid>
- <Grid item xs={4} md={4} lg={4}>
- <Typography>Location: </Typography>
- </Grid>
- <Grid item xs={4} md={4} lg={4}>
- <Typography>RSVP Deadline: </Typography>
- </Grid>
- <Grid item xs={4} md={4} lg={4}>
- <TextField required label="Name" variant="outlined" />
- </Grid>
- <Grid item xs={4} md={4} lg={4}>
- <FormControl>
- <FormLabel>Are you attending?</FormLabel>
- <RadioGroup>
- <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
- <FormControlLabel value="No" control={<Radio />} label="No" />
- </RadioGroup>
- </FormControl>
- </Grid>
- <Grid item xs={4} md={4} lg={4}>
- <Button
- onClick={onAddBtnClick}
- sx={{ maxWidth: 240 }}
- variant="contained">
- Add Additional Guests
- {/* TODO: only allow guests we've selected; allow kids? */}
- </Button>
- </Grid>
- {guestList}
- <Grid item xs={6} md={6} lg={6}>
- <TextField
- label="Dietary Restrictions"
- variant="outlined"
- />
- </Grid>
- <Grid item xs={6} md={6} lg={6}>
- <TextField
- label="Song Request"
- variant="outlined"
- />
- </Grid>
- <Grid item>
- <Button sx={{ maxWidth: 80 }} variant="contained">Submit</Button>
- </Grid>
- </Grid>
- </Paper>
- );
+ <>
+ {loggedIn ? (
+ <RsvpForm />
+ ) : (
+ <GuestLogin loggedIn={loggedIn} setLoggedIn={setLoggedIn} />
+ )}
+ </>
+ )
}
export default Rsvp;
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;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-19 06:18:24 +0000