fix bugs

Author: Wolfjawan

src/Components/forms/helper.js

@@ -32,22 +32,21 @@ export const initialState = {
 
 export const arrayOnChange = (e, array) => {
   let newArray
-  const { checked, value, name } = e.target
-  const nValue = value.split('-')
+  const { checked, value, name, type } = e.target
   newArray = array.map(item => {
     if (name === item.label) {
-      if (nValue[0] === 'checkBox') {
+      if (type === 'checkbox') {
         return {
           name: checked ? name : '',
           level: checked ? item.level : '',
           label: item.label,
           id: item.id
         }
       }
-      if (nValue[0] === 'radioButton') {
+      if (type === 'radio') {
         return {
           name: checked ? name : '',
-          level: checked ? nValue[1] : '',
+          level: checked ? value : '',
           label: item.label,
           id: item.id
         }

src/Components/forms/index.css

@@ -79,7 +79,6 @@
 }
 .form-table-tr-is-empty {
   border-bottom: 1px solid rgb(250, 26, 26);
-  border-left: 1px solid rgb(250, 26, 26);
 }
 .form-table-td {
   padding: 0% !important;

src/Components/forms/index.js

@@ -20,24 +20,12 @@ class Forms extends Component {
   }
 
   onChange = e => {
-    const { name, value } = e.target
+    const { name, value, type, checked } = e.target
     const { errors } = this.state
     errors[name] = false
     if (e && e.target) {
       this.setState({
-        [name]: value,
-        submitted: false,
-        errors
-      })
-    }
-  }
-  onChangeAcknowledgement = e => {
-    const { name, checked } = e.target
-    const { errors } = this.state
-    errors[name] = false
-    if (e && e.target) {
-      this.setState({
-        [name]: checked,
+        [name]: type === 'checkbox' ? checked : value,
         submitted: false,
         errors
       })
@@ -62,7 +50,10 @@ class Forms extends Component {
   validateArray = values => {
     Object.keys(values).map(value => {
       const newValue = values[value].map(item => {
-        if (item.name !== '' && item.level === '') {
+        if (
+          (item.name !== '' && item.level === '') ||
+          item.level === "It's empty"
+        ) {
           this.setState({ valuationError: true })
           return {
             id: item.id,
@@ -104,7 +95,7 @@ class Forms extends Component {
       interestedInCYF,
       acknowledgement
     })
-    this.validateArray({ guidePeople, techSkill, otherSkill })
+    await this.validateArray({ guidePeople, techSkill, otherSkill })
     const emptyValues = validatedInputs.includes(true)
     if (!emptyValues && !valuationError) {
       this.props.createVolunteerHandler({
@@ -167,7 +158,7 @@ class Forms extends Component {
               onChangeCheckList={this.onChangeCheckList}
             />
             <Acknowledgement
-              onChange={this.onChangeAcknowledgement}
+              onChange={this.onChange}
               checked={this.state.acknowledgement}
               isEmpty={this.state.errors.acknowledgement}
             />

src/Components/forms/inputs/tableTb.js

@@ -16,7 +16,7 @@ export default ({ onChange, list, name }) => {
           >
             <td className="form-table-td row">
               <CheckBox
-                value={`checkBox-${listItem.id}`}
+                value={listItem.id}
                 onChange={e => onChange(e, name)}
                 label={listItem.label}
                 name={listItem.label}
@@ -27,9 +27,9 @@ export default ({ onChange, list, name }) => {
                 <input
                   type="text"
                   name={listItem.label}
-                  placeholder=""
+                  placeholder={` Other`}
                   className="ml-5"
-                  value={listItem.level}
+                  value={listItem.level === "It's empty" ? '' : listItem.level}
                   onChange={e => onChange(e, name)}
                 />
               )}
@@ -38,7 +38,7 @@ export default ({ onChange, list, name }) => {
               ListsData.radioButtonList.map(item => (
                 <td className="form-table-td" key={item._id}>
                   <RadioButton
-                    value={`radioButton-${item._id}`}
+                    value={item._id}
                     onChange={e => onChange(e, name)}
                     name={listItem.label}
                     checked={listItem.level === item._id}

src/Components/forms/inputs/textArea.js

@@ -4,7 +4,6 @@ export default ({
   value,
   onChange,
   isEmpty,
-  emailExist,
   label,
   name,
   placeholder,
@@ -25,12 +24,7 @@ export default ({
         value={value}
         onChange={onChange}
       />
-      {emailExist && (
-        <span style={{ color: '#dc0000' }}>
-          This email already exist.
-          {window.scrollTo(0, 200)}
-        </span>
-      )}
+      {isEmpty && <span>{window.scrollTo(0, 200)}</span>}
     </div>
   )
 }

src/Components/forms/inputs/textInput.js

@@ -4,7 +4,6 @@ export default ({
   value,
   onChange,
   isEmpty,
-  emailExist,
   label,
   name,
   placeholder,
@@ -24,12 +23,7 @@ export default ({
         value={value}
         onChange={onChange}
       />
-      {emailExist && (
-        <span style={{ color: '#dc0000' }}>
-          This email already exist.
-          {window.scrollTo(0, 200)}
-        </span>
-      )}
+      {isEmpty && <span>{window.scrollTo(0, 200)}</span>}
     </div>
   )
 }