Skip to content
Snippets Groups Projects
EcogestureModal.tsx 3.57 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React, { useState, useEffect, useContext } from 'react'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    import { translate } from 'cozy-ui/react/I18n'
    import Modal from 'components/CommonKit/Modal/Modal'
    import { getPicto } from 'utils/utils'
    import { EcogestureType } from 'services/dataChallengeContracts'
    import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
    
    import Icon from 'cozy-ui/react/Icon'
    
    import def from 'assets/icons/visu/ecogesture/default.svg'
    
    import { AppContext } from 'components/Contexts/AppContextProvider'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    interface EcogestureModalProps {
      opened: boolean
      ecogesture: EcogestureType
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      t: Function
      handleCloseClick: () => void
      handleStartClick: () => void
    }
    
    const EcogestureModal: React.FC<EcogestureModalProps> = ({
      opened,
      ecogesture,
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      t,
      handleCloseClick,
    }: EcogestureModalProps) => {
    
      const [ecogestureIcon, setEcogestureIcon] = useState(def)
    
      const { userProfile, setNotificationEcogesture } = useContext(AppContext)
    
    
      async function importEcogestureIcon(id: string) {
        // Les svg doivent être au format id.svg
        let importedEcogesture
        try {
          importedEcogesture = await import(
            /* webpackMode: "eager" */ `assets/icons/visu/ecogesture/${id}.svg`
          )
        } catch (e) {}
        if (importedEcogesture) {
          setEcogestureIcon(importedEcogesture.default)
        }
      }
    
    
      useEffect(() => {
        let index = -1
        index = userProfile.notificationEcogesture.indexOf(ecogesture.id)
        if (index > -1) {
          const updatedNotificationEcogestureList =
            userProfile && userProfile.notificationEcogesture
          updatedNotificationEcogestureList.splice(index, 1)
          setNotificationEcogesture(updatedNotificationEcogestureList)
        }
      }, [])
    
    
      useEffect(() => {
        if (ecogesture) {
          importEcogestureIcon(ecogesture.id)
        }
      }, [ecogesture])
    
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      return (
        <>
    
          {ecogesture && (
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
            <Modal
              open={opened}
    
              border={ecogesture.unlocked || unlockedEcogesture}
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
              handleCloseClick={handleCloseClick}
            >
              <div className="em-header text-14-normal-uppercase">
                {t('ECOGESTURE.TITLE_ECOGESTURE')}
              </div>
    
              <div className="em-root">
                <div className="em-content">
    
    Romain CREY's avatar
    Romain CREY committed
                  <div className="em-content-box-img">
                    {(ecogesture.unlocked || unlockedEcogesture) &&
                      ecogestureIcon && (
    
                        <Icon className="icon" icon={ecogestureIcon} size={140} />
    
    Romain CREY's avatar
    Romain CREY committed
                      )}
                  </div>
                  <div className="em-title text-24-bold ">
                    {ecogesture.shortName}
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  </div>
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                  <div className="em-detail">
                    <div className="em-detail-nwh">
                      <span className="text-16-bold">{ecogesture.nwh} </span>
                      <span className="em-detail-nwh-unit text-16-normal">nWh</span>
                    </div>
                    <div className="em-picto-flow">
                      {ecogesture.fluidTypes.map((fluid, index) => (
                        <div key={index}>
                          <StyledIcon
                            className="em-pic-content"
                            icon={getPicto(fluid)}
                            size={25}
                          />
                        </div>
                      ))}
                    </div>
                  </div>
    
    Romain CREY's avatar
    Romain CREY committed
                  <div className="long-name">{ecogesture.longName}</div>
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                  <div className="em-description text-16-normal-150">
                    {ecogesture.longDescription}
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  </div>
                </div>
              </div>
            </Modal>
          )}
        </>
      )
    }
    
    export default translate()(EcogestureModal)