hook reducer into signup post response

This commit is contained in:
Sorrel Bri 2020-01-17 12:21:43 -08:00 committed by sorrelbri
parent c905dd05b8
commit 8c6e38ec66
5 changed files with 61 additions and 19 deletions

View file

@ -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>

View file

@ -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=""
/>

View file

@ -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>
);

View file

@ -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'}};
}

View file

@ -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;
}