Newer
Older
import React, { useState, useEffect, useCallback } from 'react'
import './fluidChart.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
import useExploration from 'components/Hooks/useExploration'
import { UserExplorationID } from 'enum/userExploration.enum'
import ConsumptionService from 'services/consumption.service'
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
import TimeStepSelector from 'components/TimeStepSelector/TimeStepSelector'
import ActivateHalfHourLoad from 'components/ActivateHalfHourLoad/ActivateHalfHourLoad'
import FluidChartSwipe from './FluidChartSwipe'
import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
import { Profile } from 'models'
import { DateTime } from 'luxon'
import { updateProfile } from 'store/profile/profile.actions'
import OldFluidDataModal from 'components/Home/OldFluidDataModal'
import FluidService from 'services/fluid.service'
import { UsageEventType } from 'enum/usageEvent.enum'
import UsageEventService from 'services/usageEvent.service'
const dispatch = useDispatch()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
const profile: Profile = useSelector(
(state: AppStore) => state.ecolyo.profile
)
const { currentTimeStep } = useSelector(
(state: AppStore) => state.ecolyo.chart
const [, setValidExploration] = useExploration()
const [isMinuteBlocked, setMinuteBlocked] = useState<boolean>(false)
const [showCompare, setShowCompare] = useState<boolean>(false)
const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
const [fluidOldData, setFluidOldData] = useState<FluidType[]>([])
const handleCloseClick = useCallback(() => {
dispatch(
updateProfile({
haveSeenOldFluidModal: DateTime.local().setZone('utc', {
keepLocalTime: true,
}),
})
)
setopenOldFluidDataModal(false)
}, [dispatch])
const handleChangeSwitch = async () => {
await UsageEventService.addEvent(client, {
type: UsageEventType.CONSUMPTION_COMPARE_EVENT,
target: TimeStep[currentTimeStep],
context: FluidType[fluidType],
})
useEffect(() => {
let subscribed = true
async function loadData() {
const consumptionService = new ConsumptionService(client)
const activateHalfHourLoad = await consumptionService.checkDoctypeEntries(
)
if (subscribed) {
if (!activateHalfHourLoad) {
setMinuteBlocked(true)
}
const oldFluidData = await FluidService.getOldFluidData(fluidStatus)
const lastSeen: boolean | DateTime = profile.haveSeenOldFluidModal
if (subscribed && oldFluidData.length > 0) {
setFluidOldData(oldFluidData)
if (lastSeen === false && subscribed) {
setopenOldFluidDataModal(true)
} else if (lastSeen) {
const diff =
typeof lastSeen === 'boolean'
? 0
: lastSeen.diffNow('hours').toObject().hours
if (diff && diff < -23) {
setopenOldFluidDataModal(true)
}
}
}
}
loadData()
return () => {
subscribed = false
}
}, [client, fluidStatus, profile.haveSeenOldFluidModal])
if (!isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR) {
setValidExploration(UserExplorationID.EXPLORATION004)
setValidExploration(UserExplorationID.EXPLORATION003)
}, [isMinuteBlocked, currentTimeStep, setValidExploration])
<div className="fluidchart-root">
{isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR ? (
<ActivateHalfHourLoad />
) : (
<div className="fluidchart-content">
<ConsumptionVisualizer
showCompare={
currentTimeStep === TimeStep.YEAR ? false : showCompare
}
showCompare={
currentTimeStep === TimeStep.YEAR ? false : showCompare
}
<TimeStepSelector fluidType={fluidType} />
{fluidType !== FluidType.MULTIFLUID &&
currentTimeStep !== TimeStep.YEAR ? (
<div className="fluidchart-footer" onClick={handleChangeSwitch}>
<div className="fluidchart-footer-compare text-15-normal">
inputProps={{
'aria-label': t(
'consumption.accessibility.checkbox_compare'
),
}}
<span
className={
showCompare
? `fluidchart-footer-label graph-switch-text selected`
: `fluidchart-footer-label graph-switch-text`
}
>
{t(
`timestep.${TimeStep[
currentTimeStep
].toLowerCase()}.comparelabel`
)}
fluidStatus={fluidStatus}
fluidOldData={fluidOldData}
handleCloseClick={handleCloseClick}
/>
)}