Newer
Older
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)

Guilhem CARRON
committed
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() {
setisLoading(true)
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,

Guilhem CARRON
committed
[fluidTypes[index]],
undefined,
false,
true
)
if (monthMaxData) {
setMaxDayData(monthMaxData as Dataload)
} else {
setMaxDayData(null)

Guilhem CARRON
committed
setisLoading(false)
}
if (subscribed) {
getMaxLoadData()
}
return () => {
subscribed = false
}

Guilhem CARRON
committed
}, [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[

Guilhem CARRON
committed
fluidTypes[index]
].toLowerCase()}`}
>

Guilhem CARRON
committed
{`${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">

Rémi PAILHAREY
committed
{maxDayData.value >= 1000 ? (
<>
{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>
)

Guilhem CARRON
committed
<StyledSpinner size="3em" fluidType={fluidTypes[index]} />
)}
</div>
</div>
)
}
export default MaxConsumptionCard