Store new employers in session

Author: textbook

e2e/integration/journey.test.js

@@ -132,6 +132,15 @@ it('can create a new employer', () => {
   )
   cy.findByText('Weyland Yutani').should('exist')
   cy.findByText(/Make sure you typed it correctly\./).should('exist')
+  cy.visit('/')
+  cy.findByRole('combobox', { name: /hear about code your future/i }).select(
+    'Employer'
+  )
+  cy.findByRole('combobox', { name: /who is your employer/i }).type(
+    'yutani{enter}'
+  )
+  cy.findByText('Weyland Yutani').should('exist')
+  cy.findByText(/Make sure you typed it correctly\./).should('exist')
 })
 
 const setExperience = (topic, level) => {

src/Components/forms/inputs/EmployerDropDown.js

@@ -1,14 +1,21 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { Label } from 'reactstrap'
 import Select from 'react-select/creatable'
 
+import useSession from '../../../hooks/useSession'
+
 const EmployerDropDown = ({
   arrayList: employers,
   isEmpty,
   onChange,
   value
 }) => {
-  const [options, setOptions] = useState([])
+  const [options, setOptions] = useSession('cyfEmployerList', () =>
+    employers.map(({ _id, name }) => ({
+      value: _id,
+      label: name
+    }))
+  )
 
   const isCustomEntry = useMemo(
     () => value !== '' && !employers.some(({ name }) => name === value),
@@ -20,15 +27,6 @@ const EmployerDropDown = ({
     [options, value]
   )
 
-  useEffect(() => {
-    setOptions(
-      employers.map(({ _id, name }) => ({
-        value: _id,
-        label: name
-      }))
-    )
-  }, [employers])
-
   const handleChange = value =>
     onChange({ target: { name: 'employer', type: 'text', value } })
 

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

@@ -5,6 +5,10 @@ import selectEvent from 'react-select-event'
 import EmployerDropDown from './EmployerDropDown'
 
 describe('EmployerDropDown', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
   it('shows the label value and place holder value', async () => {
     renderInForm({ employers: ['Arnold Clark'] })
     expect(screen.getByTestId('form')).toHaveTextContent(

src/hooks/useSession.js

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Behaves like useState but with the value retained in sessionStorage.
+ *
+ * @template T
+ * @param {string} key
+ * @param {(T | (() => T))=} initialValue
+ * @returns {[T | null, (newValue: T | ((oldValue: T) => T)) => void]}
+ */
+export default function useSession(key, initialValue) {
+  const [data, setData] = useState(startValue(key, initialValue))
+  const updateData = useCallback(
+    newData => {
+      setData(oldData => stored(key, callIfFunc(newData, oldData)))
+    },
+    [key]
+  )
+  return [data, updateData]
+}
+
+const callIfFunc = (maybeFunc, ...args) =>
+  typeof maybeFunc === 'function' ? maybeFunc(...args) : maybeFunc
+
+const retrieved = key => {
+  return JSON.parse(sessionStorage.getItem(key))
+}
+
+const startValue = (key, initialValue) => {
+  return retrieved(key) ?? stored(key, callIfFunc(initialValue))
+}
+
+const stored = (key, value = null) => {
+  sessionStorage.setItem(key, JSON.stringify(value))
+  return value
+}

src/hooks/useSession.test.js

@@ -0,0 +1,73 @@
+import { act, renderHook } from '@testing-library/react'
+
+import useSession from './useSession'
+
+describe('useSession', () => {
+  const key = 'SOME_RANDOM_KEY'
+
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
+  describe('initial value', () => {
+    it('uses the session value if available', () => {
+      sessionStorage.setItem(key, '{"foo":"bar"}')
+      const {
+        result: {
+          current: [data]
+        }
+      } = renderHook(() => useSession(key, { something: 'else' }))
+      expect(data).toEqual({ foo: 'bar' })
+      expect(sessionStorage.getItem(key)).toBe('{"foo":"bar"}')
+    })
+
+    it('uses null by default', () => {
+      const {
+        result: {
+          current: [data]
+        }
+      } = renderHook(() => useSession(key))
+      expect(data).toBeNull()
+      expect(sessionStorage.getItem(key)).toBe('null')
+    })
+
+    it('uses initial value if provided', () => {
+      const {
+        result: {
+          current: [data]
+        }
+      } = renderHook(() => useSession(key, { foo: 'bar' }))
+      expect(data).toEqual({ foo: 'bar' })
+      expect(sessionStorage.getItem(key)).toBe('{"foo":"bar"}')
+    })
+
+    it('accepts a function returning initial value', () => {
+      const {
+        result: {
+          current: [data]
+        }
+      } = renderHook(() => useSession(key, () => ({ foo: 'bar' })))
+      expect(data).toEqual({ foo: 'bar' })
+      expect(sessionStorage.getItem(key)).toBe('{"foo":"bar"}')
+    })
+  })
+
+  describe('updating', () => {
+    it('updates the value asked', async () => {
+      const { result } = renderHook(() => useSession(key))
+      act(() => result.current[1]({ foo: 'bar' }))
+      expect(result.current[0]).toEqual({ foo: 'bar' })
+      expect(sessionStorage.getItem(key)).toBe('{"foo":"bar"}')
+    })
+
+    it('accepts a functional update', () => {
+      const { result } = renderHook(() => useSession(key, { foo: 'bar' }))
+      act(() => result.current[1](previous => ({ ...previous, baz: 'qux' })))
+      expect(result.current[0]).toEqual({ foo: 'bar', baz: 'qux' })
+      expect(JSON.parse(sessionStorage.getItem(key))).toEqual({
+        foo: 'bar',
+        baz: 'qux'
+      })
+    })
+  })
+})