WelcomeModalContainer.tsx

import React, { useState, useEffect } from 'react'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import { translate } from 'cozy-ui/react/I18n'
import { withClient, Client } from 'cozy-client'
import { USERPROFILE_DOCTYPE } from 'doctypes'
import useInstanceSettings from 'components/Hooks/userInstanceSettings'

interface WelcomeModalContainerProps {
  t: Function
  client: Client
}

const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
  t,
  client,
}: WelcomeModalContainerProps) => {
  const [modalOpen, setModalOpen] = useState<boolean>(false)
  const [modalExist, setModalExist] = useState<boolean>(false)

  const { data: instanceSettings } = useInstanceSettings(client)
  async function updateWelcomeModalState() {
    await client
      .query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
      .then(async ({ data }) => {
        const doc = data[0]
        await client.save({
          ...doc,
          haveSeenWelcomeModal: true,
        })
      })
  }

  const handleCloseClick = () => {
    setModalOpen(false)
    updateWelcomeModalState()
  }

  useEffect(() => {
    async function getWelcomeModalState() {
      await client
        .query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
        .then(async ({ data }) => {
          const welcomeModalState = data[0].haveSeenWelcomeModal
          if (!welcomeModalState) {
            setModalExist(true)
          }
        })
    }
    getWelcomeModalState()
  }, [])

  useEffect(() => {
    if (modalExist) {
      setModalOpen(true)
    }
  }, [modalExist])

  return (
    <React.Fragment>
      <Modal
        open={modalOpen}
        handleCloseClick={handleCloseClick}
        yellowBorder="yellow-border"
      >
        <div className="wm-header text-24-bold">
          {t('COMMON.WELCOME_MODAL_TITLE')}
        </div>
        <div className="wm-name text-24-bold">
          {instanceSettings.public_name
            ? `${instanceSettings.public_name} !`
            : null}
        </div>

        <div className="wm-perso text-18-bold">
          {t('COMMON.WELCOME_MODAL_PERSO')}
        </div>
        <div className="wm-connect text-18-bold">
          {t('COMMON.WELCOME_MODAL_CONNECT')}
        </div>
        <StyledButton className="button-ok" onClick={handleCloseClick}>
          {t('COMMON.WELCOME_MODAL_OK')}
        </StyledButton>
      </Modal>
    </React.Fragment>
  )
}

export default translate()(withClient(WelcomeModalContainer))