Refactor unverified & guest modal

[pattruong]

Overview

const triggerUnverifiedModal = useCallback(() => {
  open()
  setModalAlert(false)
  setContent('unverified')
}, [open, setModalAlert, setContent])

Currently unverified modal and guest modal is commonly used but takes up a lot of boilerplate

Boilerplate

const {
  isSuccess,
  isPending,
  open,
  content,
  setContent,
  setModalAlert,
  reset,
} = useModal()

const triggerUnverifiedModal = useCallback(() => {
  open()
  setModalAlert(false)
  setContent('unverified')
}, [open, setModalAlert, setContent])

const goToCreate = () => {
  if (isVerified) {
    history.push(`${url}/new`)
  } else if (isAuthenticated) {
    triggerUnverifiedModal()
  } else {
    open()
    setContent('login', 'You must be logged in to create a recipe')
  }
}

useEffect(() => {
  if (!isPending && isSuccess && content === 'login' && isVerified) {
    // need to clear modal settings so that going back
    // to this page doesn't retrigger this effect
    reset()
    history.push(`${url}/new`)
  }
}, [isPending, isSuccess, content, isVerified, url, history, reset])

Changes we want

• make it so you can just get const { triggerUnverifiedModal, triggerGuestModal } = useModal() and not have to reconstruct the functions each time
• investigate if we can simplify the isSuccess status to not have to do so many low level checks — content check & reset()
• Example of complex isSuccess status check

useEffect(() => {
  if (!isPending && isSuccess && content === 'login' && isVerified) {
    // need to clear modal settings so that going back
    // to this page doesn't retrigger this effect
    reset()
    history.push(`${url}/new`)
  }
}, [isPending, isSuccess, content, isVerified, url, history, reset])