hook reducer into signup post response

play-node-go/src/App.js

@@ -31,6 +31,7 @@ function App() {
     .catch(err => setError([...error, err]))
     .then(data => setFetchData(data))
   })
+
   useEffect(() => {
     
     socket.emit('connect');
@@ -38,6 +39,7 @@ function App() {
     socket.on('connect_error', err => setError([...error, err]));
     socket.on('error', err => setError([...error, err]))
   })
+
   return (
     <Router>
       

play-node-go/src/components/Signup/Signup.js

@@ -1,15 +1,35 @@
 import React, { useState } from 'react';
 import './Signup.scss';
+import authServices from '../../services/authServices';
 
 const Signup = (props) => {
   const [ username, setUsername ] = useState('');
+  const [ email, setEmail ] = useState('');
   const [ password, setPassword ] = useState('');
   const [ confirmPassword, setConfirmPassword ] = useState('');
 
+  const handleSubmit = async e => {
+    e.preventDefault();
+    const signupResponse = await authServices.signupService({
+      username,
+      email,
+      password,
+      confirmPassword
+    })
+    return props.dispatch({
+      type: 'AUTH',
+      message: 'SIGNUP',
+      body: signupResponse
+    })
+  }
+
   return (
     <div className="Signup" data-testid="Signup">
-      <form data-testid="Signup__form">
-        
+      <form 
+        data-testid="Signup__form"
+        onSubmit={e => handleSubmit(e)}
+      >
+
         <label htmlFor="username-input">Username:</label>
         <input 
           name="username"
@@ -19,11 +39,20 @@ const Signup = (props) => {
           default="username"
         />
 
+        <label htmlFor="email-input">Email:</label>
+        <input 
+          name="email"
+          id="email-input"
+          type="text"
+          onChange={e => setEmail(e.target.value)}
+          default="email"
+        />
+
         <label htmlFor="password-input">Password:</label>
         <input 
           name="password"
           id="password-input"
-          type="text"
+          type="password"
           onChange={e => setPassword(e.target.value)}
           default=""
         />
@@ -32,7 +61,7 @@ const Signup = (props) => {
         <input 
           name="confirmPassword"
           id="confirmPassword-input"
-          type="text"
+          type="password"
           onChange={e => setConfirmPassword(e.target.value)}
           default=""
         />

play-node-go/src/pages/Home/HomeSidebar.js

@@ -10,9 +10,9 @@ const HomeSidebar = (props) => {
     <nav>
       {props.state.user ? <></> : <>
         <p onClick={()=>{setShowForm('login')}}>Login</p>
-        {showForm === 'login' ? <Login /> : <></>}
+        {showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
         <p onClick={()=>{setShowForm('signup')}}>Signup</p>
-        {showForm === 'signup' ? <Signup /> : <></>}
+        {showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
       </>}
     </nav>
   );

play-node-go/src/reducers/auth/stateReducer.auth.js

@@ -7,7 +7,7 @@ export const authReducer = (state: state, action: action):state => {
   switch (action.message) {
     case 'LOGIN':
       return loginReducer(state, action);
-
+      
     case 'SIGNUP':
       return signupReducer(state, action);
 
@@ -26,16 +26,26 @@ function loginReducer(state: state, action: action): state {
   return state;
 }
 
-async function signupReducer(state: state, action: action): state {
-  const userCredentials = action.body;
-
-  const signupResponse = await authServices.signupService(userCredentials);
-  const errors = signupResponse.response ? signupResponse.response.data.errors : null;
+function signupReducer(state: state, action: action): state {
+  const signupResponse = action.body;
+  let error;
+  
+  if (signupResponse.response) {
+    error = signupResponse.response.data.errors;
+  }
   let responseUser;
-  if (signupResponse.data) responseUser = {...signupResponse.data}
-  if (errors) return {...state, errors: {authError: errors} };
-  if (responseUser) return {...state, user: responseUser };
-  return {...state, errors: {requestError: 'something went wrong'}};
+  if (signupResponse.data) {
+    responseUser = {...signupResponse.data}
+  }
 
-  // returnstate;
+  if (error) {
+    const errors = error.reduce((errorObject, error) => errorObject[Object.keys(error)[0] = error])
+    return {...state, errors };
+  }
+
+  if (responseUser) {
+    return {...state, user: responseUser };
+  }
+  
+  return {...state, errors: {requestError: 'something went wrong'}};
 }

play-node-go/src/reducers/stateReducer.js

@@ -15,11 +15,12 @@ export type action = {
 
 export const stateReducer = (state: state, action: action): state => {
   const errorStrippedState = stripErrors({...state});
-
+  console.log(action)
   switch (action.type) {
     case 'INIT': return initState();
 
-    case 'AUTH': return authReducer(errorStrippedState, action);
+    case 'AUTH':
+      return authReducer(errorStrippedState, action);
   
     default: return state;
   }