Create a POST request to post new employer name to the database and sort employers alphabetically

Author: khmdagal

src/Components/forms/index.js

@@ -178,6 +178,22 @@ class Forms extends Component {
     })
   }
 
+  postNewEmployer = async employer => {
+    try {
+      const newEmployerResponse = await axios({
+        method: 'POST',
+        url: `${domain()}/employers`,
+        data: employer
+      })
+      const newEmployer = newEmployerResponse.data
+      return newEmployer
+    } catch (err) {
+      return this.setState({
+        err: `Sorry, your employer's name has not been saved.`
+      })
+    }
+  }
+
   handleSubmit = async e => {
     e.preventDefault()
     this.setState({
@@ -409,6 +425,7 @@ class Forms extends Component {
                 employersOptions={this.state.employersOptions}
                 {...this.props}
                 {...this.state}
+                postNewEmployer={this.postNewEmployer}
               />
               <Acknowledgement onChange={this.onChange} {...this.state} />
               <button

src/Components/forms/inputs/EmployerDropDown.js

@@ -8,7 +8,8 @@ const EmployerDropDown = ({
   arrayList: employers,
   isEmpty,
   onChange,
-  value
+  value,
+  postNewEmployer
 }) => {
   const [options, setOptions] = useSession('cyfEmployerList', () =>
     employers.map(({ _id, name }) => ({
@@ -43,8 +44,9 @@ const EmployerDropDown = ({
         onCreateOption={newEmployer => {
           setOptions(oldOptions => insertedInto(oldOptions, newEmployer))
           handleChange(newEmployer)
+          postNewEmployer({ name: `${newEmployer}` })
         }}
-        options={options}
+        options={options.sort((a, b) => a.label.localeCompare(b.label))}
         placeholder="Type your employer name here"
         value={selectedOption}
       />

src/Components/forms/inputs/index.js

@@ -33,7 +33,8 @@ export default class VolunteerForm extends Component {
       techSkill,
       otherSkill,
       employersOptions,
-      employer
+      employer,
+      postNewEmployer
     } = this.props
 
     return (
@@ -150,7 +151,8 @@ export default class VolunteerForm extends Component {
             arrayList={employersOptions}
             isEmpty={errors.employer}
             onChange={onChange}
-            value={employersOptions}
+            value={employer}
+            postNewEmployer={postNewEmployer}
           />
         )}
         <span className="contact-interested">