Use RTK query

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 (