Merge pull request #151 from CodeYourFuture/feature-create-a-DB-of-employer-names-for-volunteer-form

feature-create-a-DB-collection(table)-for-employer-names-for-volunteer-form[QA]

Author: AL-ASHMALI

e2e/fixtures/employers.json

@@ -0,0 +1,8 @@
+{
+  "employers": [
+    {
+      "_id": "6569",
+      "name": "Capgemini"
+    }
+  ]
+}

e2e/integration/journey.test.js

@@ -7,6 +7,9 @@ beforeEach(() => {
   cy.intercept('GET', `${mockServerURL}/teams`, {
     fixture: 'teams.json'
   })
+  cy.intercept('GET', `${mockServerURL}/employers`, {
+    fixture: 'employers.json'
+  })
   cy.visit('/')
 })
 
@@ -122,13 +125,13 @@ it('requires employee selection', () => {
   cy.findByRole('button', { name: /submit/i }).click()
   cy.findByText(/form is incomplete/i).should('exist')
   cy.findByRole('combobox', { name: /who is your employer/i }).type(
-    'Cap{enter}'
+    'Capgemini{enter}'
   )
   cy.findByRole('button', { name: /submit/i }).click()
 
   cy.wait('@createVolunteer').then(({ request: { body: payload } }) => {
     expect(payload).to.have.property('hearAboutCYF', 'Employer')
-    expect(payload).to.have.property('employer', 'Capgemini')
+    expect(payload).to.have.property('employer', '6569')
   })
 })
 

src/Components/forms/data.json

@@ -47,82 +47,6 @@
     { "name": "Other", "_id": "Other" }
   ],
 
-  "employerList": [
-    { "name": "2I", "_id": "2I" },
-    { "name": "Adyen", "_id": "Adyen" },
-    { "name": "And Digital", "_id": "And Digital" },
-    { "name": "Apolitical", "_id": "Apolitical" },
-    { "name": "Arnold Clark", "_id": "Arnold Clark" },
-    { "name": "Avaloq", "_id": "Avaloq" },
-    { "name": "Avanade", "_id": "Avanade" },
-    { "name": "Bankifi", "_id": "Bankifi" },
-    { "name": "BJSS", "_id": "BJSS" },
-    { "name": "BMChealth", "_id": "BMChealth" },
-    { "name": "British Gas", "_id": "British Gas" },
-    { "name": "Capgemini", "_id": "Capgemini" },
-    { "name": "Carnall Farrar", "_id": "Carnall Farrar" },
-    { "name": "Cinch", "_id": "Cinch" },
-    { "name": "CoinCover", "_id": "CoinCover" },
-    { "name": "Comic Relief", "_id": "Comic Relief" },
-    { "name": "Cord", "_id": "Cord" },
-    { "name": "Covatic", "_id": "Covatic" },
-    { "name": "DAI", "_id": "DAI" },
-    { "name": "Deliveroo", "_id": "Deliveroo" },
-    { "name": "Deloitte", "_id": "Deloitte" },
-    { "name": "DF Capital", "_id": "DF Capital" },
-    { "name": "Digital Cabinet Office", "_id": "Digital Cabinet Office" },
-    { "name": "EDF", "_id": "EDF" },
-    { "name": "EY (SA)", "_id": "EY (SA)" },
-    { "name": "FlexJobs", "_id": "FlexJobs" },
-    { "name": "Forum Systems", "_id": "Forum Systems" },
-    { "name": "FourKites", "_id": "FourKites" },
-    { "name": "Free Agent", "_id": "Free Agent" },
-    { "name": "G-Research", "_id": "G-Research" },
-    { "name": "Google", "_id": "Google" },
-    { "name": "Hackajob", "_id": "Hackajob" },
-    { "name": "Hippo Digital", "_id": "Hippo Digital" },
-    { "name": "Hired", "_id": "Hired" },
-    { "name": "Holoxica", "_id": "Holoxica" },
-    { "name": "Hudson River Trading", "_id": "Hudson River Trading" },
-    { "name": "Infinity Works", "_id": "Infinity Works" },
-    { "name": "Jaguar LandRover", "_id": "Jaguar LandRover" },
-    { "name": "K+C", "_id": "K+C" },
-    { "name": "KrakenFlex", "_id": "KrakenFlex" },
-    { "name": "Lush", "_id": "Lush" },
-    { "name": "LVNDR", "_id": "LVNDR" },
-    { "name": "Made", "_id": "Made" },
-    { "name": "MadeTech", "_id": "MadeTech" },
-    { "name": "Makers", "_id": "Makers" },
-    { "name": "Meta", "_id": "Meta" },
-    { "name": "Microsoft", "_id": "Microsoft" },
-    { "name": "Multitudes", "_id": "Multitudes" },
-    { "name": "Multiverse", "_id": "Multiverse" },
-    { "name": "MVF", "_id": "MVF" },
-    { "name": "Nat West", "_id": "Nat West" },
-    { "name": "NooS", "_id": "NooS" },
-    { "name": "Oak Academy", "_id": "Oak Academy" },
-    { "name": "Open Science Tools", "_id": "Open Science Tools" },
-    { "name": "Overleaf", "_id": "Overleaf" },
-    { "name": "PAZ", "_id": "PAZ" },
-    { "name": "Planes Agency", "_id": "Planes Agency" },
-    { "name": "Pollinate", "_id": "Pollinate" },
-    { "name": "PWC", "_id": "PWC" },
-    { "name": "Remote.com", "_id": "Remote.com" },
-    { "name": "Rocket Mill", "_id": "Rocket Mill" },
-    { "name": "RoundCorp", "_id": "RoundCorp" },
-    { "name": "Scottish Power", "_id": "Scottish Power" },
-    { "name": "Shopify", "_id": "Shopify" },
-    { "name": "Slack", "_id": "Slack" },
-    { "name": "Sopra Steria", "_id": "Sopra Steria" },
-    { "name": "Stitch", "_id": "Stitch" },
-    { "name": "Substakt", "_id": "Substakt" },
-    { "name": "Talent Heroes", "_id": "Talent Heroes" },
-    { "name": "The Developer Society", "_id": "The Developer Society" },
-    { "name": "University of Arts", "_id": "University of Arts" },
-    { "name": "Venditan", "_id": "Venditan" },
-    { "name": "Yoti", "_id": "Yoti" }
-  ],
-
   "radioButtonList": [
     { "value": "None", "_id": "None" },
     { "value": "Some", "_id": "Some" },

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,8 +406,10 @@ class Forms extends Component {
                 telOnChange={this.telOnChange}
                 onChangeCheckList={this.onChangeCheckList}
                 teamOptions={this.state.teamOptions}
+                employersOptions={this.state.employersOptions}
                 {...this.props}
                 {...this.state}
+                postNewEmployer={this.postNewEmployer}
               />
               <Acknowledgement onChange={this.onChange} {...this.state} />
               <button

src/Components/forms/inputs/EmployerDropDown.js

@@ -44,7 +44,7 @@ const EmployerDropDown = ({
           setOptions(oldOptions => insertedInto(oldOptions, newEmployer))
           handleChange(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

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