FluidChartSlide.tsx

import React, { useState, useEffect } from 'react'
import { DateTime } from 'luxon'
import {
  IConsumptionDataManager,
  IDataload,
  IChartData,
  ChartData,
  TimeStep,
  ITimePeriod,
} from 'services/dataConsumptionContracts'
import { defineTimePeriod } from 'services/dateChartService'
import { FluidType } from 'enum/fluid.enum'

import BarChart from 'components/ContentComponents/Charts/BarChart'

interface FluidChartSlideProps {
  index: number
  fluidTypes: FluidType[]
  timeStep: TimeStep
  multiFluid: boolean
  referenceDate: DateTime
  selectedDate: DateTime
  showCompare: boolean
  width: number
  height: number
  challengePeriod: ITimePeriod | null
  handleClickData: (
    dataload: IDataload,
    compareDataload: IDataload | null
  ) => void
  consumptionDataManager: IConsumptionDataManager
}

const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
  index,
  fluidTypes,
  timeStep,
  multiFluid,
  referenceDate,
  selectedDate,
  showCompare,
  width,
  height,
  challengePeriod,
  handleClickData,
  consumptionDataManager,
}: FluidChartSlideProps) => {
  const [chartData, setChartData] = useState<IChartData>(new ChartData([]))
  const [isLoaded, setIsLoaded] = useState<boolean>(false)

  useEffect(() => {
    let subscribed = true

    async function loadData() {
      const [timePeriod, compareTimePeriod] = await Promise.all([
        defineTimePeriod(referenceDate, timeStep, index),
        defineTimePeriod(referenceDate, timeStep, index + 1),
      ])
      const graphData = await consumptionDataManager.getGraphData(
        timePeriod,
        timeStep,
        fluidTypes,
        compareTimePeriod
      )
      if (subscribed && graphData && graphData.actualData.length > 0) {
        setChartData(graphData)
        setIsLoaded(true)
      }
    }
    setIsLoaded(false)
    loadData()
    return () => {
      subscribed = false
    }
  }, [timeStep, fluidTypes])

  return (
    <div className="fs-slide">
      {!isLoaded ? null : (
        <BarChart
          chartData={chartData}
          fluidTypes={fluidTypes}
          timeStep={timeStep}
          multiFluid={multiFluid}
          selectedDate={selectedDate}
          showCompare={showCompare}
          handleClickData={handleClickData}
          height={height}
          width={width}
          challengePeriod={challengePeriod}
        />
      )}
    </div>
  )
}

export default FluidChartSlide