function to create High Order Component factories

createHOC.js

// source: https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
export function getDisplayName (Component) {
  return Component.displayName || Component.name || 'Component'
}

export const createHOC = Component => params => BaseComponent => {
  const WrappedComponent = props => (
    <Component {...params}>
      <BaseComponent {...props} />
    </Component>
  )

  /* prettier-ignore */
  WrappedComponent.displayName = `with${getDisplayName(Component)}(${getDisplayName(BaseComponent)})`

  // eslint-disable-next-line react/forbid-foreign-prop-types
  if (BaseComponent.propTypes) {
    WrappedComponent.propTypes = BaseComponent.propTypes
  }

  return WrappedComponent
}