From a13d3ff95d9989c81a1abfc4be9695cc92d54dd1 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 25 Mar 2024 16:31:47 +0000
Subject: [PATCH] refactor(ui): remove header logic from views
---
.vscode/settings.json | 3 ++-
src/components/Action/ActionView.tsx | 13 +++----------
.../__snapshots__/ActionView.spec.tsx.snap | 16 ++++------------
src/components/Analysis/AnalysisView.tsx | 8 ++------
src/components/Challenge/ChallengeView.tsx | 8 ++------
.../__snapshots__/ChallengeView.spec.tsx.snap | 4 +---
.../Connection/GRDFConnect/GrdfConnectView.tsx | 4 +---
.../Connection/SGEConnect/SgeConnectView.tsx | 4 +---
.../__snapshots__/SgeConnectView.spec.tsx.snap | 4 +---
src/components/Consumption/ConsumptionView.tsx | 8 ++------
src/components/Content/Content.tsx | 14 ++++++--------
.../Content/__snapshots__/Content.spec.tsx.snap | 2 +-
src/components/Duel/DuelView.tsx | 13 +++----------
.../EcogestureNotFound/EcogestureNotFound.tsx | 10 +++-------
.../EcogestureNotFound.spec.tsx.snap | 4 +---
src/components/Ecogesture/EcogestureTabsView.tsx | 8 ++------
.../Ecogesture/SingleEcogestureView.tsx | 4 +---
.../EcogestureTabsView.spec.tsx.snap | 4 +---
.../SingleEcogestureView.spec.tsx.snap | 4 +---
.../EcogestureForm/EcogestureFormView.tsx | 8 ++------
.../EcogestureFormView.spec.tsx.snap | 4 +---
.../EcogestureSelectionView.tsx | 4 +---
.../EcogestureSelectionView.spec.tsx.snap | 4 +---
src/components/Exploration/ExplorationView.tsx | 6 ++----
src/components/Header/Header.tsx | 7 +++----
src/components/Options/GCU/GCUView.tsx | 12 +++---------
.../GCU/__snapshots__/GCUView.spec.tsx.snap | 4 +---
.../Options/LegalNotice/LegalNoticeView.tsx | 7 ++-----
.../__snapshots__/LegalNoticeView.spec.tsx.snap | 4 +---
src/components/Options/OptionsView.tsx | 11 +++--------
.../__snapshots__/OptionsView.spec.tsx.snap | 4 +---
src/components/ProfileType/ProfileTypeView.tsx | 4 +---
src/components/Quiz/QuizView.tsx | 13 +++----------
src/models/global.model.ts | 1 +
src/store/global/global.slice.spec.ts | 8 ++++++++
src/store/global/global.slice.ts | 5 +++++
tests/__mocks__/store/global.state.mock.ts | 1 +
37 files changed, 78 insertions(+), 164 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 471272b31..f205f4272 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -154,5 +154,6 @@
"Usain",
"userchallenge"
],
- "typescript.tsdk": "node_modules/typescript/lib"
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "conventionalCommits.scopes": ["ui"]
}
diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx
index 705a66031..7b5fbab5d 100644
--- a/src/components/Action/ActionView.tsx
+++ b/src/components/Action/ActionView.tsx
@@ -3,7 +3,7 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { UserActionState } from 'enums'
import { UserChallenge } from 'models'
-import React, { useState } from 'react'
+import React from 'react'
import { useAppSelector } from 'store/hooks'
import ActionChoose from './ActionChoose/ActionChoose'
import ActionDone from './ActionDone/ActionDone'
@@ -11,7 +11,6 @@ import ActionOnGoing from './ActionOnGoing/ActionOnGoing'
const ActionView = () => {
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const renderAction = (challenge: UserChallenge) => {
switch (challenge.action.state) {
@@ -29,14 +28,8 @@ const ActionView = () => {
return (
<>
<CozyBar titleKey="common.title_action" displayBackArrow={true} />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_action"
- displayBackArrow={true}
- />
- <Content heightOffset={headerHeight}>
- {currentChallenge && renderAction(currentChallenge)}
- </Content>
+ <Header desktopTitleKey="common.title_action" displayBackArrow={true} />
+ <Content>{currentChallenge && renderAction(currentChallenge)}</Content>
</>
)
}
diff --git a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
index 6197c430c..cd7ed71bd 100644
--- a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
@@ -10,9 +10,7 @@ exports[`ActionView component should render match snapshot with "Notification" s
desktoptitlekey="common.title_action"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<mock-action-done
currentchallenge="[object Object]"
/>
@@ -30,9 +28,7 @@ exports[`ActionView component should render match snapshot with "Unstarted" stat
desktoptitlekey="common.title_action"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<mock-action-choose
userchallenge="[object Object]"
/>
@@ -50,9 +46,7 @@ exports[`ActionView component should render match snapshot with "onGoing" state
desktoptitlekey="common.title_action"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<mock-action-ongoing
useraction="[object Object]"
/>
@@ -70,9 +64,7 @@ exports[`ActionView component should render match snapshot with default case 1`]
desktoptitlekey="common.title_action"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<mock-action-choose
userchallenge="[object Object]"
/>
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 0047d6c50..85e543aca 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -26,7 +26,6 @@ const AnalysisView = () => {
profile: { monthlyAnalysisDate, mailToken },
} = useAppSelector(state => state.ecolyo)
const dispatch = useAppDispatch()
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const dateChartService = new DateChartService()
@@ -106,10 +105,7 @@ const AnalysisView = () => {
return (
<>
<CozyBar titleKey="common.title_analysis" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_analysis"
- >
+ <Header desktopTitleKey="common.title_analysis">
<DateNavigator
disableNext={isLastDateReached(analysisMonth, TimeStep.MONTH)}
disablePrev={false}
@@ -120,7 +116,7 @@ const AnalysisView = () => {
timeStep={TimeStep.MONTH}
/>
</Header>
- <Content heightOffset={headerHeight}>
+ <Content>
<MonthlyAnalysis
saveLastScrollPosition={saveLastScrollPosition}
scrollPosition={scrollPosition}
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index d55765ebf..6affdfee8 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -21,7 +21,6 @@ const ChallengeView = () => {
const cardWidth =
window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285
const cardHeight = window.outerHeight * 0.65
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [touchStart, setTouchStart] = useState<number>()
const [touchEnd, setTouchEnd] = useState<number>()
const [index, setIndex] = useState<number>(0)
@@ -99,11 +98,8 @@ const ChallengeView = () => {
return (
<>
<CozyBar titleKey="common.title_challenge" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_challenge"
- />
- <Content heightOffset={headerHeight}>
+ <Header desktopTitleKey="common.title_challenge" />
+ <Content>
<div
className="challengeSlider"
onClick={resetValues}
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 3f3366ca5..0f0c1a5cb 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -8,9 +8,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
<mock-header
desktoptitlekey="common.title_challenge"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="challengeSlider"
>
diff --git a/src/components/Connection/GRDFConnect/GrdfConnectView.tsx b/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
index 1ecf2d104..8fc09abbe 100644
--- a/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
@@ -20,7 +20,6 @@ export enum GrdfStep {
}
export const GrdfConnectView = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [launchConnection, setLaunchConnection] = useState(false)
const navigate = useNavigate()
const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
@@ -122,11 +121,10 @@ export const GrdfConnectView = () => {
<>
<CozyBar titleKey="common.title_gas_connect" displayBackArrow={true} />
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_gas_connect"
displayBackArrow={true}
/>
- <Content heightOffset={headerHeight}>
+ <Content>
<div className="connectView">
<div className="stepContainer">
<FormProgress
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 777e5556e..99aac17f2 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -33,7 +33,6 @@ const SgeConnectView = () => {
const [currentStep, setCurrentStep] = useState<SgeStep>(
SgeStep.IdentityAndPDL
)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const isNextValid = useCallback(() => {
switch (currentStep) {
@@ -133,11 +132,10 @@ const SgeConnectView = () => {
<>
<CozyBar titleKey="common.title_sge_connect" displayBackArrow={true} />
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_sge_connect"
displayBackArrow={true}
/>
- <Content heightOffset={headerHeight}>
+ <Content>
<div className="connectView">
<div className="stepContainer">
<FormProgress
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 9b3fe3495..cdc58037a 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -76,9 +76,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
class="header-bar"
/>
</header>
- <mock-content
- heightoffset="-48"
- >
+ <mock-content>
<div
class="connectView"
>
diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index a8658aaf0..9b2ff60c9 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -60,7 +60,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
releaseNotes.show
)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [active, setActive] = useState<boolean>(false)
const [openExpiredConsentModal, setOpenExpiredConsentModal] =
useState<boolean>(true)
@@ -218,10 +217,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
return (
<>
<CozyBar titleKey="common.title_consumption" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_consumption"
- >
+ <Header desktopTitleKey="common.title_consumption">
<DateNavigator
disableNext={isLastDateReached(selectedDate, currentTimeStep)}
disablePrev={disablePrev}
@@ -231,7 +227,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
timeStep={currentTimeStep}
/>
</Header>
- <Content heightOffset={headerHeight}>
+ <Content>
<FluidButtons activeFluid={fluidType} key={updateKey} />
{openReleaseNoteModal && (
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index c3674fab4..f30e26160 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -4,14 +4,12 @@ import React, { useEffect } from 'react'
import { changeScreenType } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './content.scss'
-interface ContentProps {
- children: React.ReactNode
- heightOffset?: number
-}
-const Content = ({ children, heightOffset = 0 }: ContentProps) => {
+const Content = ({ children }: { children: React.ReactNode }) => {
const dispatch = useAppDispatch()
- const { screenType } = useAppSelector(state => state.ecolyo.global)
+ const { screenType, headerHeight } = useAppSelector(
+ state => state.ecolyo.global
+ )
const cozyBarHeight = 48
const cozyNavHeight = 56
@@ -44,11 +42,11 @@ const Content = ({ children, heightOffset = 0 }: ContentProps) => {
<div
className="content-view"
style={{
- marginTop: heightOffset,
+ marginTop: headerHeight,
paddingBottom: 0,
minHeight:
screenType !== ScreenType.DESKTOP
- ? `calc(100vh - ${heightOffset}px - ${cozyBarHeight}px - ${cozyNavHeight}px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom))`
+ ? `calc(100vh - ${headerHeight}px - ${cozyBarHeight}px - ${cozyNavHeight}px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom))`
: `unset`,
}}
>
diff --git a/src/components/Content/__snapshots__/Content.spec.tsx.snap b/src/components/Content/__snapshots__/Content.spec.tsx.snap
index 9fc72e1b3..608a28e19 100644
--- a/src/components/Content/__snapshots__/Content.spec.tsx.snap
+++ b/src/components/Content/__snapshots__/Content.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Content component should match snapshot 1`] = `
<div>
<div
class="content-view"
- style="margin-top: 0px; padding-bottom: 0px; min-height: calc(100vh - 0px - 48px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom));"
+ style="margin-top: 62px; padding-bottom: 0px; min-height: calc(100vh - 62px - 48px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom));"
>
children
</div>
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index 1c60115ab..b4004e073 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -3,7 +3,7 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { UserDuelState } from 'enums'
import { UserChallenge } from 'models'
-import React, { useState } from 'react'
+import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import DuelEmptyValueModal from './DuelEmptyValueModal/DuelEmptyValueModal'
@@ -14,7 +14,6 @@ import DuelUnlocked from './DuelUnlocked/DuelUnlocked'
const DuelView = () => {
const navigate = useNavigate()
const { userChallengeList } = useAppSelector(state => state.ecolyo.challenge)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const id = new URLSearchParams(useLocation().search).get('id')
const challengeToDisplay: UserChallenge | undefined = userChallengeList.find(
challenge => challenge.id === id
@@ -46,14 +45,8 @@ const DuelView = () => {
return (
<>
<CozyBar titleKey="common.title_duel" displayBackArrow={true} />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_duel"
- displayBackArrow={true}
- />
- <Content heightOffset={headerHeight}>
- {renderDuel(challengeToDisplay)}
- </Content>
+ <Header desktopTitleKey="common.title_duel" displayBackArrow={true} />
+ <Content>{renderDuel(challengeToDisplay)}</Content>
</>
)
}
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
index 78ef552bf..c4bf64361 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
@@ -5,7 +5,7 @@ import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useState } from 'react'
+import React from 'react'
import { useNavigate } from 'react-router-dom'
import './ecogestureNotFound.scss'
@@ -18,16 +18,12 @@ const EcogestureNotFound = ({
}) => {
const { t } = useI18n()
const navigate = useNavigate()
- const [headerHeight, setHeaderHeight] = useState<number>(0)
return (
<>
<CozyBar titleKey="error_page.main" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="error_page.main"
- />
- <Content heightOffset={headerHeight}>
+ <Header desktopTitleKey="error_page.main" />
+ <Content>
<div className="error-container">
<StyledIcon className="profile-icon" icon={BearIcon} size={250} />
diff --git a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
index a991c215c..c6390dcbd 100644
--- a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
@@ -8,9 +8,7 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
<mock-header
desktoptitlekey="error_page.main"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="error-container"
>
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index a0491c097..73492100a 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -47,7 +47,6 @@ const EcogestureTabsView = () => {
state => state.ecolyo
)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [tabValue, setTabValue] = useState<EcogestureTab>(
tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
)
@@ -173,10 +172,7 @@ const EcogestureTabsView = () => {
return (
<>
<CozyBar titleKey="common.title_ecogestures" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_ecogestures"
- >
+ <Header desktopTitleKey="common.title_ecogestures">
<Tabs
value={tabValue}
className="ecogestures-tabs"
@@ -215,7 +211,7 @@ const EcogestureTabsView = () => {
</Tabs>
</Header>
- <Content heightOffset={headerHeight}>
+ <Content>
{isLoading && (
<div className="loaderContainer">
<Loader text={t('ecogestures.loading')} />
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 7f2c228df..ee8465dcb 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -42,7 +42,6 @@ const SingleEcogestureView = () => {
[client]
)
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [, setValidExploration] = useExploration()
const updateEcogesture = useCallback(
@@ -115,11 +114,10 @@ const SingleEcogestureView = () => {
<>
<CozyBar titleKey="common.title_ecogesture" displayBackArrow={true} />
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_ecogesture"
displayBackArrow={true}
/>
- <Content heightOffset={headerHeight}>
+ <Content>
{isLoading && (
<div className="loaderContainer">
<Loader />
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index e8ada2259..005a8b9c5 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -90,9 +90,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</div>
</div>
</mock-header>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
aria-labelledby="simple-tab-0"
id="simple-tabpanel-0"
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index d5009811f..e035305ba 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -10,9 +10,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
desktoptitlekey="common.title_ecogesture"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="single-ecogesture"
>
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index dc4e57379..1e51c9785 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -22,7 +22,6 @@ const EcogestureFormView = () => {
profile: { isProfileTypeCompleted },
profileEcogesture,
} = useAppSelector(state => state.ecolyo)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const shouldOpenModal = new URLSearchParams(useLocation().search).get('modal')
const [step, setStep] = useState<EcogestureStepForm>(
@@ -91,11 +90,8 @@ const EcogestureFormView = () => {
return (
<>
<CozyBar titleKey="common.title_ecogestures" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_ecogestures"
- />
- <Content heightOffset={headerHeight}>
+ <Header desktopTitleKey="common.title_ecogestures" />
+ <Content>
{isLoading && (
<div className="loaderContainer">
<Loader />
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index b759c1dab..843e5be16 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -8,9 +8,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
<mock-header
desktoptitlekey="common.title_ecogestures"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="ecogesture-profile-container"
>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
index 749060770..bab8b655b 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionView.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
@@ -21,7 +21,6 @@ const EcogestureSelectionView = () => {
const navigate = useNavigate()
const { profileEcogesture } = useAppSelector(state => state.ecolyo)
const [isLoading, setIsLoading] = useState(true)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [indexEcogesture, setIndexEcogesture] = useState<number>(0)
const [ecogestureList, setEcogestureList] = useState<Ecogesture[]>([])
const [totalViewed, setTotalViewed] = useState<number>(0)
@@ -133,7 +132,6 @@ const EcogestureSelectionView = () => {
backFunction={() => navigate('/ecogestures')}
/>
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_ecogestures_choice"
displayBackArrow={true}
>
@@ -143,7 +141,7 @@ const EcogestureSelectionView = () => {
: ''}
</div>
</Header>
- <Content heightOffset={headerHeight}>
+ <Content>
{isLoading && (
<div className="loaderContainer">
<Loader />
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
index d27b25cb7..b93b5cb8e 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
@@ -16,9 +16,7 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
1/1
</div>
</mock-header>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<mock-ecogestureselectiondetail
ecogesture="[object Object]"
title="Bonhomme de neige"
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 54106238c..ccde8fdb7 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -3,7 +3,7 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { UserExplorationState } from 'enums'
import { UserChallenge } from 'models'
-import React, { useState } from 'react'
+import React from 'react'
import { useAppSelector } from 'store/hooks'
import ExplorationError from './ExplorationError'
import ExplorationFinished from './ExplorationFinished'
@@ -11,7 +11,6 @@ import ExplorationOngoing from './ExplorationOngoing'
const ExplorationView = () => {
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const renderExploration = (challenge: UserChallenge) => {
switch (challenge.exploration.state) {
@@ -30,11 +29,10 @@ const ExplorationView = () => {
<>
<CozyBar titleKey="common.title_exploration" displayBackArrow={true} />
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_exploration"
displayBackArrow={true}
/>
- <Content heightOffset={headerHeight}>
+ <Content>
{currentChallenge && renderExploration(currentChallenge)}
</Content>
</>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9eba353d6..b200f36a7 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -6,6 +6,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
import { ScreenType } from 'enums'
import React, { useCallback, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
+import { setHeaderHeight } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openFeedbackModal } from 'store/modal/modal.slice'
import './header.scss'
@@ -16,7 +17,6 @@ interface HeaderProps {
displayBackArrow?: boolean
/** additional information to put below the main header */
children?: React.ReactNode
- setHeaderHeight(height: number): void
backFunction?: () => void
}
@@ -25,7 +25,6 @@ const Header = ({
desktopTitleKey,
displayBackArrow,
children,
- setHeaderHeight,
backFunction,
}: HeaderProps) => {
const { t } = useI18n()
@@ -50,8 +49,8 @@ const Header = ({
useEffect(() => {
const headerHeight = header.current?.clientHeight || 0
const adjustment = screenType === ScreenType.MOBILE ? cozyBarHeight : 0
- setHeaderHeight(headerHeight - adjustment)
- }, [screenType, children, setHeaderHeight])
+ dispatch(setHeaderHeight(headerHeight - adjustment))
+ }, [screenType, children, dispatch])
return (
<header ref={header}>
diff --git a/src/components/Options/GCU/GCUView.tsx b/src/components/Options/GCU/GCUView.tsx
index d5d525e53..9f4e06c97 100644
--- a/src/components/Options/GCU/GCUView.tsx
+++ b/src/components/Options/GCU/GCUView.tsx
@@ -2,20 +2,14 @@ import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import GCUContent from 'components/Options/GCU/GCUContent'
-import React, { useState } from 'react'
+import React from 'react'
const GCUView = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
-
return (
<>
<CozyBar titleKey="common.title_gcu" displayBackArrow={true} />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_gcu"
- displayBackArrow={true}
- />
- <Content heightOffset={headerHeight}>
+ <Header desktopTitleKey="common.title_gcu" displayBackArrow={true} />
+ <Content>
<GCUContent />
</Content>
</>
diff --git a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
index f5c466c4d..918984408 100644
--- a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
@@ -10,9 +10,7 @@ exports[`GCUView component should be rendered correctly 1`] = `
desktoptitlekey="common.title_gcu"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="gcu-content-root"
>
diff --git a/src/components/Options/LegalNotice/LegalNoticeView.tsx b/src/components/Options/LegalNotice/LegalNoticeView.tsx
index 4c68ee2a1..660a1f148 100644
--- a/src/components/Options/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeView.tsx
@@ -1,22 +1,19 @@
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import React, { useState } from 'react'
+import React from 'react'
import LegalNoticeContent from './LegalNoticeContent'
import './legalNoticeView.scss'
const LegalNoticeView = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
-
return (
<>
<CozyBar titleKey="common.title_legal_notice" displayBackArrow={true} />
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_legal_notice"
displayBackArrow={true}
/>
- <Content heightOffset={headerHeight}>
+ <Content>
<LegalNoticeContent />
</Content>
</>
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
index f236decc8..cfcafe24c 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
@@ -10,9 +10,7 @@ exports[`LegalNoticeView component should be rendered correctly 1`] = `
desktoptitlekey="common.title_legal_notice"
displaybackarrow="true"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="legal-notice-root"
>
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 8da4b6a0f..21cd96a2c 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -2,7 +2,7 @@ import logos from 'assets/png/logos_partenaires.svg'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import React, { useState } from 'react'
+import React from 'react'
import Accessibility from './Accessibility/Accessibility'
import ExportData from './ExportData/ExportData'
import GCULink from './GCU/GCULink'
@@ -14,16 +14,11 @@ import ReportOptions from './ReportOptions/ReportOptions'
import Version from './Version/Version'
const OptionsView = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
-
return (
<>
<CozyBar titleKey="common.title_options" />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_options"
- />
- <Content heightOffset={headerHeight}>
+ <Header desktopTitleKey="common.title_options" />
+ <Content>
<ProfileTypeOptions />
<ExportData />
<ReportOptions />
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index eee51c9ad..7fb5e230c 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -8,9 +8,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
<mock-header
desktoptitlekey="common.title_options"
/>
- <mock-content
- heightoffset="0"
- >
+ <mock-content>
<div
class="profile-type-root"
>
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 2436c5bd0..d7c716aab 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -37,7 +37,6 @@ const ProfileTypeView = () => {
state => state.ecolyo
)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const [currentProfileType, setCurrentProfileType] = useState<ProfileType>({
updateDate: DateTime.local()
.setZone('utc', {
@@ -225,11 +224,10 @@ const ProfileTypeView = () => {
<>
<CozyBar titleKey="common.title_profiletype" displayBackArrow={true} />
<Header
- setHeaderHeight={setHeaderHeight}
desktopTitleKey="common.title_profiletype"
displayBackArrow={true}
/>
- <Content heightOffset={headerHeight}>
+ <Content>
<div className="profileType-view">
<div className="progressContainer">
<FormProgress
diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx
index 380346fbe..fc45df655 100644
--- a/src/components/Quiz/QuizView.tsx
+++ b/src/components/Quiz/QuizView.tsx
@@ -3,7 +3,7 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { UserQuizState } from 'enums'
import { UserChallenge } from 'models'
-import React, { useState } from 'react'
+import React from 'react'
import { useAppSelector } from 'store/hooks'
import QuizBegin from './QuizBegin/QuizBegin'
import QuizFinish from './QuizFinish/QuizFinish'
@@ -11,7 +11,6 @@ import QuizQuestion from './QuizQuestion/QuizQuestion'
const QuizView = () => {
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
const renderQuiz = (challenge: UserChallenge) => {
switch (challenge.quiz.state) {
@@ -29,14 +28,8 @@ const QuizView = () => {
return (
<>
<CozyBar titleKey="common.title_quiz" displayBackArrow={true} />
- <Header
- setHeaderHeight={setHeaderHeight}
- desktopTitleKey="common.title_quiz"
- displayBackArrow={true}
- />
- <Content heightOffset={headerHeight}>
- {currentChallenge && renderQuiz(currentChallenge)}
- </Content>
+ <Header desktopTitleKey="common.title_quiz" displayBackArrow={true} />
+ <Content>{currentChallenge && renderQuiz(currentChallenge)}</Content>
</>
)
}
diff --git a/src/models/global.model.ts b/src/models/global.model.ts
index 8885c78cd..d05429521 100644
--- a/src/models/global.model.ts
+++ b/src/models/global.model.ts
@@ -20,4 +20,5 @@ export interface GlobalState {
partnersInfo: PartnersInfo
ecogestureFilter: Usage
lastEpglLogin: string
+ headerHeight: number
}
diff --git a/src/store/global/global.slice.spec.ts b/src/store/global/global.slice.spec.ts
index 922f49c57..494fe6fc6 100644
--- a/src/store/global/global.slice.spec.ts
+++ b/src/store/global/global.slice.spec.ts
@@ -11,6 +11,7 @@ import {
changeScreenType,
globalSlice,
setFluidStatus,
+ setHeaderHeight,
setLastEpglLogin,
setPartnersInfo,
setShouldRefreshConsent,
@@ -113,6 +114,13 @@ describe('globalSlice', () => {
screenType: ScreenType.DESKTOP,
})
})
+ it('should handle setHeaderHeight', () => {
+ const state = globalSlice.reducer(mockGlobalState, setHeaderHeight(100))
+ expect(state).toEqual({
+ ...mockGlobalState,
+ headerHeight: 100,
+ })
+ })
it('should handle toggleChallengeExplorationNotification', () => {
const state = globalSlice.reducer(
mockGlobalState,
diff --git a/src/store/global/global.slice.ts b/src/store/global/global.slice.ts
index f251ba453..cd34d3130 100644
--- a/src/store/global/global.slice.ts
+++ b/src/store/global/global.slice.ts
@@ -12,6 +12,7 @@ import {
} from 'models'
const initialState: GlobalState = {
+ headerHeight: 62,
screenType: ScreenType.MOBILE,
releaseNotes: {
show: false,
@@ -153,6 +154,9 @@ export const globalSlice = createSlice({
name: 'global',
initialState,
reducers: {
+ setHeaderHeight: (state, action: PayloadAction<number>) => {
+ state.headerHeight = action.payload
+ },
changeScreenType: (state, action: PayloadAction<ScreenType>) => {
state.screenType = action.payload
},
@@ -213,6 +217,7 @@ export const globalSlice = createSlice({
})
export const {
+ setHeaderHeight,
changeScreenType,
setFluidStatus,
setLastEpglLogin,
diff --git a/tests/__mocks__/store/global.state.mock.ts b/tests/__mocks__/store/global.state.mock.ts
index ddc0d309f..3c19efac3 100644
--- a/tests/__mocks__/store/global.state.mock.ts
+++ b/tests/__mocks__/store/global.state.mock.ts
@@ -3,6 +3,7 @@ import { FluidSlugType, FluidState, FluidType, ScreenType, Usage } from 'enums'
import { GlobalState } from 'models'
export const mockGlobalState: GlobalState = {
+ headerHeight: 62,
screenType: ScreenType.MOBILE,
challengeExplorationNotification: false,
challengeActionNotification: false,
--
GitLab