Skip to content
Snippets Groups Projects
SingleFluidViewContainer.tsx 3 KiB
Newer Older
  • Learn to ignore specific revisions
  • Hugo NOUTS's avatar
    Hugo NOUTS committed
    import React, { useState } 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 { FluidType } from 'enum/fluid.enum'
    import { TimeStep } from 'services/dataConsumptionContracts'
    import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
    import SingleFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer'
    
    interface SingleFluidViewContainerProps {
      fluidTypes: FluidType[]
    }
    const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
      fluidTypes,
    }: SingleFluidViewContainerProps) => {
      const [timeStep, setTimeStep] = useState<TimeStep>(20)
      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)
      }
    
      const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => {
        setResetReferenceDate(false)
        setTimeStep(_timeStep)
      }
    
      const defineHeaderHeight = (height: number) => {
        setHeaderHeight(height)
      }
    
      return (
        <>
          <CozyBar
            titleKey={`FLUID.${FluidType[fluidTypes[0]]}.NAME`}
            displayBackArrow={true}
          />
          <Header
            setHeaderHeight={defineHeaderHeight}
            desktopTitleKey={`FLUID.${FluidType[fluidTypes[0]]}.NAME`}
            displayBackArrow={true}
          >
            <ConsumptionNavigator
              fluidTypes={fluidTypes}
              multiFluid={false}
              timeStep={timeStep}
              handleClickTimeStep={handleClickTimeStepForNavigation}
            />
          </Header>
          <Content height={headerHeight}>
            {(isChartLoading || isIndicatorsLoading) && (
              <div className="content-view-loading">
                <StyledSpinner size="5em" fluidTypes={fluidTypes} />
              </div>
            )}
            <FluidContainer
              timeStep={timeStep}
              fluidTypes={fluidTypes}
              resetReferenceDate={resetRefenceDate}
              multiFluid={false}
              handleClickTimeStep={handleClickTimeStepForFluidContainer}
              setChartLoaded={setChartLoaded}
            />
            <SingleFluidIndicatorsContainer
              timeStep={timeStep}
              setIndicatorsLoaded={setIndicatorsLoaded}
              fluidTypes={fluidTypes}
            />
          </Content>
        </>
      )
    }
    
    export default SingleFluidViewContainer