FluidChartContainer.tsx

import React, { useState, useEffect, useContext } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { withClient, Client } from 'cozy-client'
import { DateTime } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'services/dataConsumptionContracts'
import { TypeChallenge, UserChallenge } from 'services/dataChallengeContracts'
import ConsumptionDataManager from 'services/consumptionDataManagerService'
import FluidChartContent from 'components/ContentComponents/FluidChart/FluidChartContent'

interface FluidChartContainerProps {
  timeStep: TimeStep
  fluidTypes: FluidType[]
  resetReferenceDate: boolean
  multiFluid: boolean
  handleClickTimeStep(_timeStep: TimeStep): void
  setChartLoaded(): void
  client: Client
}

const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
  timeStep,
  fluidTypes,
  resetReferenceDate,
  multiFluid,
  handleClickTimeStep,
  setChartLoaded,
  client,
}: FluidChartContainerProps) => {
  const { currentChallenge } = useContext(AppContext)
  const [lastDataDate, setLastDataDate] = useState<DateTime>(DateTime.local())
  const [lastDateWithAllData, setLastDateWithAllData] = useState<DateTime>(
    DateTime.local()
  )
  const [referenceDate, setReferenceDate] = useState<DateTime>(DateTime.local())
  const [isLoaded, setIsLoaded] = useState<boolean>(false)
  const [challenge, setChallenge] = useState<UserChallenge | null>(null)

  const consumptionDataManager = new ConsumptionDataManager(client)

  const handleDetailedDate = (date: DateTime, timeStep: TimeStep) => {
    setReferenceDate(date)
    handleClickTimeStep(timeStep)
  }

  useEffect(() => {
    let subscribed = true
    async function loadData() {
      const data = await consumptionDataManager.fetchLastDateData(fluidTypes)
      const dataWithAllFluids = await consumptionDataManager.fetchLastDateData(
        fluidTypes,
        true
      )
      if (subscribed && data) {
        setLastDataDate(data)
        setReferenceDate(data)
      }
      if (subscribed && dataWithAllFluids) {
        setLastDateWithAllData(dataWithAllFluids)
      }
      if (subscribed && currentChallenge) {
        if (
          currentChallenge.challengeType &&
          currentChallenge.challengeType.type === TypeChallenge.CHALLENGE
        ) {
          setChallenge(currentChallenge)
        }
      }
      setChartLoaded()
      setIsLoaded(true)
    }
    loadData()
    return () => {
      subscribed = false
    }
  }, [])

  useEffect(() => {
    let subscribed = true
    async function reset() {
      if (subscribed && resetReferenceDate) {
        setReferenceDate(lastDataDate)
        setChartLoaded()
        setIsLoaded(true)
      }
    }
    reset()
    return () => {
      subscribed = false
    }
  }, [resetReferenceDate])

  useEffect(() => {
    if (
      currentChallenge &&
      currentChallenge.challengeType &&
      currentChallenge.challengeType.type === TypeChallenge.CHALLENGE
    ) {
      setChallenge(currentChallenge)
    }
  }, [currentChallenge])

  return (
    <>
      {isLoaded ? (
        <div className="fc-root">
          <div className="fc-content">
            <FluidChartContent
              referenceDate={referenceDate}
              lastDataDate={lastDataDate}
              lastDateWithAllData={lastDateWithAllData}
              fluidTypes={fluidTypes}
              timeStep={timeStep}
              multiFluid={multiFluid}
              currentChallenge={challenge}
              consumptionDataManager={consumptionDataManager}
              isDataLoaded={isLoaded}
              handleDetailedDate={handleDetailedDate}
            ></FluidChartContent>
          </div>
        </div>
      ) : null}
    </>
  )
}

export default withClient(FluidChartContainer)