From c2a0ad2ff21e3d30719832bda7400a0f3549810e Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Fri, 17 Jan 2020 14:27:31 -0800 Subject: [PATCH] add FormError component to display auth errors --- .../public/stylesheets/partials/_variables.scss | 6 +++++- .../src/components/FormError/FormError.js | 13 +++++++++++++ .../src/components/FormError/FormError.scss | 5 +++++ .../src/components/FormError/FormError.test.js | 17 +++++++++++++++++ .../src/components/Signup/Signup.js | 13 ++++++++++++- .../src/components/Signup/Signup.test.js | 3 ++- .../src/reducers/init/stateReducer.init.js | 3 ++- .../play-node-go/src/reducers/stateReducer.js | 2 +- 8 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 packages/server/play-node-go/src/components/FormError/FormError.js create mode 100644 packages/server/play-node-go/src/components/FormError/FormError.scss create mode 100644 packages/server/play-node-go/src/components/FormError/FormError.test.js diff --git a/packages/server/play-node-go/public/stylesheets/partials/_variables.scss b/packages/server/play-node-go/public/stylesheets/partials/_variables.scss index e140c0e..8630947 100644 --- a/packages/server/play-node-go/public/stylesheets/partials/_variables.scss +++ b/packages/server/play-node-go/public/stylesheets/partials/_variables.scss @@ -14,4 +14,8 @@ $break-points: ( "590": "only screen and (min-width: 590px)", "700": "only screen and (min-width: 700px)", "900": "only screen and (min-width: 900px)" -) \ No newline at end of file +); + +$colors: ( + "error": #aa3333, +); \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/FormError/FormError.js b/packages/server/play-node-go/src/components/FormError/FormError.js new file mode 100644 index 0000000..4804a30 --- /dev/null +++ b/packages/server/play-node-go/src/components/FormError/FormError.js @@ -0,0 +1,13 @@ +import React from 'react'; +import './FormError.scss'; + +const FormError = (props) => { + const errorMessage = props.error; + return ( + + {errorMessage} + + ); +} + +export default FormError; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/FormError/FormError.scss b/packages/server/play-node-go/src/components/FormError/FormError.scss new file mode 100644 index 0000000..2c1129c --- /dev/null +++ b/packages/server/play-node-go/src/components/FormError/FormError.scss @@ -0,0 +1,5 @@ +@import '../../../public/stylesheets/partials/variables'; + +span.FormError { + color: map-get($colors, "error");; +} \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/FormError/FormError.test.js b/packages/server/play-node-go/src/components/FormError/FormError.test.js new file mode 100644 index 0000000..9ab20ad --- /dev/null +++ b/packages/server/play-node-go/src/components/FormError/FormError.test.js @@ -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(); + const FormErrorSpan = getByTestId('FormError'); + expect(FormErrorSpan).toBeInTheDocument(); +}); + +test('renders FormError with error message', () => { + const errorMessage = "User already exists!"; + const { getByTestId } = render(); + const FormErrorSpan = getByTestId('FormError'); + expect(FormErrorSpan).toHaveTextContent(errorMessage); + +}) diff --git a/packages/server/play-node-go/src/components/Signup/Signup.js b/packages/server/play-node-go/src/components/Signup/Signup.js index e440693..8e5b070 100644 --- a/packages/server/play-node-go/src/components/Signup/Signup.js +++ b/packages/server/play-node-go/src/components/Signup/Signup.js @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import './Signup.scss'; import authServices from '../../services/authServices'; +import FormError from '../FormError/FormError'; const Signup = (props) => { const [ username, setUsername ] = useState(''); @@ -23,8 +24,18 @@ const Signup = (props) => { }) } + const formError = errors => { + if(!errors) return <>; + + if (errors.auth) { + return + } + } + return ( +
+ {formError(props.state.errors)}
handleSubmit(e)} diff --git a/packages/server/play-node-go/src/components/Signup/Signup.test.js b/packages/server/play-node-go/src/components/Signup/Signup.test.js index e722227..8405863 100644 --- a/packages/server/play-node-go/src/components/Signup/Signup.test.js +++ b/packages/server/play-node-go/src/components/Signup/Signup.test.js @@ -1,9 +1,10 @@ import React from 'react'; import { render } from '@testing-library/react'; import Signup from './Signup'; +import { initState } from '../../reducers/init/stateReducer.init'; test('renders Signup without crashing', () => { - const { getByTestId } = render(); + const { getByTestId } = render(); const SignupDiv = getByTestId('Signup'); expect(SignupDiv).toBeInTheDocument(); }); diff --git a/packages/server/play-node-go/src/reducers/init/stateReducer.init.js b/packages/server/play-node-go/src/reducers/init/stateReducer.init.js index cdaa3e9..88cb470 100644 --- a/packages/server/play-node-go/src/reducers/init/stateReducer.init.js +++ b/packages/server/play-node-go/src/reducers/init/stateReducer.init.js @@ -4,6 +4,7 @@ import type { state } from '../stateReducer'; export const initState = (): state => { return { - user: null + user: null, + errors: null }; } \ No newline at end of file diff --git a/packages/server/play-node-go/src/reducers/stateReducer.js b/packages/server/play-node-go/src/reducers/stateReducer.js index 4bbd676..9bdd296 100644 --- a/packages/server/play-node-go/src/reducers/stateReducer.js +++ b/packages/server/play-node-go/src/reducers/stateReducer.js @@ -15,7 +15,7 @@ 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();