From 68a86b2f9c41717767443b6b9e1860cb73b2aa30 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sat, 24 Feb 2024 10:04:10 -0600
Subject: Use RTK query

---
 src/features/auth/GuestLogin.tsx | 61 ++++++++++++++++++++++++++++++++++++++++
 src/features/auth/authSlice.ts   | 25 ++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 src/features/auth/GuestLogin.tsx
 create mode 100644 src/features/auth/authSlice.ts

(limited to 'src/features/auth')

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;
-- 
cgit v1.2.3