Add new entry to list

Author: textbook

e2e/integration/journey.test.js

@@ -123,6 +123,16 @@ it('requires employee selection', () => {
   })
 })
 
+it('can create a new employer', () => {
+  cy.findByRole('combobox', { name: /hear about code your future/i }).select(
+    'Employer'
+  )
+  cy.findByRole('combobox', { name: /who is your employer/i }).type(
+    'Weyland Yutani{enter}'
+  )
+  cy.findByText('Weyland Yutani').should('exist')
+})
+
 const setExperience = (topic, level) => {
   cy.findByRole('checkbox', { name: new RegExp(topic, 'i') })
     .check()

src/Components/forms/inputs/EmployerDropDown.js

@@ -1,12 +1,21 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { Label } from 'reactstrap'
 import Select from 'react-select/creatable'
 
-const EmployerDropDown = ({ onChange, isEmpty, arrayList }) => {
-  const employersList = arrayList.map(({ _id, name }) => ({
-    value: _id,
-    label: name
-  }))
+const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
+  const [employersList, setEmployersList] = useState([])
+  useEffect(() => {
+    setEmployersList(
+      arrayList.map(({ _id, name }) => ({
+        value: _id,
+        label: name
+      }))
+    )
+  }, [arrayList])
+  const handleChange = e =>
+    onChange({
+      target: { name: 'employer', type: 'text', value: e.value }
+    })
   return (
     <div className="form-group">
       <Label htmlFor="employer">Who is your employer? *</Label>
@@ -15,13 +24,20 @@ const EmployerDropDown = ({ onChange, isEmpty, arrayList }) => {
         inputId="employer"
         isSearchable
         options={employersList}
-        onChange={e =>
-          onChange({
-            target: { name: 'employer', type: 'text', value: e.value }
-          })
-        }
+        onChange={handleChange}
+        onCreateOption={newEmployer => {
+          setEmployersList(oldList => [
+            ...oldList,
+            {
+              label: newEmployer,
+              value: newEmployer
+            }
+          ])
+          handleChange({ value: newEmployer })
+        }}
         name="employer"
         placeholder="Type your employer name here"
+        value={employersList.find(employer => employer.value === value)}
       />
     </div>
   )

src/Components/forms/inputs/EmployerDropDown.test.js

@@ -62,6 +62,23 @@ describe('EmployerDropDown', () => {
     })
   })
 
+  it('adds the new employer to the list', async () => {
+    const { user } = renderInForm({ employers: ['ABC', 'BBC', 'CBC'] })
+    await user.type(
+      screen.getByRole('combobox', { name: /employer/i }),
+      'Google'
+    )
+    await user.click(screen.getByText('Create "Google"'))
+    await selectEvent.select(
+      screen.getByLabelText(/who is your employer/i),
+      'BBC'
+    )
+    await selectEvent.select(
+      screen.getByLabelText(/who is your employer/i),
+      'Google'
+    )
+  })
+
   it('shows the expected values in AC', async () => {
     const { user } = renderInForm({
       employers: [

src/Components/forms/inputs/index.js

@@ -29,7 +29,8 @@ export default class VolunteerForm extends Component {
       onChangeCheckList,
       guidePeople,
       techSkill,
-      otherSkill
+      otherSkill,
+      employer
     } = this.props
 
     return (
@@ -122,9 +123,10 @@ export default class VolunteerForm extends Component {
         />
         {hearAboutCYFFromEmployer && (
           <EmployerDropDown
-            onChange={onChange}
             arrayList={ListsData.employerList}
             isEmpty={errors.employer}
+            onChange={onChange}
+            value={employer}
           />
         )}
         <span className="contact-interested">