Use RTK query

2 files changed, 86 insertions, 0 deletions

diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
new file mode 100644
index 0000000..fb305f7
--- /dev/null
+++ b/src/features/auth/GuestLogin.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Button, Grid, Paper, TextField, Typography } from '@mui/material';
+
+import { setCredentials } from './authSlice';
+import { useLoginMutation } from '../../apiSlice';
+import type { LoginRequest } from './authSlice';
+
+function GuestLogin() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  // TODO: use react-hook-form
+  const [formState, setFormState] = useState<LoginRequest>({
+    firstName: '',
+    lastName: ''
+  });
+
+  const [login] = useLoginMutation();
+
+  const handleChange = ({
+    target: { name, value },
+  }: React.ChangeEvent<HTMLInputElement>) =>
+    setFormState(prev => ({ ...prev, [name]: value }));
+
+  const handleSubmit = async () => {
+      try {
+        const user = await login(formState).unwrap();
+        dispatch(setCredentials(user));
+        navigate('/rsvp');
+      } catch (e) {
+        console.log(e);
+      }
+  };
+
+  return (
+    <Paper>
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={12} lg={12}>
+          <Typography variant="h6">
+            Guest Login
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={6} lg={6}>
+          <TextField label="First Name" variant="outlined" onChange={handleChange} />
+        </Grid>
+        <Grid item xs={12} md={6} lg={6}>
+          <TextField label="Last Name" variant="outlined" onChange={handleChange} />
+        </Grid>
+        <Grid item>
+          <Button onClick={handleSubmit} variant="contained">
+            Login
+          </Button>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+}
+
+export default GuestLogin;
diff --git a/src/features/auth/authSlice.ts b/src/features/auth/authSlice.ts
new file mode 100644
index 0000000..9716131
--- /dev/null
+++ b/src/features/auth/authSlice.ts
@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from '../../store';
+
+type AuthState = {
+  user: User | null
+  token: string | null
+}
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState: { user: null, token: null } as AuthState,
+  reducers: {
+    setCredentials: (state, action) => {
+      const { user, token } = action.payload;
+      state.user = user;
+      state.token = token;
+    }
+  }
+});
+
+export const { setCredentials } = authSlice.actions;
+
+export default authSlice.reducer;
+
+export const selectCurrentUser = (state: RootState) => state.auth.user;