Skip to content
Snippets Groups Projects
MaxConsumptionCard.tsx 5.24 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React, { useCallback, useEffect, useState } from 'react'
    import { useI18n } from 'cozy-ui/transpiled/react/I18n'
    import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
    import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
    import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
    import IconButton from '@material-ui/core/IconButton'
    import Icon from 'cozy-ui/transpiled/react/Icon'
    import GraphIcon from 'assets/icons/ico/graph-icon.svg'
    import { FluidType } from 'enum/fluid.enum'
    import { useSelector } from 'react-redux'
    import { AppStore } from 'store'
    import { getNavPicto } from 'utils/picto'
    import { DateTime } from 'luxon'
    import { useClient } from 'cozy-client'
    import { TimeStep } from 'enum/timeStep.enum'
    import { Dataload, TimePeriod } from 'models'
    import ConsumptionDataManager from 'services/consumption.service'
    import './maxConsumptionCard.scss'
    import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
    import { formatNumberValues } from 'utils/utils'
    
    interface MaxConsumptionCardProps {
      analysisDate: DateTime
    }
    
    const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
      analysisDate,
    }: MaxConsumptionCardProps) => {
      const { t } = useI18n()
      const client = useClient()
    
      const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
      const [index, setIndex] = useState<number>(0)
    
      const [maxDayData, setMaxDayData] = useState<Dataload | null>(null)
    
      const [isLoading, setisLoading] = useState<boolean>(false)
    
    
      const handleChangePrevFluid = useCallback(() => {
        setisLoading(true)
        if (index === 0) {
          setIndex(fluidTypes.length - 1)
        } else {
          setIndex(prev => prev - 1)
        }
      }, [fluidTypes, index])
    
      const handleChangeNextFluid = useCallback(() => {
        setisLoading(true)
        if (index === fluidTypes.length - 1) {
          setIndex(0)
        } else {
          setIndex(prev => prev + 1)
        }
      }, [fluidTypes, index])
    
      useEffect(() => {
        let subscribed = true
        async function getMaxLoadData() {
    
          const timePeriod: TimePeriod = {
            startDate: analysisDate.minus({ month: 1 }).startOf('month'),
            endDate: analysisDate.minus({ month: 1 }).endOf('month'),
          }
          const consumptionService = new ConsumptionDataManager(client)
          const monthMaxData = await consumptionService.getMaxLoad(
            timePeriod,
            TimeStep.DAY,
    
            undefined,
            false,
            true
          )
          if (monthMaxData) {
            setMaxDayData(monthMaxData as Dataload)
    
        }
        if (subscribed) {
          getMaxLoadData()
        }
        return () => {
          subscribed = false
        }
    
      }, [analysisDate, client, fluidTypes, index])
    
      return (
        <div className="max-consumption-container">
          <StyledIcon icon={GraphIcon} size={38} />
          <div className="text-16-normal title">{t('analysis.max_day')}</div>
          <div className="fluid-navigation">
            {fluidTypes.length > 1 && (
              <IconButton
                aria-label={t('consumption.accessibility.button_previous_value')}
                onClick={handleChangePrevFluid}
                className="arrow-prev"
              >
                <Icon icon={LeftArrowIcon} size={24} />
              </IconButton>
            )}
            <div
              className={`text-20-bold fluid ${FluidType[
    
              {`${t('FLUID.' + FluidType[fluidTypes[index]] + '.LABEL')}`}
    
            </div>
            {fluidTypes.length > 1 && (
              <IconButton
                aria-label={t('consumption.accessibility.button_previous_value')}
                onClick={handleChangeNextFluid}
                className="arrow-next"
              >
                <Icon icon={RigthArrowIcon} size={24} />
              </IconButton>
            )}
          </div>
          <div className="data-container">
    
            {!isLoading ? (
              maxDayData ? (
                <>
                  <div className="text-24-bold maxDay-date">
                    {maxDayData.date.setLocale('fr').toFormat('cccc dd LLLL')}
                  </div>
                  <Icon
                    className="dataloadvisualizer-euro-fluid-icon"
                    icon={getNavPicto(fluidTypes[index], true, true)}
                    size={38}
                  />
                  <div className="maxDay-load">
    
                      <>
                        {formatNumberValues(
                          maxDayData.value,
                          FluidType[fluidTypes[index]]
                        )}
    
                        {` ${t(
                          'FLUID.' + FluidType[fluidTypes[index]] + '.MEGAUNIT'
                        )}`}
                      </>
                    ) : (
                      <>
                        {formatNumberValues(
                          maxDayData.value,
                          FluidType[fluidTypes[index]]
                        )}
    
                        {` ${t('FLUID.' + FluidType[fluidTypes[index]] + '.UNIT')}`}
                      </>
                    )}
                  </div>
                </>
              ) : (
                <p className={`text-20-bold no_data`}>{t('analysis.no_data')}</p>
              )
    
              <StyledSpinner size="3em" fluidType={fluidTypes[index]} />
    
            )}
          </div>
        </div>
      )
    }
    
    export default MaxConsumptionCard