AnalysisView.tsx

import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
import Content from 'components/Content/Content'
import DateNavigator from 'components/DateNavigator/DateNavigator'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useClient } from 'cozy-client'
import { TimeStep, UsageEventType } from 'enums'
import { DateTime } from 'luxon'
import React, { useCallback, useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import DateChartService from 'services/dateChart.service'
import UsageEventService from 'services/usageEvent.service'
import { setAnalysisMonth } from 'store/analysis/analysis.slice'
import { toggleAnalysisNotification } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { updateProfile } from 'store/profile/profile.slice'
import { isLastDateReached } from 'utils/date'
import './analysisView.scss'

const AnalysisView = () => {
  const client = useClient()
  const {
    analysis: { analysisMonth },
    chart: { selectedDate },
    global: { analysisNotification },
    profile: { monthlyAnalysisDate, mailToken },
  } = useAppSelector(state => state.ecolyo)
  const dispatch = useAppDispatch()
  const [headerHeight, setHeaderHeight] = useState<number>(0)

  const dateChartService = new DateChartService()

  // Handle email report comeback
  const { search } = useLocation()
  const query = new URLSearchParams(search)
  const paramToken = query.get('token')

  const app = document.querySelector('.app-content')
  const [scrollPosition, setScrollPosition] = useState(0)

  /** Scroll handling for switching months and staying on the same scroll position */
  const saveLastScrollPosition = useCallback(() => {
    if (app) {
      const position = Math.max(app.scrollTop, window.scrollY)
      setScrollPosition(position)
    }
  }, [app])

  useEffect(() => {
    const updateAnalysisNotification = () => {
      if (analysisNotification) {
        dispatch(updateProfile({ haveSeenLastAnalysis: true }))
        dispatch(toggleAnalysisNotification(false))
      }

      // Save usageevent came back from email
      if (paramToken && mailToken && paramToken === mailToken) {
        UsageEventService.addEventIfDoesntExist(
          client,
          {
            type: UsageEventType.REPORT_FROM_EMAIL,
            target: 'analysis',
            result: '1',
          },
          {
            type: UsageEventType.REPORT_FROM_EMAIL,
            eventDate: {
              $lt: DateTime.local()
                .setZone('utc', {
                  keepLocalTime: true,
                })
                .endOf('month')
                .toString(),
              $gt: DateTime.local()
                .setZone('utc', {
                  keepLocalTime: true,
                })
                .startOf('month')
                .toString(),
            },
          }
        )
      }
    }

    updateAnalysisNotification()
  }, [
    dispatch,
    analysisNotification,
    monthlyAnalysisDate,
    selectedDate,
    paramToken,
    mailToken,
    client,
  ])

  const disablePrev =
    analysisMonth <
    DateTime.local(0, 1, 1).setZone('utc', {
      keepLocalTime: true,
    })

  const handleMoveDate = (increment: number) => {
    const updatedDate = dateChartService.incrementDate(
      TimeStep.MONTH,
      analysisMonth,
      increment
    )
    dispatch(setAnalysisMonth(updatedDate))
  }

  return (
    <>
      <CozyBar titleKey="common.title_analysis" />
      <Header
        setHeaderHeight={setHeaderHeight}
        desktopTitleKey="common.title_analysis"
      >
        <DateNavigator
          disableNext={isLastDateReached(analysisMonth, TimeStep.MONTH)}
          disablePrev={disablePrev}
          handleNextDate={() => handleMoveDate(1)}
          handlePrevDate={() => handleMoveDate(-1)}
          inlineDateDisplay={true}
          navigatorDate={analysisMonth.minus({ month: 1 })}
          timeStep={TimeStep.MONTH}
        />
      </Header>
      <Content heightOffset={headerHeight}>
        <MonthlyAnalysis
          saveLastScrollPosition={saveLastScrollPosition}
          scrollPosition={scrollPosition}
        />
      </Content>
    </>
  )
}

export default AnalysisView