add FormError component to display auth errors

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)"
-)
+);
+
+$colors: (
+  "error": #aa3333,
+);

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 (
+    <span data-testid="FormError" className="FormError">
+      {errorMessage}
+    </span>
+    );
+}
+
+export default FormError;

play-node-go/src/components/FormError/FormError.scss

@@ -0,0 +1,5 @@
+@import '../../../public/stylesheets/partials/variables';
+
+span.FormError {
+  color: map-get($colors, "error");;
+}

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(<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);
+  
+})

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 <FormError error={errors.auth}/>
+    }
+  }
+  
   return (
+    
     <div className="Signup" data-testid="Signup">
+      {formError(props.state.errors)}
       <form 
         data-testid="Signup__form"
         onSubmit={e => handleSubmit(e)}

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(<Signup />);
+  const { getByTestId } = render(<Signup state={initState()}/>);
   const SignupDiv = getByTestId('Signup');
   expect(SignupDiv).toBeInTheDocument();
 });

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

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