Skip to content
Snippets Groups Projects
HomeViewContainer.tsx 5.41 KiB
Newer Older
  • Learn to ignore specific revisions
  • Romain CREY's avatar
    Romain CREY committed
    import React, { useState, useContext, useEffect } from 'react'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    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'
    
    Romain CREY's avatar
    Romain CREY committed
    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'
    
    Romain CREY's avatar
    Romain CREY committed
    import useInstanceSettings from 'components/Hooks/userInstanceSettings'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    
    Romain CREY's avatar
    Romain CREY committed
    interface HomeViewContainerProps {
      t: Function
      client: Client
    }
    
    const HomeViewContainer: React.FC = ({ t, client }: HomeViewContainerProps) => {
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const [timeStep, setTimeStep] = useState<TimeStep>(20)
      const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
      const { fluidTypes } = useContext(AppContext)
      const [headerHeight, setHeaderHeight] = useState<number>(0)
    
    Romain CREY's avatar
    Romain CREY committed
      const [modalOpen, setModalOpen] = useState<boolean>(true)
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const [isChartLoading, setChartLoading] = useState<boolean>(true)
      const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
    
    Romain CREY's avatar
    Romain CREY committed
      const { data: instanceSettings } = useInstanceSettings(client)
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    
    Romain CREY's avatar
    Romain CREY committed
      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,
            })
          })
      }
    
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      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)
      }
    
    
    Romain CREY's avatar
    Romain CREY committed
      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()
      }, [])
    
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      return (
        <React.Fragment>
    
    Romain CREY's avatar
    Romain CREY committed
          <Modal
            open={modalOpen}
            handleCloseClick={handleCloseClick}
            yellowBorder="yellow-border"
          >
            <div className="wm-header text-24-bold">
              {t('COMMON.WELCOME_MODAL_TITLE')}
            </div>
    
    Romain CREY's avatar
    Romain CREY committed
            <div className="wm-name text-24-bold">
              {instanceSettings.public_name} !
            </div>
            <div className="wm-perso text-18-bold">
    
    Romain CREY's avatar
    Romain CREY committed
              {t('COMMON.WELCOME_MODAL_PERSO')}
            </div>
    
    Romain CREY's avatar
    Romain CREY committed
            <div className="wm-connect text-18-bold">
    
    Romain CREY's avatar
    Romain CREY committed
              {t('COMMON.WELCOME_MODAL_CONNECT')}
            </div>
            <StyledButton className="button-ok" onClick={handleCloseClick}>
              {t('COMMON.WELCOME_MODAL_OK')}
            </StyledButton>
          </Modal>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
          <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>
      )
    }
    
    
    Romain CREY's avatar
    Romain CREY committed
    export default translate()(withClient(HomeViewContainer))