Newer
Older
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'

Hugo NOUTS
committed
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 isMulti = fluidType !== FluidType.MULTIFLUID
const { currentTimeStep, loading } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
const { fluidStatus, releaseNotes, openPartnersIssueModal } = useSelector(

Hugo NOUTS
committed
(state: AppStore) => state.ecolyo.global
)
const [isFluidKonnected, setIsFluidKonnected] = useState<boolean>(false)

Hugo NOUTS
committed
const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>(
releaseNotes.show
)
const [headerHeight, setHeaderHeight] = useState<number>(0)

Guilhem CARRON
committed
const [active, setActive] = useState<boolean>(false)

Guilhem CARRON
committed
/* 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}`

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

Hugo NOUTS
committed
const toggleReleaseNoteModal = useCallback(() => {
setOpenReleaseNoteModal(prev => !prev)
dispatch(showReleaseNotes(false, releaseNotes.notes))

Guilhem CARRON
committed
}, [dispatch, releaseNotes.notes])

Hugo NOUTS
committed
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])

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

Guilhem CARRON
committed

Hugo NOUTS
committed
{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,
})}
>

Guilhem CARRON
committed
<FluidChart
fluidType={fluidType}
setActive={setActive}

Guilhem CARRON
committed
/>
<ConsumptionDetails fluidType={fluidType} />
</div>
<div className="konnector-section">
<KonnectorViewerCard
fluidStatus={fluidStatus[fluidType]}
fluidType={fluidType}
isParam={true}
isDisconnected={false}

Guilhem CARRON
committed
setActive={setActive}
active={active}
/>
</div>
)}
</>
) : (
<div className="konnector-section">
<KonnectorViewerCard
fluidStatus={fluidStatus[fluidType]}
fluidType={fluidType}
isParam={false}
isDisconnected={true}
setActive={setActive}
active={active}
/>
) : (
<KonnectorViewerList />
)}
<PartnersIssueModal
open={openPartnersIssueModal}
fluidStatus={fluidStatus}
handleCloseClick={handleCloseModal}
/>
</>
)
}
export default ConsumptionView