Create fetch fucntion to get employers data from the database

Author: khmdagal

src/Components/forms/index.js

@@ -13,11 +13,13 @@ const path = `${domain()}${appPath}`
 class Forms extends Component {
   state = {
     teamOptions: [],
+    employersOptions: [],
     ...initialState
   }
 
   componentDidMount() {
     this.fetchTeamData()
+    this.fetchEmployers()
   }
 
   fetchTeamData = async () => {
@@ -34,6 +36,17 @@ class Forms extends Component {
     }
   }
 
+  fetchEmployers = async () => {
+    try {
+      const employersResponse = await axios.get(`${domain()}/employers`)
+      const employersData = employersResponse.data.employers
+      employersData.sort((a, b) => a.name.localeCompare(b.name))
+      this.setState({ employersOptions: employersData })
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
   handleMagicLinkRequest = async e => {
     e.preventDefault()
     const { email, userId } = this.state
@@ -393,6 +406,7 @@ class Forms extends Component {
                 telOnChange={this.telOnChange}
                 onChangeCheckList={this.onChangeCheckList}
                 teamOptions={this.state.teamOptions}
+                employersOptions={this.state.employersOptions}
                 {...this.props}
                 {...this.state}
               />

src/Components/forms/inputs/index.js

@@ -32,6 +32,7 @@ export default class VolunteerForm extends Component {
       guidePeople,
       techSkill,
       otherSkill,
+      employersOptions,
       employer
     } = this.props
 
@@ -146,10 +147,10 @@ export default class VolunteerForm extends Component {
         />
         {hearAboutCYFFromEmployer && (
           <EmployerDropDown
-            arrayList={ListsData.employerList}
+            arrayList={employersOptions}
             isEmpty={errors.employer}
             onChange={onChange}
-            value={employer}
+            value={employersOptions}
           />
         )}
         <span className="contact-interested">