From 5d9cf51c10f4477a107229f1d4f7fd0b1b89c893 Mon Sep 17 00:00:00 2001
From: Joseph Ditton <jditton.atomic@gmail.com>
Date: Mon, 27 Dec 2021 10:39:59 -0700
Subject: fix signup page

---
 client/components/sign_up/_sign_up.jsx | 48 ++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 23 deletions(-)

(limited to 'client/components')

diff --git a/client/components/sign_up/_sign_up.jsx b/client/components/sign_up/_sign_up.jsx
index c5d0dcd..c0ac2f6 100644
--- a/client/components/sign_up/_sign_up.jsx
+++ b/client/components/sign_up/_sign_up.jsx
@@ -1,18 +1,21 @@
 import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { AuthContext } from '../../utils/auth_context';
+import { ApiContext } from '../../utils/api_context';
 import { Paper } from '../common/paper';
 import { Input } from '../common/input';
 import { Button } from '../common/button';
 
 export const SignUp = () => {
   const [, setAuthToken] = useContext(AuthContext);
+  const api = useContext(ApiContext);
   const navigate = useNavigate();
-  const [name, setName] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [emailConfirmation, setEmailConfirmation] = useState('');
   const [password, setPassword] = useState('');
-  const [passwordConfiramation, setPasswordConfirmation] = useState('');
+  const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
 
   const signUp = async () => {
@@ -28,38 +31,37 @@ export const SignUp = () => {
       setErrorMessage('Password cannot be blank');
       return;
     }
-    if (password !== passwordConfiramation) {
+    if (password !== passwordConfirmation) {
       setErrorMessage('Password does not match');
       return;
     }
-    if (name === '') {
-      setErrorMessage('Name cannot be blank.');
+    if (firstName === '') {
+      setErrorMessage('First name cannot be blank.');
       return;
     }
-    const res = await fetch('/users', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        name,
-        email,
-        password,
-      }),
-    });
-    if (res.status === 201) {
-      const result = await res.json();
-      setAuthToken(result.token);
-      navigate('/');
+    if (lastName === '') {
+      setErrorMessage('Last name cannot be blank.');
+      return;
     }
+
+    const { token } = await api.post('/users', {
+      firstName,
+      lastName,
+      email,
+      password,
+    });
+    setAuthToken(token);
+    navigate('/');
   };
 
   return (
     <div className="flex flex-row justify-center m-4">
       <div className="w-96">
         <Paper>
-          <div>Name</div>
-          <Input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+          <div>First Name</div>
+          <Input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+          <div>Last Name</div>
+          <Input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
           <div>Email</div>
           <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
           <div>Confirm Email</div>
@@ -69,7 +71,7 @@ export const SignUp = () => {
           <div>Confirm Password</div>
           <Input
             type="password"
-            value={passwordConfiramation}
+            value={passwordConfirmation}
             onChange={(e) => setPasswordConfirmation(e.target.value)}
           />
           <div className="flex flex-row justify-end mt-2">
-- 
cgit v1.2.3-70-g09d2