Newer
Older
import React, { useState, useContext, useEffect } 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'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import { translate } from 'cozy-ui/react/I18n'
import { withClient, Client } from 'cozy-client'
import { USERPROFILE_DOCTYPE } from 'doctypes'
import useInstanceSettings from 'components/Hooks/userInstanceSettings'
interface HomeViewContainerProps {
t: Function
client: Client
}
const HomeViewContainer: React.FC = ({ t, client }: HomeViewContainerProps) => {
const [timeStep, setTimeStep] = useState<TimeStep>(20)
const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
const { fluidTypes } = useContext(AppContext)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [isChartLoading, setChartLoading] = useState<boolean>(true)
const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
const { data: instanceSettings } = useInstanceSettings(client)
async function updateWelcomeModalState() {
await client
.query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
.then(async ({ data }) => {
const doc = data[0]
await client.save({
...doc,
haveSeenWelcomeModal: 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)
}
const handleCloseClick = () => {
setModalOpen(false)
updateWelcomeModalState()
}
useEffect(() => {
async function getWelcomeModalState() {
await client
.query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
.then(async ({ data }) => {
const welcomeModalState = data[0].haveSeenWelcomeModal
setModalOpen(!welcomeModalState)
})
}
getWelcomeModalState()
}, [])
<Modal
open={modalOpen}
handleCloseClick={handleCloseClick}
yellowBorder="yellow-border"
>
<div className="wm-header text-24-bold">
{t('COMMON.WELCOME_MODAL_TITLE')}
</div>
<div className="wm-name text-24-bold">
{instanceSettings.public_name} !
</div>
<div className="wm-perso text-18-bold">
{t('COMMON.WELCOME_MODAL_CONNECT')}
</div>
<StyledButton className="button-ok" onClick={handleCloseClick}>
{t('COMMON.WELCOME_MODAL_OK')}
</StyledButton>
</Modal>
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<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>
)}
<FluidContainer
timeStep={timeStep}
fluidTypes={fluidTypes}
resetReferenceDate={resetRefenceDate}
multiFluid={true}
handleClickTimeStep={handleClickTimeStepForFluidContainer}
setChartLoaded={setChartLoaded}
/>
<MultliFluidIndicatorsContainer
timeStep={timeStep}
setIndicatorsLoaded={setIndicatorsLoaded}
/>
<ChallengeCardContainer />
</Content>
</>
) : (
<>
<Header setHeaderHeight={defineHeaderHeight}></Header>
<Content height={headerHeight}>
<KonnectorViewerContainer></KonnectorViewerContainer>
</Content>
</>
)}
</React.Fragment>
)
}