import React, { useState, useContext } from 'react' import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar' import Header from 'components/ContainerComponents/Header/Header' import Content from 'components/ContainerComponents/Content/Content' import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer' import { TimeStep } from 'services/dataConsumptionContracts' import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator' import { AppContext } from 'components/Contexts/AppContextProvider' import MultliFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer' import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer' import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer' const HomeViewContainer: React.FC = () => { const { fluidTypes, previousTimeStep, setPreviousTimeStep } = useContext( AppContext ) const [timeStep, setTimeStep] = useState<TimeStep>( previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR ? previousTimeStep : TimeStep.DAY ) const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false) const [headerHeight, setHeaderHeight] = useState<number>(0) const [isChartLoading, setChartLoading] = useState<boolean>(true) const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true) const setChartLoaded = () => { setChartLoading(false) } const setIndicatorsLoaded = () => { setIndicatorsLoading(false) } const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => { setResetReferenceDate(true) setTimeStep(_timeStep) setPreviousTimeStep(_timeStep) } const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => { setResetReferenceDate(false) setTimeStep(_timeStep) } const defineHeaderHeight = (height: number) => { setHeaderHeight(height) } return ( <React.Fragment> <CozyBar /> {fluidTypes && fluidTypes.length > 0 ? ( <> <Header setHeaderHeight={defineHeaderHeight} textKey={'COMMON.APP_PRESENTATION'} > <ConsumptionNavigator fluidTypes={fluidTypes} multiFluid={true} timeStep={timeStep} handleClickTimeStep={handleClickTimeStepForNavigation} /> </Header> <Content height={headerHeight}> {(isChartLoading || isIndicatorsLoading) && ( <div className="content-view-loading"> <StyledSpinner size="5em" /> </div> )} <div className={`${ isChartLoading || isIndicatorsLoading ? 'chart-indicator-none' : 'chart-indicator-block' }`} > <FluidContainer timeStep={timeStep} fluidTypes={fluidTypes} resetReferenceDate={resetRefenceDate} multiFluid={true} handleClickTimeStep={handleClickTimeStepForFluidContainer} setChartLoaded={setChartLoaded} /> <MultliFluidIndicatorsContainer timeStep={timeStep} setIndicatorsLoaded={setIndicatorsLoaded} /> <ChallengeCardContainer /> </div> </Content> </> ) : ( <> <Header setHeaderHeight={defineHeaderHeight}></Header> <Content height={headerHeight}> <KonnectorViewerContainer></KonnectorViewerContainer> </Content> </> )} </React.Fragment> ) } export default HomeViewContainer