withModal.js

import React from 'react'
import { omit } from 'lodash'
import { connect } from 'react-redux'
import { compose } from 'recompose'

import Modal from './Modal'
import { showModal, hideModal, setModalError } from '../redux/modal'

const mapState = state => ({
  modalsVisibility: omit(state.modal, 'props'),
  modalProps: state.modal.props,
  modalError: state.modal.error,
})

const mapDispatch = modalKey => (dispatch, propss) => ({
  hideModal: () => dispatch(hideModal()),
  showModal: (modalProps = {}) => dispatch(showModal(modalKey, modalProps)),
  setModalError: errorMessage => dispatch(setModalError(errorMessage)),
})

const mapDispatch2 = (dispatch, props) => ({
  hideModal: () => dispatch(hideModal()),
  showModal: (modalProps = {}) => {
    console.log('showing modal dispatch', modalProps, props)
    dispatch(showModal(props.modalKey, modalProps))
  },
  setModalError: errorMessage => dispatch(setModalError(errorMessage)),
})

export const withModal2 = mapperFn => BaseComponent =>
  compose(connect(mapState, mapDispatch2))(baseProps => {
    const { modalComponent: Component, overlayColor } = mapperFn(baseProps)
    const {
      hideModal,
      modalProps,
      modalError,
      modalsVisibility,
      modalKey,
      showModal,
      ...rest
    } = baseProps
    return (
      <React.Fragment>
        {modalsVisibility[modalKey] && (
          <Modal
            {...modalProps}
            component={Component}
            hideModal={hideModal}
            modalError={modalError}
            overlayColor={overlayColor}
            setModalError={setModalError}
            showModal={showModal}
          />
        )}
        <BaseComponent
          hideModal={hideModal}
          setModalError={setModalError}
          showModal={showModal}
          {...rest}
        />
      </React.Fragment>
    )
  })

const withModal = ({
  modalKey,
  modalComponent: Component,
  overlayColor,
  ...rest
}) => WrappedComponent =>
  connect(mapState, mapDispatch(modalKey))(
    ({
      modalsVisibility,
      modalProps,
      modalError,
      hideModal,
      showModal,
      setModalError,
      ...rest
    }) => (
      <React.Fragment>
        {modalsVisibility[modalKey] && (
          <Modal
            {...modalProps}
            component={Component}
            hideModal={hideModal}
            modalError={modalError}
            overlayColor={overlayColor}
            setModalError={setModalError}
            showModal={showModal}
          />
        )}
        <WrappedComponent
          hideModal={hideModal}
          setModalError={setModalError}
          showModal={showModal}
          {...rest}
        />
      </React.Fragment>
    ),
  )

export default withModal