ConsumptionView.tsx

import classNames from 'classnames'
import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal'
import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView'
import Content from 'components/Content/Content'
import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
import DateNavigator from 'components/DateNavigator/DateNavigator'
import FluidChart from 'components/FluidChart/FluidChart'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
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 Loader from 'components/Loader/Loader'
import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
import { useClient } from 'cozy-client'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import ProfileService from 'services/profile.service'
import { AppStore } from 'store'
import { setCurrentTimeStep } from 'store/chart/chart.actions'
import {
  setCustomPopup,
  setPartnersIssue,
  showReleaseNotes,
} from 'store/global/global.actions'
import {
  getKonnectorUpdateError,
  getTodayDate,
  isKonnectorActive,
} from 'utils/utils'
import './consumptionView.scss'
import ReleaseNotesModal from './ReleaseNotesModal'
interface ConsumptionViewProps {
  fluidType: FluidType
}
const ConsumptionView: React.FC<ConsumptionViewProps> = ({
  fluidType,
}: ConsumptionViewProps) => {
  const history = useHistory()
  const client = useClient()
  const dispatch = useDispatch()
  const isMulti = fluidType !== FluidType.MULTIFLUID
  const {
    chart: { currentTimeStep, loading },
    global: {
      fluidStatus,
      releaseNotes,
      customPopupModal,
      openPartnersIssueModal,
      sgeConnect,
    },
  } = useSelector((state: AppStore) => state.ecolyo)

  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)
  const [openExpiredConsentModal, setopenExpiredConsentModal] =
    useState<boolean>(true)
  const [consentExpiredFluids, setconsentExpiredFluids] = useState<FluidType[]>(
    []
  )

  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 handleCloseReleaseNoteModal = useCallback(() => {
    setOpenReleaseNoteModal(false)
    dispatch(
      showReleaseNotes(false, releaseNotes.notes, releaseNotes.redirectLink)
    )
    if (releaseNotes.redirectLink) {
      history.push(releaseNotes.redirectLink)
    }
  }, [dispatch, history, releaseNotes.notes, releaseNotes.redirectLink])

  const handleCloseModal = useCallback(async () => {
    const profileService = new ProfileService(client)
    const updatedProfile = await profileService.updateProfile({
      partnersIssueDate: getTodayDate(),
    })
    if (updatedProfile) {
      dispatch(setPartnersIssue(false))
    }
  }, [client, dispatch])

  const handleCloseCustomPopupModal = async () => {
    const profileService = new ProfileService(client)
    const updatedProfile = await profileService.updateProfile({
      customPopupDate: getTodayDate(),
    })
    if (updatedProfile) {
      dispatch(
        setCustomPopup({
          ...customPopupModal,
          popupEnabled: false,
        })
      )
    }
  }

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

  useEffect(() => {
    let subscribed = true
    const expiredConsents: FluidType[] = []
    //Check if some fluids have expired consent error
    for (const fluid of fluidStatus) {
      const error = fluid.connection.triggerState?.last_error
      if (error && getKonnectorUpdateError(error) === 'error_update_oauth') {
        expiredConsents.push(fluid.fluidType)
      }
    }

    if (subscribed) setconsentExpiredFluids(expiredConsents)
    return () => {
      subscribed = false
    }
  }, [fluidStatus])

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

        {openReleaseNoteModal && (
          <ReleaseNotesModal
            open={openReleaseNoteModal}
            handleCloseClick={handleCloseReleaseNoteModal}
          ></ReleaseNotesModal>
        )}
        {isFluidKonnected ? (
          <>
            {loading && (
              <div className={'consumptionview-loading'} aria-busy="true">
                <Loader 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}
                  key={fluidType}
                />
              </div>
            )}
          </>
        ) : (
          <div className="konnector-section">
            {isMulti ? (
              <KonnectorViewerCard
                fluidStatus={fluidStatus[fluidType]}
                fluidType={fluidType}
                isParam={false}
                isDisconnected={true}
                setActive={setActive}
                active={active}
              />
            ) : (
              <KonnectorViewerList />
            )}
          </div>
        )}
      </Content>
      {sgeConnect?.openSGEForm && <SgeConnectView />}

      <PartnersIssueModal
        open={openPartnersIssueModal}
        fluidStatus={fluidStatus}
        handleCloseClick={handleCloseModal}
      />
      <CustomPopupModal
        customPopup={customPopupModal}
        handleCloseClick={handleCloseCustomPopupModal}
      />
      {Boolean(consentExpiredFluids.length) &&
        consentExpiredFluids.map(fluid => {
          return (
            <ExpiredConsentModal
              key={fluid}
              open={openExpiredConsentModal}
              handleCloseClick={() => setopenExpiredConsentModal(false)}
              fluidType={fluid}
              toggleModal={() => setopenExpiredConsentModal(prev => !prev)}
            />
          )
        })}
    </>
  )
}

export default ConsumptionView