ConsumptionView.tsx

import React, { useCallback, useEffect, useState } from 'react'
import './consumptionView.scss'
import { useSelector, useDispatch } from 'react-redux'
import { AppStore } from 'store'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'

import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import FluidChart from 'components/FluidChart/FluidChart'
import DateNavigator from 'components/DateNavigator/DateNavigator'
import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
import ConsumptionDetails from 'components/Home/ConsumptionDetails'
import FluidButtons from 'components/Home/FluidButtons'
import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
import classNames from 'classnames'
import { isKonnectorActive } from 'utils/utils'
import ReleaseNotesModal from './releaseNotesModal'
import { setPartnersIssue, showReleaseNotes } from 'store/global/global.actions'
import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
import ProfileService from 'services/profile.service'
import { useClient } from 'cozy-client'
import { DateTime } from 'luxon'

interface ConsumptionViewProps {
  fluidType: FluidType
}
const ConsumptionView: React.FC<ConsumptionViewProps> = ({
  fluidType,
}: ConsumptionViewProps) => {
  const client = useClient()
  const dispatch = useDispatch()
  const isMulti = fluidType !== FluidType.MULTIFLUID
  const { currentTimeStep, loading } = useSelector(
    (state: AppStore) => state.ecolyo.chart
  )
  const { fluidStatus, releaseNotes, openPartnersIssueModal } = useSelector(
    (state: AppStore) => state.ecolyo.global
  )

  const [isFluidKonnected, setIsFluidKonnected] = useState<boolean>(false)
  const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>(
    releaseNotes.show
  )

  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [active, setActive] = useState<boolean>(false)

  /* eslint-disable @typescript-eslint/no-non-null-assertion */

  const updatekey =
    fluidType !== FluidType.MULTIFLUID && fluidStatus[fluidType].lastDataDate
      ? `${fluidStatus[
          fluidType
        ].lastDataDate!.toLocaleString()} + ${fluidStatus[fluidType].status +
          fluidType}`
      : ''
  const lastDataDateKey =
    fluidType !== FluidType.MULTIFLUID && fluidStatus[fluidType].lastDataDate
      ? `${fluidStatus[fluidType].lastDataDate!.toLocaleString() + fluidType}`
      : ''

  const defineHeaderHeight = useCallback((height: number) => {
    setHeaderHeight(height)
  }, [])

  const toggleReleaseNoteModal = useCallback(() => {
    setOpenReleaseNoteModal(prev => !prev)
    dispatch(showReleaseNotes(false, releaseNotes.notes))
  }, [dispatch, releaseNotes.notes])

  const handleCloseModal = useCallback(async () => {
    const profileService = new ProfileService(client)
    const updatedProfile = await profileService.updateProfile({
      partnersIssueDate: DateTime.local()
        .setZone('utc', {
          keepLocalTime: true,
        })
        .startOf('day'),
    })
    if (updatedProfile) {
      dispatch(setPartnersIssue(false))
    }
  }, [client, dispatch])

  useEffect(() => {
    setIsFluidKonnected(isKonnectorActive(fluidStatus, fluidType))
    if (
      fluidType !== FluidType.ELECTRICITY &&
      currentTimeStep == TimeStep.HALF_AN_HOUR
    ) {
      dispatch(setCurrentTimeStep(TimeStep.WEEK))
    }
  }, [dispatch, fluidType, currentTimeStep, fluidStatus])

  useEffect(() => {
    dispatch(setLoading(true))
  }, [dispatch])

  return (
    <>
      <CozyBar titleKey={'navigation.consumption'} />
      <Header setHeaderHeight={defineHeaderHeight}>
        <DateNavigator />
      </Header>
      <Content height={headerHeight}>
        <FluidButtons activeFluid={fluidType} key={updatekey} />

        {openReleaseNoteModal && (
          <ReleaseNotesModal
            open={openReleaseNoteModal}
            handleCloseClick={toggleReleaseNoteModal}
          ></ReleaseNotesModal>
        )}
        {isFluidKonnected ? (
          <>
            {loading && (
              <div className={'consumptionview-loading'} aria-busy="true">
                <StyledSpinner size="5em" fluidType={fluidType} />
              </div>
            )}
            <div
              className={classNames('consumptionview-content', {
                ['--hidden']: loading,
              })}
            >
              <FluidChart
                fluidType={fluidType}
                setActive={setActive}
                key={lastDataDateKey}
              />
              <ConsumptionDetails fluidType={fluidType} />
            </div>
            {isMulti && (
              <div className="konnector-section">
                <KonnectorViewerCard
                  fluidStatus={fluidStatus[fluidType]}
                  fluidType={fluidType}
                  isParam={true}
                  isDisconnected={false}
                  setActive={setActive}
                  active={active}
                />
              </div>
            )}
          </>
        ) : (
          <div className="konnector-section">
            {isMulti ? (
              <KonnectorViewerCard
                fluidStatus={fluidStatus[fluidType]}
                fluidType={fluidType}
                isParam={false}
                isDisconnected={true}
                setActive={setActive}
                active={active}
              />
            ) : (
              <KonnectorViewerList />
            )}
          </div>
        )}
      </Content>

      <PartnersIssueModal
        open={openPartnersIssueModal}
        fluidStatus={fluidStatus}
        handleCloseClick={handleCloseModal}
      />
    </>
  )
}

export default ConsumptionView