summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Admin.tsx17
-rw-r--r--src/components/GuestLogin.tsx18
-rw-r--r--src/components/NavBar.tsx16
-rw-r--r--src/components/Registry.tsx2
-rw-r--r--src/components/Rsvp.tsx41
-rw-r--r--src/components/RsvpForm.tsx50
-rw-r--r--src/components/Schedule.tsx21
7 files changed, 68 insertions, 97 deletions
diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
index 8f6ce12..fac3306 100644
--- a/src/components/Admin.tsx
+++ b/src/components/Admin.tsx
@@ -1,7 +1,6 @@
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
+import { Paper, Typography } from '@mui/material';
-import { useGetGuestsQuery } from '../apiSlice'
+import { useGetGuestsQuery } from '../apiSlice';
function Admin() {
const {
@@ -10,26 +9,26 @@ function Admin() {
isSuccess,
isError,
error
- } = useGetGuestsQuery()
+ } = useGetGuestsQuery();
- let content
+ let content;
if (isLoading) {
- content = <Typography variant="h4">Loading...</Typography>
+ content = <Typography variant="h6">Loading...</Typography>
} else if (isSuccess) {
- content = JSON.stringify(guests)
+ content = JSON.stringify(guests);
} else if (isError) {
content = <>{error.toString()}</>
}
return (
<Paper>
- <Typography variant="h4" component="h4">
+ <Typography variant="h6">
Admin
</Typography>
{content}
</Paper>
- )
+ );
}
export default Admin;
diff --git a/src/components/GuestLogin.tsx b/src/components/GuestLogin.tsx
deleted file mode 100644
index 5637276..0000000
--- a/src/components/GuestLogin.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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 2cf1b31..68fc706 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,14 +1,8 @@
import { useContext } from 'react';
import { Link } from 'react-router-dom';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
+import { AppBar, Box, Button, IconButton, Stack, Toolbar, Typography } from '@mui/material';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
-import Stack from '@mui/material/Stack';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { ThemeContext } from '../ThemeContextProvider';
@@ -19,7 +13,7 @@ function NavBar({ mode }) {
const pages = [
{ name: 'Schedule', to: '/schedule'},
- { name: 'RSVP', to: '/rsvp' },
+ { name: 'RSVP', to: '/guest-login' },
{ name: 'Registry', to: '/registry' },
{ name: 'Admin', to: '/admin' }
];
@@ -38,8 +32,8 @@ function NavBar({ mode }) {
</Typography>
<Stack direction="row" sx={{ marginLeft: 'auto' }}>
{pages.map(page => (
- <Button color="inherit" component={Link} to={page.to} key={page.name}>
- {page.name}
+ <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
+ {page?.name}
</Button>
))}
<IconButton color="inherit" onClick={toggleColorMode}>
@@ -49,6 +43,6 @@ function NavBar({ mode }) {
</Toolbar>
</AppBar>
);
-};
+}
export default NavBar;
diff --git a/src/components/Registry.tsx b/src/components/Registry.tsx
index 5856909..8d7fff4 100644
--- a/src/components/Registry.tsx
+++ b/src/components/Registry.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
function Registry() {
return (
<Paper>
- <Typography variant="h4" component="h4">
+ <Typography variant="h6">
Registry
</Typography>
</Paper>
diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx
index 858ca71..466175e 100644
--- a/src/components/Rsvp.tsx
+++ b/src/components/Rsvp.tsx
@@ -1,29 +1,30 @@
-import { useState } from 'react';
+import { useMemo } from 'react';
+import { useLocation, Navigate, Outlet } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import CssBaseline from '@mui/material/CssBaseline';
+
+import NavBar from './NavBar';
import RsvpForm from './RsvpForm';
-import GuestLogin from './GuestLogin';
-import { useGetGuestsQuery } from '../apiSlice'
+import { selectCurrentUser } from '../features/auth/authSlice';
-function Rsvp() {
- // Enter your name to RSVP; query the database
- const [loggedIn, setLoggedIn] = useState(false);
+const authenticate = () => {
+ const user = useSelector(selectCurrentUser);
+ return useMemo(() => ({ user }), [user]);
+};
- const {
- data: guests,
- isLoading,
- isSuccess,
- isError,
- error
- } = useGetGuestsQuery()
+function Rsvp() {
+ const auth = authenticate();
+ const location = useLocation();
- return (
+ return auth.user ? (
<>
- {loggedIn ? (
- <RsvpForm />
- ) : (
- <GuestLogin loggedIn={loggedIn} setLoggedIn={setLoggedIn} />
- )}
+ <CssBaseline />
+ <NavBar />
+ <Outlet />
</>
- )
+ ) : (
+ <Navigate to="/guest-login" state={{ from: location }} replace />
+ );
}
export default Rsvp;
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 9dbc54c..fe6d874 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -1,14 +1,17 @@
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 { useSelector } from 'react-redux';
+import {
+ Button,
+ FormControl,
+ FormControlLabel,
+ FormLabel,
+ Grid,
+ Paper,
+ Radio,
+ RadioGroup,
+ TextField,
+ Typography
+} from '@mui/material';
import { useGetGuestsQuery, useUpdateGuestMutation } from '../apiSlice';
@@ -19,20 +22,19 @@ function RsvpForm() {
isSuccess,
isError,
error
- } = useGetGuestsQuery()
+ } = useGetGuestsQuery();
- const [updateGuest] = useUpdateGuestMutation()
+ const [updateGuest] = useUpdateGuestMutation();
const handleSubmit = (e) => {
- e.preventDefault()
- console.log('handle')
- let guest = guests[0]
+ e.preventDefault();
+ let guest = guests[0];
if (guest.attendance === 'true') {
- updateGuest({...guest, attendance: 'false'})
+ updateGuest({...guest, attendance: 'false'});
} else {
- updateGuest({...guest, attendance: 'true'})
+ updateGuest({...guest, attendance: 'true'});
}
- }
+ };
return (
<Paper>
@@ -87,23 +89,17 @@ function RsvpForm() {
</FormControl>
</Grid>
<Grid item xs={12} md={4} lg={4}>
- <TextField
- label="Dietary Restrictions"
- variant="outlined"
- />
+ <TextField label="Dietary Restrictions" variant="outlined" />
</Grid>
<Grid item xs={12} md={4} lg={4}>
- <TextField
- label="Advice"
- variant="outlined"
- />
+ <TextField label="Advice" variant="outlined" />
</Grid>
<Grid item>
<Button onClick={handleSubmit} variant="contained">Submit</Button>
</Grid>
</Grid>
</Paper>
- )
+ );
}
export default RsvpForm;
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 002907a..73548bc 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -1,14 +1,13 @@
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-import TimelineOppositeContent, {
- timelineOppositeContentClasses,
-} from '@mui/lab/TimelineOppositeContent';
+import { Paper, Typography } from '@mui/material';
+import {
+ Timeline,
+ TimelineConnector,
+ TimelineContent,
+ TimelineDot,
+ TimelineItem,
+ TimelineOppositeContent,
+ TimelineSeparator
+} from '@mui/lab';
function Schedule() {
return (
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-07 02:21:47 +0000