FluidChartSlide.tsx

import BarChart from 'components/Charts/BarChart'
import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { FluidType, TimeStep } from 'enums'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React, { useEffect, useState } from 'react'
import ConsumptionService from 'services/consumption.service'
import DateChartService from 'services/dateChart.service'
import { setCurrentDataChart } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './fluidChartSlide.scss'

interface FluidChartSlideProps {
  index: number
  fluidType: FluidType
  width: number
  height: number
  isSwitching: boolean
  setActive: React.Dispatch<React.SetStateAction<boolean>>
}

const FluidChartSlide = ({
  index,
  fluidType,
  width,
  height,
  isSwitching,
  setActive,
}: FluidChartSlideProps) => {
  const client = useClient()
  const dispatch = useAppDispatch()
  const {
    chart: { currentTimeStep, currentIndex, showCompare },
    global: { fluidStatus, fluidTypes },
  } = useAppSelector(state => state.ecolyo)

  const [chartData, setChartData] = useState<Datachart>({
    actualData: [],
    comparisonData: null,
  })
  const [isDataLoaded, setIsDataLoaded] = useState<boolean>(false)
  const [timeStep, setTimeStep] = useState<TimeStep>(TimeStep.WEEK)

  useEffect(() => {
    let subscribed = true
    async function loadData() {
      if (currentTimeStep != timeStep && subscribed) {
        setIsDataLoaded(false)
        setTimeStep(currentTimeStep)
      }
      if (
        !isDataLoaded &&
        index >= currentIndex - 1 &&
        index <= currentIndex + 1
      ) {
        const dateChartService = new DateChartService()
        const referenceDate = DateTime.local().setZone('utc', {
          keepLocalTime: true,
        })
        const [timePeriod, compareTimePeriod] = await Promise.all([
          dateChartService.defineTimePeriod(
            referenceDate,
            currentTimeStep,
            index
          ),
          dateChartService.defineTimePeriod(
            referenceDate,
            currentTimeStep,
            index + 1
          ),
        ])
        const consumptionService = new ConsumptionService(client)
        const fluidTypeArray: FluidType[] =
          fluidType === FluidType.MULTIFLUID ? fluidTypes : [fluidType]
        const graphData = await consumptionService.getGraphData(
          timePeriod,
          currentTimeStep,
          fluidTypeArray,
          fluidStatus,
          compareTimePeriod,
          fluidType === FluidType.MULTIFLUID
        )
        if (subscribed && graphData && graphData?.actualData.length > 0) {
          setChartData(graphData)
          setIsDataLoaded(true)
        }
      }
    }
    loadData()
    return () => {
      subscribed = false
    }
  }, [
    currentIndex,
    currentTimeStep,
    fluidType,
    fluidTypes,
    client,
    dispatch,
    index,
    isDataLoaded,
    timeStep,
    fluidStatus,
  ])

  useEffect(() => {
    if (index === currentIndex) {
      dispatch(setCurrentDataChart(chartData))
    }
  }, [dispatch, index, currentIndex, chartData])

  return (
    <div className="fluidchartslide-root" aria-busy={!isDataLoaded}>
      {!isDataLoaded ? (
        <div className="data-spinner">
          <Loader fluidType={fluidType} />
        </div>
      ) : (
        <>
          <ConsumptionVisualizer fluidType={fluidType} setActive={setActive} />
          <BarChart
            chartData={chartData}
            fluidType={fluidType}
            timeStep={timeStep}
            showCompare={showCompare}
            height={height}
            width={width}
            isSwitching={isSwitching}
          />
        </>
      )}
    </div>
  )
}

export default FluidChartSlide