AppModal.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Modal } from 'components/common'
import LogoutPrompt from './modalComponents/LogoutPrompt'
import CreateFrenchFries from './modalComponents/CreateFrenchFries'
import CreateMashedPotatoes from './modalComponents/CreateMashedPotatoes'
import DeleteFrenchFries from './modalComponents/DeleteFrenchFries'
import DeleteMashedPotatoes from './modalComponents/DeleteMashedPotatoes'
import EditMashedPotatoes from './modalComponents/EditMashedPotatoes'
import UpdatePassword from './modalComponents/UpdatePassword'
import SigninSignup from './modalComponents/SigninSignup'
import * as c from '../constants'

function AppModal() {
  const modal = useSelector(selectModal)
  const dispatchRedux = useDispatch()
  const isLoggedIn = true
  function closeModal() {
    if (isLoggedIn) {
      dispatchRedux(toggle({ opened: false, context: '' }))
    }
  }
  
  let Component: React.ElementType<any>
  
  switch (modal.context) {
    case c.LOGOUT_PROMPT:
      Component = LogoutPrompt
      break
    case c.CREATE_FRENCH_FRIES:
      Component = CreateFrenchFries
      break
    case c.CREATE_MASHED_POTATOES:
      Component = CreateMashedPotatoes
      break
    case c.DELETE_FRENCH_FRIES:
      Component = DeleteFrenchFries
      break
    case c.DELETE_MASHED_POTATOES:
      Component = DeleteMashedPotatoes
      break
    case c.EDIT_MASHED_POTATOES:
      Component = EditMashedPotatoes
      break
    case c.UPDATE_PASSWORD:
      Component = UpdatePassword
      break
    default:
      break
  }
}

// @ts-ignore
let Component: React.ElementType<any> = modalComponents[modal.context]

if (!Component) {
  if (!isLoggedIn) {
    Component = SigninSignup
  } else {
    Component = 'div'
  }
}

return (
  <Modal opened={modal.opened || !isLoggedIn} onClose={closeModal}>
    <>
      <Component {...modal} closeModal={closeModal} />
    </>
  </Modal>
)