Skip to content
Snippets Groups Projects
FluidChart.tsx 6.38 KiB
Newer Older
  • Learn to ignore specific revisions
  • 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'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    import { FluidType } from 'enum/fluid.enum'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import { TimeStep } from 'enum/timeStep.enum'
    
    import { UserExplorationID } from 'enum/userExploration.enum'
    
    import ConsumptionService from 'services/consumption.service'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    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'
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
    import { UsageEventType } from 'enum/usageEvent.enum'
    import UsageEventService from 'services/usageEvent.service'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    interface FluidChartProps {
    
      fluidType: FluidType
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    }
    
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    const FluidChart: React.FC<FluidChartProps> = ({
    
      fluidType,
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    }: FluidChartProps) => {
    
      const { t } = useI18n()
    
      const client = useClient()
    
      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
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      )
    
      const [, setValidExploration] = useExploration()
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const [isMinuteBlocked, setMinuteBlocked] = useState<boolean>(false)
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const [isLoaded, setIsLoaded] = 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])
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
      const handleChangeSwitch = async () => {
        await UsageEventService.addEvent(client, {
          type: UsageEventType.CONSUMPTION_COMPARE_EVENT,
          target: TimeStep[currentTimeStep],
          context: FluidType[fluidType],
        })
    
        setShowCompare(!showCompare)
      }
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
      useEffect(() => {
        let subscribed = true
        async function loadData() {
    
          const consumptionService = new ConsumptionService(client)
    
          const activateHalfHourLoad = await consumptionService.checkDoctypeEntries(
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
            FluidType.ELECTRICITY,
            TimeStep.HALF_AN_HOUR
    
          )
          if (subscribed) {
            if (!activateHalfHourLoad) {
              setMinuteBlocked(true)
            }
    
            setIsLoaded(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)
                }
              }
            }
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        }
        loadData()
        return () => {
          subscribed = false
        }
    
      }, [client, fluidStatus, profile.haveSeenOldFluidModal])
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
      useEffect(() => {
    
        if (!isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR) {
    
          setValidExploration(UserExplorationID.EXPLORATION004)
    
    Yoan VALLET's avatar
    Yoan VALLET committed
        } else if (currentTimeStep === TimeStep.YEAR) {
    
          setValidExploration(UserExplorationID.EXPLORATION003)
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        }
    
      }, [isMinuteBlocked, currentTimeStep, setValidExploration])
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
      return (
        <>
    
    Romain CREY's avatar
    Romain CREY committed
          {isLoaded && (
    
    Romain CREY's avatar
    Romain CREY committed
            <>
    
              <div className="fluidchart-root">
                {isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR ? (
                  <ActivateHalfHourLoad />
                ) : (
                  <div className="fluidchart-content">
                    <ConsumptionVisualizer
    
                      fluidType={fluidType}
    
                      showCompare={
                        currentTimeStep === TimeStep.YEAR ? false : showCompare
                      }
    
                    />
                    <FluidChartSwipe
    
                      fluidType={fluidType}
    
                      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">
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                      <StyledSwitch
    
    Hugo's avatar
    Hugo committed
                        fluidType={fluidType}
                        checked={showCompare}
    
    Hugo's avatar
    Hugo committed
                        inputProps={{
                          'aria-label': t(
                            'consumption.accessibility.checkbox_compare'
                          ),
                        }}
    
    Hugo's avatar
    Hugo committed
                      />
    
                      <span
                        className={
                          showCompare
                            ? `fluidchart-footer-label graph-switch-text selected`
                            : `fluidchart-footer-label graph-switch-text`
                        }
                      >
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                        {t(
                          `timestep.${TimeStep[
                            currentTimeStep
                          ].toLowerCase()}.comparelabel`
                        )}
    
                      </span>
                    </div>
                  </div>
                ) : null}
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
              </div>
    
              {fluidStatus.length > 0 && (
    
                <OldFluidDataModal
    
                  open={openOldFluidDataModal}
    
                  fluidStatus={fluidStatus}
                  fluidOldData={fluidOldData}
                  handleCloseClick={handleCloseClick}
                />
              )}
    
    Romain CREY's avatar
    Romain CREY committed
            </>
    
    Romain CREY's avatar
    Romain CREY committed
          )}
    
    export default FluidChart