Comparison.tsx

import { Button } from '@material-ui/core'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType, TimeStep } from 'enums'
import { PerformanceIndicator } from 'models'
import React, { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ConsumptionService from 'services/consumption.service'
import { setPeriod } from 'store/analysis/analysis.slice'
import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import FluidPerformanceIndicator from './FluidPerformanceIndicator'
import './comparison.scss'

const Comparison = ({
  fluidsWithData,
  monthPerformanceIndicators,
}: {
  fluidsWithData: FluidType[]
  monthPerformanceIndicators: PerformanceIndicator[]
}) => {
  const { t } = useI18n()
  const client = useClient()
  const navigate = useNavigate()
  const {
    global: { fluidTypes },
    analysis: { period, analysisMonth },
  } = useAppSelector(state => state.ecolyo)
  const dispatch = useAppDispatch()
  const [yearPerformanceIndicators, setYearPerformanceIndicators] = useState<
    PerformanceIndicator[]
  >([])
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const consumptionService = useMemo(
    () => new ConsumptionService(client),
    [client]
  )

  const periods = useMemo(() => {
    return {
      monthPeriod: {
        startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
        endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
      },
      previousMonthPeriod: {
        startDate: analysisMonth.minus({ month: 2 }).startOf('month'),
        endDate: analysisMonth.minus({ month: 2 }).endOf('month'),
      },
      previousYearPeriod: {
        startDate: analysisMonth.minus({ year: 1, month: 1 }).startOf('month'),
        endDate: analysisMonth.minus({ year: 1, month: 1 }).endOf('month'),
      },
    }
  }, [analysisMonth])

  const NAVIGATION_HEIGHT = 40
  const loaderPlaceholderHeight =
    fluidsWithData.length * 84 +
    (fluidsWithData.length - 1) * 10 +
    NAVIGATION_HEIGHT

  useEffect(() => {
    let subscribed = true
    async function populateData() {
      if (subscribed) {
        const fetchedYearIndicators =
          await consumptionService.getPerformanceIndicators(
            periods.monthPeriod,
            TimeStep.MONTH,
            fluidsWithData,
            periods.previousYearPeriod
          )
        if (fetchedYearIndicators) {
          setYearPerformanceIndicators(fetchedYearIndicators)
          if (
            fetchedYearIndicators.some(
              indicator => indicator.value !== 0 || indicator.compareValue !== 0
            )
          ) {
            dispatch(setPeriod('year'))
          }
        }
        setIsLoading(false)
      }
    }
    populateData()
    return () => {
      subscribed = false
    }
  }, [
    client,
    fluidTypes,
    analysisMonth,
    consumptionService,
    fluidsWithData,
    periods.monthPeriod,
    periods.previousYearPeriod,
    dispatch,
  ])

  const handleFluidClick = (fluid: FluidType) => {
    let fluidTypeText: string

    switch (fluid) {
      case FluidType.ELECTRICITY:
        fluidTypeText = 'electricity'
        break
      case FluidType.WATER:
        fluidTypeText = 'water'
        break
      case FluidType.GAS:
        fluidTypeText = 'gas'
        break
      default:
        fluidTypeText = 'unknown'
    }

    const url = `/consumption/${fluidTypeText}`
    dispatch(setCurrentTimeStep(TimeStep.MONTH))
    if (period === 'year') {
      dispatch(setShowCompare(true))
    } else {
      dispatch(setShowCompare(false))
    }
    navigate(url)
  }

  return (
    <div className="comparison">
      {!isLoading && (
        <div className="tabs">
          <Button
            className={period === 'year' ? 'active' : ''}
            onClick={() => dispatch(setPeriod('year'))}
          >
            {t(`analysis.compare.year_tab`)}
          </Button>
          <Button
            className={period === 'month' ? 'active' : ''}
            onClick={() => dispatch(setPeriod('month'))}
          >
            {t(`analysis.compare.month_tab`)}
          </Button>
        </div>
      )}

      <div className="performanceIndicators">
        {isLoading && (
          <div
            style={{
              height: `${loaderPlaceholderHeight}px`,
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            <Loader />
          </div>
        )}

        {/* Placeholder when no data is found */}
        {!isLoading &&
          fluidsWithData.length === 0 &&
          [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS].map(fluid => (
            <FluidPerformanceIndicator
              key={fluid}
              fluidType={fluid}
              performanceIndicator={{
                value: 0,
                compareValue: 0,
                percentageVariation: 0,
              }}
              comparisonDate={periods.previousMonthPeriod.startDate}
            />
          ))}
        {!isLoading &&
          fluidsWithData.map(fluid => (
            <FluidPerformanceIndicator
              key={fluid}
              fluidType={fluid}
              performanceIndicator={
                period === 'month'
                  ? monthPerformanceIndicators[fluid]
                  : yearPerformanceIndicators[fluid]
              }
              comparisonDate={
                period === 'month'
                  ? periods.previousMonthPeriod.startDate
                  : periods.previousYearPeriod.startDate
              }
              onClickHandler={() => handleFluidClick(fluid)}
            />
          ))}
      </div>
    </div>
  )
}

export default Comparison