diff --git a/.vscode/settings.json b/.vscode/settings.json
index 471272b3125f5203b5ad76980906e1113e308e7d..f205f427206d42e50c1fba508cb14bfddd8d7675 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 705a66031d0b2d791d1041f7bc8f874c019f5ace..7b5fbab5d6852111c2d6781d1045870ecc459227 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 6197c430c16f23523cbf9163f61e433bc862f146..cd7ed71bda2e62a0f90c8c17df8c29aee1794b1d 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 0047d6c501a1a73776a2652111f7b460de643e6e..85e543aca28f0ce4ed04e8fab04ce12505fd3326 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 d55765ebf5596fe03eb72362b2959a7031e826b7..6affdfee88aa882dd7fa7bd22f07be87ee98b64e 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 3f3366ca5dc5e7798dbbe06ec4710fca25d1e5c3..0f0c1a5cb86a6d1aa750d9fccde498df95890c96 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 1ecf2d104ed46ae0f455995c9d6da648fbc828bd..8fc09abbe5803f974dc797f28e9829788032f368 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 777e5556efc91f3840a973a9165c46b53b06de1d..99aac17f296715e5cc651abf077ccd18e878a7c7 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 9b3fe3495ddab6c2dc20ce859e0800fca2a1b127..cdc58037adb76fba73cd409447e624c664bda733 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 a8658aaf03e96f441098b87cd5ca1b0de822083f..9b2ff60c9818869d79b51cf9dbcebc3b332e05b5 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 c3674fab4235568755913bb00c4ff131373ea883..f30e26160617fbeb18479fcec8327522b93e548a 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 9fc72e1b3ca438b10ddb746aec2a30352432ed49..608a28e19dae437364ac8de19f5e836218911dc5 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 1c60115ab09cdfac9793d86f43417f5f6763b3c2..b4004e0732b552ae5393eaa7b1ab0d8b32630ec3 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 78ef552bf893e62b384b11b20cb1274ab607098a..c4bf6436168bc290dd586869332eacff4c980af0 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 a991c215c20992f6faf548741dfa93c8fe97e850..c6390dcbde7545e575c73c7134cb4eac3b4bc6a4 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 a0491c0974d72c455e4ef61e9ec607394e6a465a..73492100aa51f1c9e88db3a045de3c4a348bf851 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 7f2c228dfa79fbf77c7a95633d6d9cd4c8211941..ee8465dcb2e964639066d7e48887bb653a2d2fcd 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 e8ada2259dc01776e81f24afd7453e4054a9b768..005a8b9c5f797d13770f0b54ef608a7b9c551ef5 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 d5009811f16c175b7b06d0b1940e281c59c30564..e035305baaeb0458c5215c6fdfcca0a0defea995 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 dc4e57379310b77bddf7fa3b1bf3f3f6011e298a..1e51c9785fa35b30bc9b830b3c70d6c83363d31b 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 b759c1dabdb8f7bb39bb2352dfd9b5ce5e328f6a..843e5be16fa4073f91f44198153361d2f5bec129 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 749060770df62a29fd23f39092b29e6331b86dd1..bab8b655bdafe7fa35c090c19b94cb5ea4bc9ce2 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 d27b25cb74a62bbd1fb43d742645ba4059225031..b93b5cb8ea5343e60e55b3450120df58ffaf7ab9 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 54106238c9db76a3568939e1d8555de613288457..ccde8fdb71798e3b0d362c581504a822cdfee278 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 9eba353d66a8156dd0a837e4a749c8b2271de4c3..b200f36a72621b30f136f0bc0c38706c9eb30129 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 d5d525e538062eb138d3f08c670643efef9337c3..9f4e06c97017ace8a703e8db29d4229e106b950a 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 f5c466c4d47f425be2d8979d1c5a2995a763982b..918984408f738a1e931094280581679954ed37ce 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 4c68ee2a1b48cca408a1cae207e24ca4464cd182..660a1f14806934a8e5db9378dc5aed686b227709 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 f236decc8ad65984c4fd9640a1be5cb9915c238d..cfcafe24c35d3ffa8d738027f2c04c6107e1a8c2 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 8da4b6a0fb4b806e59c4fd3fd206f89c00333724..21cd96a2ce4c7b4ad09e9141cb61f2eca33ff430 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 eee51c9ad1383e8c55bd7bbb53ab0d99fe3e5af1..7fb5e230cdcb6ac88ed868538296e64bed7c86e7 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 2436c5bd0203f363949993fd39c456cb4f2e632a..d7c716aab43ddbf67ac87bb35a3b855bb4466f9b 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 380346fbe0fba125cf5b63b232dccee3b2f28b45..fc45df655cf53bcc4fc6851edb1b6ecb2d87a4b0 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 8885c78cd72d5debe8c04da2c799feef04e131c2..d0542952106660c0f2531adef5293c390a2a96b6 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 922f49c5768bb2fdab9e01738d6b75995eb6f5d2..494fe6fc6ab85a041c27694269deca550f0978a7 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 f251ba453ab9d70ae6008aa7156ba6695c49aa98..cd34d31307826fb6a050d75655025494aa00de66 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 ddc0d309f58fab3acdb351c8541b654f6df8e8a6..3c19efac32e4edefa90cb524f770d0c4d5b496f8 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,