fix bugs and show error message

Author: Wolfjawan

src/Components/forms/header.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 
-export default ({ err }) => {
+export default ({ err, formInComplete }) => {
   return (
     <Fragment>
       <span className="form-header">Volunteer Application Form</span>
@@ -10,11 +10,19 @@ export default ({ err }) => {
         complete the form below:
       </p>
       {err && (
-        <p className="error">
+        <p className="errors">
           {err}
           {window.scrollTo(0, 0)}
         </p>
       )}
+      {formInComplete ? (
+        <span className="errors container">
+          From is incomplete, please check all your details.
+          {window.scrollTo(0, 0)}
+        </span>
+      ) : (
+        ''
+      )}
     </Fragment>
   )
 }

src/Components/forms/helper.js

@@ -18,6 +18,7 @@ export const initialState = {
   msg: null,
   valuationError: false,
   acknowledgement: false,
+  formInComplete: false,
   errors: {
     firstName: false,
     lastName: false,

src/Components/forms/index.css

@@ -109,6 +109,19 @@
 .media {
   display: none;
 }
+.errors {
+  color: #ff0b0b;
+  text-align: center;
+  border: 1px solid #dadada;
+  font-size: 24px;
+  border-radius: 5px;
+  padding: 20px;
+  position: absolute;
+  top: 0px;
+  width: 92%;
+  background-color: #ecdada;
+  height: fit-content;
+}
 @media screen and (max-width: 1000px) {
   .media {
     display: block;

src/Components/forms/index.js

@@ -16,7 +16,7 @@ class Forms extends Component {
   telOnChange = tel => {
     const { errors } = this.state
     errors[`${'tel'}`] = false
-    this.setState({ tel, errors, submitted: false })
+    this.setState({ tel, errors, submitted: false, formInComplete: false })
   }
 
   onChange = e => {
@@ -27,7 +27,8 @@ class Forms extends Component {
       this.setState({
         [name]: type === 'checkbox' ? checked : value,
         submitted: false,
-        errors
+        errors,
+        formInComplete: false
       })
     }
   }
@@ -69,7 +70,11 @@ class Forms extends Component {
 
   handleSubmit = async e => {
     e.preventDefault()
-    this.setState({ submitted: true, valuationError: false })
+    this.setState({
+      submitted: true,
+      valuationError: false,
+      formInComplete: false
+    })
     const {
       firstName,
       lastName,
@@ -97,6 +102,9 @@ class Forms extends Component {
     })
     await this.validateArray({ guidePeople, techSkill, otherSkill })
     const emptyValues = validatedInputs.includes(true)
+    if (emptyValues || valuationError) {
+      this.setState({ formInComplete: true })
+    }
     if (!emptyValues && !valuationError) {
       this.props.createVolunteerHandler({
         firstName,
@@ -117,6 +125,7 @@ class Forms extends Component {
 
   onChangeCheckList = (e, name) => {
     const { guidePeople, techSkill, otherSkill } = this.state
+    this.setState({ formInComplete: false })
     switch (name) {
       case 'guidePeople':
         let newGuidePeople = arrayOnChange(e, guidePeople)
@@ -134,7 +143,7 @@ class Forms extends Component {
 
   render() {
     const { err, volunteer } = this.props
-    const { disabled, acknowledgement } = this.state
+    const { disabled, acknowledgement, formInComplete } = this.state
     if (volunteer && volunteer._id) {
       return (
         <div className="form-container container p-4">
@@ -152,7 +161,7 @@ class Forms extends Component {
     return (
       <div className="form-container container">
         <div>
-          <Header err={err} />
+          <Header err={err} formInComplete={formInComplete} />
           <form className="mb-4" onSubmit={this.handleSubmit} method="post">
             <Inputs
               {...this.props}

src/Components/forms/inputs/textArea.js

@@ -23,7 +23,6 @@ export default ({
         value={value}
         onChange={onChange}
       />
-      {isEmpty && <span>{window.scrollTo(0, 200)}</span>}
     </FormGroup>
   )
 }

src/Components/forms/inputs/textInput.js

@@ -21,7 +21,6 @@ export default ({
         value={value}
         onChange={onChange}
       />
-      {isEmpty && <span>{window.scrollTo(0, 200)}</span>}
     </FormGroup>
   )
 }