Modals with hooks!

SampleModal.tsx

import React from 'react'
import { Button, Modal } from '@trussworks/react-uswds'

import { connectModal,
  ModalProps,
} from './useModal'

interface ConfirmCloseInvestigationModalProps extends ModalProps {
  casefileNumber: string
  onConfirm?: () => void
}

const ConfirmCloseInvestigationModal = ({
  casefileNumber,
  onClose,
  onConfirm,
}: ConfirmCloseInvestigationModalProps): React.ReactElement => (
  <Modal
    title={<h2>Close case?</h2>}
    actions={
      <>
        <Button type="button" outline onClick={onClose}>
          Cancel
        </Button>
        <Button type="button" onClick={onConfirm}>
          Close investigation
        </Button>
      </>
    }>
    <p>
      This will close your investigative work for{' '}
      <strong>Case #{casefileNumber}</strong> and forward the case to
      adjudication.
    </p>
  </Modal>
)

export default ConfirmCloseInvestigationModal

export const ConnectedConfirmCloseInvestigationModal = connectModal(
  ConfirmCloseInvestigationModal
)

SamplePage.tsx

import React from 'react'
import { Button } from '@trussworks/react-uswds'

import { useModal } from './useModal'
import { ConnectedConfirmCloseInvestigationModal } from './SampleModal'

const MyWebsite = (): React.ReactElement => {
  const { isOpen, openModal, closeModal } = useModal()

return (
<div>
  <Button type="button" onClick={openModal}>Open the modal!</Button>
  <ConnectedConfirmCloseInvestigationModal isOpen={isOpen} onClose={closeModal} />
</div>
)

useModal.tsx

import React, { useState } from 'react'
import { Overlay, ModalContainer } from '@trussworks/react-uswds'

export interface ModalProps {
  isOpen: boolean
  onClose: () => void
}

export const connectModal = function<P extends ModalProps>(
  Component: React.FunctionComponent<P> | React.ComponentType<P>
): React.FunctionComponent<P> {
  const ConnectedModal = ({
    isOpen,
    ...props
  }: P): React.ReactElement | null => {
    if (!isOpen) return null
    return (
      <>
        <Overlay />
        <ModalContainer>
          <Component {...(props as P)} />
        </ModalContainer>
      </>
    )
  }

  return ConnectedModal
}

type ModalHook = {
  isOpen: boolean
  openModal: () => void
  closeModal: () => void
}

export const useModal = (): ModalHook => {
  const [isOpen, setIsOpen] = useState(false)

  const openModal = (): void => {
    setIsOpen(true)
  }
  const closeModal = (): void => {
    setIsOpen(false)
  }

  return { isOpen, openModal, closeModal }
}