ConsumptionView.tsx 4.18 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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'

interface ConsumptionViewProps {
  fluidType: FluidType
}
const ConsumptionView: React.FC<ConsumptionViewProps> = ({
  fluidType,
}: ConsumptionViewProps) => {
  const dispatch = useDispatch()
  const { currentTimeStep, loading } = useSelector(
    (state: AppStore) => state.ecolyo.chart
  )
  const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
  const [isFluidKonnected, setIsFluidKonnected] = useState<boolean>(false)
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [isMulti] = useState<boolean>(
    fluidType === FluidType.MULTIFLUID ? true : false
  )
38
  const [active, setActive] = useState<boolean>(false)
39

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

42
43
44
45
  const lastDataDate =
    fluidType !== FluidType.MULTIFLUID && fluidStatus[fluidType].lastDataDate
      ? fluidStatus[fluidType].lastDataDate!.toLocaleString()
      : ''
46

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
  const defineHeaderHeight = useCallback((height: number) => {
    setHeaderHeight(height)
  }, [])

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

  useEffect(() => {
    dispatch(setLoading(true))
  }, [dispatch])
  return (
    <>
      <CozyBar />
      <Header setHeaderHeight={defineHeaderHeight}>
        <DateNavigator />
69
        <FluidButtons activeFluid={fluidType} key={lastDataDate} />
70
71
72
73
74
75
76
77
78
79
80
81
82
83
      </Header>
      <Content height={headerHeight}>
        {isFluidKonnected ? (
          <>
            {loading && (
              <div className={'consumptionview-loading'} aria-busy="true">
                <StyledSpinner size="5em" fluidType={fluidType} />
              </div>
            )}
            <div
              className={classNames('consumptionview-content', {
                ['--hidden']: loading,
              })}
            >
84
85
86
87
88
              <FluidChart
                fluidType={fluidType}
                setActive={setActive}
                key={lastDataDate}
              />
89
90
91
92
93
94
              <ConsumptionDetails fluidType={fluidType} />
            </div>
            {!isMulti && (
              <div className="konnector-section">
                <KonnectorViewerCard
                  fluidStatus={fluidStatus[fluidType]}
95
                  fluidType={fluidType}
96
97
                  isParam={true}
                  isDisconnected={false}
98
99
                  setActive={setActive}
                  active={active}
100
101
102
103
104
105
106
107
                />
              </div>
            )}
          </>
        ) : !isMulti ? (
          <div className="konnector-section">
            <KonnectorViewerCard
              fluidStatus={fluidStatus[fluidType]}
108
              fluidType={fluidType}
109
110
              isParam={false}
              isDisconnected={true}
111
112
              setActive={setActive}
              active={active}
113
114
115
116
117
118
119
120
121
122
123
124
125
            />
          </div>
        ) : (
          <div className="konnector-section">
            <KonnectorViewerList />
          </div>
        )}
      </Content>
    </>
  )
}

export default ConsumptionView