hook reducer into signup post response
This commit is contained in:
parent
c905dd05b8
commit
8c6e38ec66
5 changed files with 61 additions and 19 deletions
|
@ -31,6 +31,7 @@ function App() {
|
||||||
.catch(err => setError([...error, err]))
|
.catch(err => setError([...error, err]))
|
||||||
.then(data => setFetchData(data))
|
.then(data => setFetchData(data))
|
||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
||||||
socket.emit('connect');
|
socket.emit('connect');
|
||||||
|
@ -38,6 +39,7 @@ function App() {
|
||||||
socket.on('connect_error', err => setError([...error, err]));
|
socket.on('connect_error', err => setError([...error, err]));
|
||||||
socket.on('error', err => setError([...error, err]))
|
socket.on('error', err => setError([...error, err]))
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,35 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Signup.scss';
|
import './Signup.scss';
|
||||||
|
import authServices from '../../services/authServices';
|
||||||
|
|
||||||
const Signup = (props) => {
|
const Signup = (props) => {
|
||||||
const [ username, setUsername ] = useState('');
|
const [ username, setUsername ] = useState('');
|
||||||
|
const [ email, setEmail ] = useState('');
|
||||||
const [ password, setPassword ] = useState('');
|
const [ password, setPassword ] = useState('');
|
||||||
const [ confirmPassword, setConfirmPassword ] = 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 (
|
return (
|
||||||
<div className="Signup" data-testid="Signup">
|
<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>
|
<label htmlFor="username-input">Username:</label>
|
||||||
<input
|
<input
|
||||||
name="username"
|
name="username"
|
||||||
|
@ -19,11 +39,20 @@ const Signup = (props) => {
|
||||||
default="username"
|
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>
|
<label htmlFor="password-input">Password:</label>
|
||||||
<input
|
<input
|
||||||
name="password"
|
name="password"
|
||||||
id="password-input"
|
id="password-input"
|
||||||
type="text"
|
type="password"
|
||||||
onChange={e => setPassword(e.target.value)}
|
onChange={e => setPassword(e.target.value)}
|
||||||
default=""
|
default=""
|
||||||
/>
|
/>
|
||||||
|
@ -32,7 +61,7 @@ const Signup = (props) => {
|
||||||
<input
|
<input
|
||||||
name="confirmPassword"
|
name="confirmPassword"
|
||||||
id="confirmPassword-input"
|
id="confirmPassword-input"
|
||||||
type="text"
|
type="password"
|
||||||
onChange={e => setConfirmPassword(e.target.value)}
|
onChange={e => setConfirmPassword(e.target.value)}
|
||||||
default=""
|
default=""
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -10,9 +10,9 @@ const HomeSidebar = (props) => {
|
||||||
<nav>
|
<nav>
|
||||||
{props.state.user ? <></> : <>
|
{props.state.user ? <></> : <>
|
||||||
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
||||||
{showForm === 'login' ? <Login /> : <></>}
|
{showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
|
||||||
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
||||||
{showForm === 'signup' ? <Signup /> : <></>}
|
{showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
|
||||||
</>}
|
</>}
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,7 +7,7 @@ export const authReducer = (state: state, action: action):state => {
|
||||||
switch (action.message) {
|
switch (action.message) {
|
||||||
case 'LOGIN':
|
case 'LOGIN':
|
||||||
return loginReducer(state, action);
|
return loginReducer(state, action);
|
||||||
|
|
||||||
case 'SIGNUP':
|
case 'SIGNUP':
|
||||||
return signupReducer(state, action);
|
return signupReducer(state, action);
|
||||||
|
|
||||||
|
@ -26,16 +26,26 @@ function loginReducer(state: state, action: action): state {
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function signupReducer(state: state, action: action): state {
|
function signupReducer(state: state, action: action): state {
|
||||||
const userCredentials = action.body;
|
const signupResponse = action.body;
|
||||||
|
let error;
|
||||||
const signupResponse = await authServices.signupService(userCredentials);
|
|
||||||
const errors = signupResponse.response ? signupResponse.response.data.errors : null;
|
if (signupResponse.response) {
|
||||||
|
error = signupResponse.response.data.errors;
|
||||||
|
}
|
||||||
let responseUser;
|
let responseUser;
|
||||||
if (signupResponse.data) responseUser = {...signupResponse.data}
|
if (signupResponse.data) {
|
||||||
if (errors) return {...state, errors: {authError: errors} };
|
responseUser = {...signupResponse.data}
|
||||||
if (responseUser) return {...state, user: responseUser };
|
}
|
||||||
return {...state, errors: {requestError: 'something went wrong'}};
|
|
||||||
|
|
||||||
// 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'}};
|
||||||
}
|
}
|
|
@ -15,11 +15,12 @@ export type action = {
|
||||||
|
|
||||||
export const stateReducer = (state: state, action: action): state => {
|
export const stateReducer = (state: state, action: action): state => {
|
||||||
const errorStrippedState = stripErrors({...state});
|
const errorStrippedState = stripErrors({...state});
|
||||||
|
console.log(action)
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'INIT': return initState();
|
case 'INIT': return initState();
|
||||||
|
|
||||||
case 'AUTH': return authReducer(errorStrippedState, action);
|
case 'AUTH':
|
||||||
|
return authReducer(errorStrippedState, action);
|
||||||
|
|
||||||
default: return state;
|
default: return state;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue