Findify Challenge

findify_challenge.md

TASK:

Implement a "withModal" high order component (HOC) that will accept two arguments [modalName: String] and [modalComponent: React.Component]. It should render a "modalComponent" into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' handlers into a new collection of props that are passed to the base component. For instance:

import React, { Fragment } from 'react'
import { createPortal } from 'react-dom'

import {
  withStateHandlers,
  withProps,
  mapProps,
} from 'recompose'

const Modal = mapProps(({ close, title, ...props }) => ({
  ...props,
  children: `Hide ${title} modal`,
  onClick: close,
}))('button')

const ModalButton = withProps({
  children: 'Open modal',
})('button')

const withModal =
  (modalNode, modalName, ModalComponent) =>
    ButtonComponent => withStateHandlers({
      isOpen: false,
    }, {
      open: () => () => ({ isOpen: true }),
      close: () => () => ({ isOpen: false }),
    })(({ isOpen, open, close, buttonProps, ...modalProps }) => (
      <Fragment>
        {isOpen && createPortal(
          <ModalComponent {...modalProps} title={modalName} close={close} />,
          modalNode,
        )}
        <ButtonComponent {...buttonProps} onClick={open} />
      </Fragment>
    ))

export const PricingModal = withModal(
  document.getElementById('modals'),
  'pricing',
  Modal,
)(ModalButton)