MonthlyAnalysis.tsx

import { Fade } from '@material-ui/core'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { FluidState, FluidType, TimeStep } from 'enums'
import { PerformanceIndicator, TimePeriod } from 'models'
import React, { useEffect, useMemo, useState } from 'react'
import ConsumptionService from 'services/consumption.service'
import PerformanceIndicatorService from 'services/performanceIndicator.service'
import { useAppSelector } from 'store/hooks'
import { allFluids } from 'utils/utils'
import Comparison from './Comparison/Comparison'
import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis'
import IncompleteDataWarning from './IncompleteDataWarning/IncompleteDataWarning'
import MaxConsumptionCard from './MaxConsumptionCard/MaxConsumptionCard'
import './monthlyanalysis.scss'
import NewsletterReminder from './NewsletterReminder/NewsletterReminder'
import NoAnalysisModal from './NoKonnector/NoAnalysisModal'
import ProfileComparator from './ProfileComparator/ProfileComparator'
import TotalAnalysisChart from './TotalAnalysisChart/TotalAnalysisChart'

interface MonthlyAnalysisProps {
  saveLastScrollPosition: () => void
  scrollPosition: number
}

const MonthlyAnalysis = ({
  saveLastScrollPosition,
  scrollPosition,
}: MonthlyAnalysisProps) => {
  const client = useClient()
  const {
    analysis: { analysisMonth, haveSeenNewsletterReminder },
    global: { fluidStatus },
    profile: { sendAnalysisNotification, isAnalysisReminderEnabled },
  } = useAppSelector(state => state.ecolyo)

  const consumptionService = useMemo(
    () => new ConsumptionService(client),
    [client]
  )
  const performanceIndicatorService = useMemo(
    () => new PerformanceIndicatorService(),
    []
  )

  const allKonnectorDisconnected = fluidStatus.some(
    fluid => fluid.status === FluidState.NOT_CONNECTED
  )

  const [isLoadingAnalysis, setLoadingAnalysis] = useState<boolean>(true)
  const [openNoDataModal, setOpenNoDataModal] = useState(false)
  const [fluidsWithData, setFluidsWithData] = useState<FluidType[]>([])
  const [incompleteDataFluids, setIncompleteDataFluids] = useState<FluidType[]>(
    []
  )
  const [performanceIndicators, setPerformanceIndicators] = useState<
    PerformanceIndicator[]
  >([])
  const [aggregatedPerformanceIndicators, setAggregatedPerformanceIndicators] =
    useState<PerformanceIndicator>({
      value: 0,
      compareValue: 0,
      percentageVariation: 0,
    })

  const displayNewsletterReminder =
    !sendAnalysisNotification &&
    isAnalysisReminderEnabled &&
    !haveSeenNewsletterReminder

  useEffect(() => {
    let subscribed = true

    const populateData = async () => {
      setLoadingAnalysis(true)

      const timePeriod: TimePeriod = {
        startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
        endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
      }
      const comparisonTimePeriod: TimePeriod = {
        startDate: analysisMonth.minus({ month: 2 }).startOf('month'),
        endDate: analysisMonth.minus({ month: 2 }).endOf('month'),
      }
      const [resultFluids, fetchedIncompleteDataFluids] = await Promise.all([
        consumptionService.getFluidsWithDataForTimePeriod(
          allFluids,
          timePeriod
        ),
        consumptionService.getFluidsWithIncompleteData(
          allFluids,
          timePeriod.startDate
        ),
      ])
      setIncompleteDataFluids(fetchedIncompleteDataFluids)

      const fetchedPerformanceIndicators =
        await consumptionService.getPerformanceIndicators(
          timePeriod,
          TimeStep.MONTH,
          resultFluids,
          comparisonTimePeriod
        )

      if (fetchedPerformanceIndicators) {
        setPerformanceIndicators(fetchedPerformanceIndicators)
        setLoadingAnalysis(false)
        setAggregatedPerformanceIndicators(
          performanceIndicatorService.aggregatePerformanceIndicators(
            fetchedPerformanceIndicators
          )
        )
      }
      if (resultFluids.length === 0 && allKonnectorDisconnected) {
        setOpenNoDataModal(true)
      }
      setFluidsWithData(resultFluids)
      setLoadingAnalysis(false)
    }

    subscribed && populateData()

    return () => {
      saveLastScrollPosition()
      subscribed = false
    }
  }, [
    allKonnectorDisconnected,
    analysisMonth,
    consumptionService,
    performanceIndicatorService,
    saveLastScrollPosition,
  ])

  useEffect(() => {
    if (!isLoadingAnalysis) {
      const app = document.querySelector('.app-content')
      window.scrollTo(0, scrollPosition)
      app?.scrollTo(0, scrollPosition)
    }
  }, [isLoadingAnalysis, scrollPosition])

  return (
    <>
      {isLoadingAnalysis && (
        <div className="loaderContainer">
          <Loader />
        </div>
      )}
      <NoAnalysisModal open={openNoDataModal} onClose={setOpenNoDataModal} />
      {!isLoadingAnalysis && (
        <Fade in={!isLoadingAnalysis}>
          <div className="analysis-root">
            {displayNewsletterReminder && (
              <div className="analysis-content">
                <NewsletterReminder />
              </div>
            )}

            {incompleteDataFluids.length !== 0 && (
              <div className="analysis-content">
                <IncompleteDataWarning
                  incompleteDataFluids={incompleteDataFluids}
                />
              </div>
            )}
            <div className="analysis-content">
              <Comparison
                fluidsWithData={fluidsWithData}
                monthPerformanceIndicators={performanceIndicators}
              />
            </div>

            <div className="analysis-content">
              <div className="card rich-card">
                <TotalAnalysisChart fluidsWithData={fluidsWithData} />
              </div>
            </div>
            <div className="analysis-content">
              <div className="card rich-card">
                <MaxConsumptionCard fluidsWithData={fluidsWithData} />
              </div>
            </div>
            <div className="analysis-content">
              <div className="card rich-card">
                <ProfileComparator
                  aggregatedPerformanceIndicator={
                    aggregatedPerformanceIndicators
                  }
                  performanceIndicators={performanceIndicators}
                />
              </div>
            </div>
            {fluidsWithData.includes(FluidType.ELECTRICITY) && (
              <div className="analysis-content">
                <div className="card">
                  <ElecHalfHourMonthlyAnalysis
                    perfIndicator={performanceIndicators[FluidType.ELECTRICITY]}
                  />
                </div>
              </div>
            )}
          </div>
        </Fade>
      )}
    </>
  )
}

export default MonthlyAnalysis