add FormError component to display auth errors
This commit is contained in:
parent
969e44e8e5
commit
97efe2314b
8 changed files with 57 additions and 5 deletions
|
@ -14,4 +14,8 @@ $break-points: (
|
||||||
"590": "only screen and (min-width: 590px)",
|
"590": "only screen and (min-width: 590px)",
|
||||||
"700": "only screen and (min-width: 700px)",
|
"700": "only screen and (min-width: 700px)",
|
||||||
"900": "only screen and (min-width: 900px)"
|
"900": "only screen and (min-width: 900px)"
|
||||||
)
|
);
|
||||||
|
|
||||||
|
$colors: (
|
||||||
|
"error": #aa3333,
|
||||||
|
);
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './FormError.scss';
|
||||||
|
|
||||||
|
const FormError = (props) => {
|
||||||
|
const errorMessage = props.error;
|
||||||
|
return (
|
||||||
|
<span data-testid="FormError" className="FormError">
|
||||||
|
{errorMessage}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FormError;
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import '../../../public/stylesheets/partials/variables';
|
||||||
|
|
||||||
|
span.FormError {
|
||||||
|
color: map-get($colors, "error");;
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import FormError from './FormError';
|
||||||
|
|
||||||
|
test('renders FormError without crashing', () => {
|
||||||
|
const { getByTestId } = render(<FormError />);
|
||||||
|
const FormErrorSpan = getByTestId('FormError');
|
||||||
|
expect(FormErrorSpan).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders FormError with error message', () => {
|
||||||
|
const errorMessage = "User already exists!";
|
||||||
|
const { getByTestId } = render(<FormError error={errorMessage}/>);
|
||||||
|
const FormErrorSpan = getByTestId('FormError');
|
||||||
|
expect(FormErrorSpan).toHaveTextContent(errorMessage);
|
||||||
|
|
||||||
|
})
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import './Signup.scss';
|
import './Signup.scss';
|
||||||
import authServices from '../../services/authServices';
|
import authServices from '../../services/authServices';
|
||||||
|
import FormError from '../FormError/FormError';
|
||||||
|
|
||||||
const Signup = (props) => {
|
const Signup = (props) => {
|
||||||
const [ username, setUsername ] = useState('');
|
const [ username, setUsername ] = useState('');
|
||||||
|
@ -23,8 +24,18 @@ const Signup = (props) => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const formError = errors => {
|
||||||
|
if(!errors) return <></>;
|
||||||
|
|
||||||
|
if (errors.auth) {
|
||||||
|
return <FormError error={errors.auth}/>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="Signup" data-testid="Signup">
|
<div className="Signup" data-testid="Signup">
|
||||||
|
{formError(props.state.errors)}
|
||||||
<form
|
<form
|
||||||
data-testid="Signup__form"
|
data-testid="Signup__form"
|
||||||
onSubmit={e => handleSubmit(e)}
|
onSubmit={e => handleSubmit(e)}
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from '@testing-library/react';
|
import { render } from '@testing-library/react';
|
||||||
import Signup from './Signup';
|
import Signup from './Signup';
|
||||||
|
import { initState } from '../../reducers/init/stateReducer.init';
|
||||||
|
|
||||||
test('renders Signup without crashing', () => {
|
test('renders Signup without crashing', () => {
|
||||||
const { getByTestId } = render(<Signup />);
|
const { getByTestId } = render(<Signup state={initState()}/>);
|
||||||
const SignupDiv = getByTestId('Signup');
|
const SignupDiv = getByTestId('Signup');
|
||||||
expect(SignupDiv).toBeInTheDocument();
|
expect(SignupDiv).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
|
@ -4,6 +4,7 @@ import type { state } from '../stateReducer';
|
||||||
|
|
||||||
export const initState = (): state => {
|
export const initState = (): state => {
|
||||||
return {
|
return {
|
||||||
user: null
|
user: null,
|
||||||
|
errors: null
|
||||||
};
|
};
|
||||||
}
|
}
|
|
@ -15,7 +15,7 @@ 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();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue