ConsumptionVisualizer.tsx

import DataloadConsumptionVisualizer from 'components/ConsumptionVisualizer/DataloadConsumptionVisualizer'
import { FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React from 'react'
import { useAppSelector } from 'store/hooks'
import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
import './consumptionVisualizer.scss'

interface ConsumptionVisualizerProps {
  fluidType: FluidType
  setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const ConsumptionVisualizer = ({
  fluidType,
  setActive,
}: ConsumptionVisualizerProps) => {
  const {
    chart: { currentDatachart, currentDatachartIndex },
    global: { fluidStatus, fluidTypes },
  } = useAppSelector(state => state.ecolyo)

  const dataload: Dataload = currentDatachart.actualData[currentDatachartIndex]
  const compareDataload: Dataload | null = currentDatachart.comparisonData
    ? currentDatachart.comparisonData[currentDatachartIndex]
    : null

  const getLastDataDate = (): DateTime | null => {
    let lastDay: DateTime | null = null
    const lastDays: DateTime[] = []
    if (fluidType === FluidType.MULTIFLUID) {
      for (const _fluidType of fluidTypes) {
        const date: DateTime | null = fluidStatus[_fluidType].lastDataDate
        if (date) {
          lastDays.push(date)
        }
      }
      if (lastDays.length > 0) {
        lastDay = lastDays.reduce(function (a, b) {
          return a < b ? a : b
        })
      }
    } else {
      lastDay = fluidStatus[fluidType].lastDataDate
    }
    return lastDay
  }
  const lastDataDate: DateTime | null = getLastDataDate()

  return (
    <div className="consumptionvisualizer-root">
      <DataloadConsumptionVisualizer
        fluidType={fluidType}
        dataload={dataload}
        compareDataload={compareDataload}
        setActive={setActive}
      />
      <div className="consumptionvisualizer-info">
        <InfoDataConsumptionVisualizer
          dataload={dataload}
          fluidType={fluidType}
          lastDataDate={lastDataDate}
        />
      </div>
    </div>
  )
}

export default ConsumptionVisualizer