High Order Context

optionalWrapper.js

const ThingsWrapper = (props) => {
  const { userID } = props
  const {
    things,
    setThings
  } = useThingsContext()

  const [newThings] = useApi('GET', `${BASE_URL}/things`, null)

  useEffect(() => {
    if (newThings) {
      setThings(newThings)
    }
  }, [newThings])

  return (
    <>
    </>
  )
}

export default ThingsWrapper

sampleUse.js

export default withThings({
  props: {
    foo: 'thing'
  }
})(ComponentUsingThings)

thingsContext.js

import { createContext, useContext } from 'react'

export const INITIAL_FOO_STATE = {
  bar: 0
}

export const ThingsContext = createContext({
  ...INITIAL_FOO_STATE,
  things: null,
  setThings: () => {}
})

export const useThingsContext = () => {
  const context = useContext(ThingsContext)
  return context
}

withThings.js

const withThings = (props) => (InnerComponent) => (innerProps) => {

  const [things, setThings] = useState()

  const thingsObject = {
    things,
    setThings
  }


  return (
    <>
      <Things.Provider value={thingsObject}>
        <InnerComponent {...innerProps} />
      </SearchValuesContext.Provider>
    </>
  )
}

export default withThings