diff --git a/.eslintrc.js b/.eslintrc.js
index d463b1af434adc17f24ef1ccf9bee0270c49378b..4d604c901b60280cffb38ec3f550d01b84bbda2f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
'no-console': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/prefer-optional-chain': 'warn',
+ 'react/self-closing-comp': 'warn',
},
settings: {
react: {
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index 16e4379b858860c7d902a90d49ccc36f25beb049..8627d2e829103a606d1aad326bc89189d555cfc4 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -92,7 +92,7 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
style={{
backgroundImage: `${setGradient()}`,
}}
- ></div>
+ />
</div>
<div className="result-title text-18-bold"> {t('action.result')}</div>
<div className="result-date text-24-bold">{getResultDate()}</div>
diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx
index 1b6a65dfa93f107ad5ffdc1f7b62407541974685..d3c06417185e99ea2a032f11b604828879dfc5ce 100644
--- a/src/components/Action/ActionView.tsx
+++ b/src/components/Action/ActionView.tsx
@@ -39,7 +39,7 @@ const ActionView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_action'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
{currentChallenge && renderAction(currentChallenge)}
</Content>
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index 0366bc27ef838d4ec7b360eb9b6eac96f24bed24..4dfb6ac44d9d2b895956b28902f7a3664cab1862 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -54,7 +54,7 @@ jest.mock('services/profileTypeEntity.service', () => {
})
jest.mock('components/Analysis/AnalysisConsumptionRow', () => () => (
- <div id="analysisconsumptionrow"></div>
+ <div id="analysisconsumptionrow" />
))
const mockStore = configureStore([])
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 5e427339814e260898b1689f616628e4e9236927..49f1099e26f860bd8afe3951f52768755bc5dabe 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-import { updateProfile } from 'store/profile/profile.actions'
-import { toggleAnalysisNotification } from 'store/global/global.actions'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
+import { toggleAnalysisNotification } from 'store/global/global.actions'
+import { updateProfile } from 'store/profile/profile.actions'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
-import './analysisView.scss'
+import Content from 'components/Content/Content'
import DateNavigator from 'components/DateNavigator/DateNavigator'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { useClient } from 'cozy-client'
+import { UsageEventType } from 'enum/usageEvent.enum'
import { DateTime } from 'luxon'
import { useLocation } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
-import { useClient } from 'cozy-client'
-import { UsageEventType } from 'enum/usageEvent.enum'
+import './analysisView.scss'
const AnalysisView: React.FC = () => {
const client = useClient()
@@ -105,10 +105,10 @@ const AnalysisView: React.FC = () => {
return (
<>
- <CozyBar titleKey={'analysis.viewTitle'} />
+ <CozyBar titleKey={'common.title_analysis'} />
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'analysis.viewTitle'}
+ desktopTitleKey={'common.title_analysis'}
>
<DateNavigator
currentAnalysisDate={currentAnalysisDate}
diff --git a/src/components/Analysis/PieChart.tsx b/src/components/Analysis/PieChart.tsx
index 72433597c1ac1d0b57513013a282eff56b5f1dde..65929a7cb42a84d8f2b46a5014cd93893f342c94 100644
--- a/src/components/Analysis/PieChart.tsx
+++ b/src/components/Analysis/PieChart.tsx
@@ -119,7 +119,7 @@ const PieChart: React.FC<PieProps> = ({
top: arcWidth / 2,
left: arcWidth - arcWidth / 2,
}}
- ></div>
+ />
</div>
<EstimatedConsumptionModal
open={openEstimationModal}
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 46ec435514b207fc75e8844036ac2c73c29fb563..7e3e1b74400fb374057a641308494c6ba64846c6 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -1,17 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import './challengeView.scss'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import CozyBar from 'components/Header/CozyBar'
+import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
+import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import ChallengeCard from './ChallengeCard'
-import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
-import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import { UserChallengeState } from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import ChallengeCard from './ChallengeCard'
+import './challengeView.scss'
const ChallengeView: React.FC = () => {
const { t } = useI18n()
@@ -147,7 +147,7 @@ const ChallengeView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_challenge'}
- ></Header>
+ />
<Content height={headerHeight}>
<div
className="challengeSlider"
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index 559f144fb839435a6670d5ae136a934fbaa0e419..9302b9cd943a9abe3184bc380c06914348b28b7e 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -171,7 +171,7 @@ const AxisBottom: React.FC<AxisBottomProps> = ({
x2={xScale.bandwidth() / 2}
y1="0"
y2={-(height - marginBottom)}
- ></line>
+ />
) : null}
</g>
))}
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
index fdc9f8093f7249ebba4cca314b06af13e510ecd4..abaea68bc68f3bc6cc2821c833a25d2e86fc1c63 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
@@ -25,8 +25,8 @@ jest.mock('react-router-dom', () => ({
}),
}))
-jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
-jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
+jest.mock('components/Header/Header', () => () => <div id="Header" />)
+jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar" />)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
jest.mock('components/Content/Content', () => (props: any) => (
<div id="content">{props.children}</div>
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
index 1a673d0111f983735179c7d291bbbd767b4ae189..58341fef52e2530efb389b64878749cc216bb1c1 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback, useState } from 'react'
+import { Button } from '@material-ui/core'
+import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
-import { Button } from '@material-ui/core'
-import { useHistory } from 'react-router-dom'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback, useState } from 'react'
+import { useHistory } from 'react-router-dom'
import './errorPage.scss'
interface ErrorPageProps {
@@ -34,7 +34,7 @@ const ErrorPage: React.FC<ErrorPageProps> = ({
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'error_page.main'}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="error-container">
<StyledIcon className="profile-icon" icon={BearIcon} size={250} />
diff --git a/src/components/Connection/FormLogin.tsx b/src/components/Connection/FormLogin.tsx
index d1044446fe9591c002fc816a4d70033c69617333..cf25a9a3e620c40f79c09e1e41a8cba49d27c749 100644
--- a/src/components/Connection/FormLogin.tsx
+++ b/src/components/Connection/FormLogin.tsx
@@ -121,7 +121,7 @@ const FormLogin: React.FC<FormLoginProps> = ({
}
value={login}
inputMode="numeric"
- ></input>
+ />
</div>
<div className="form-group">
<input
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 4097240cce25b7bd4b5893985a8af81018003a7e..d1e6d89d20e3af078f36ee46cadee431e20613e0 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -136,7 +136,7 @@ const SgeConnectView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_sge_connect'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="sge-view">
<div className="sge-container">
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index ec1fa6b954c4a7890d24e5c5ba00c5bcd03df3e1..fe02f644682aaaafa24fad8625051406f3c13871 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -31,7 +31,7 @@ const DataloadConsumptionVisualizer = ({
}, [])
if (loading || !dataload) {
- return <div className="dataloadvisualizer-root"></div>
+ return <div className="dataloadvisualizer-root" />
}
if (
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 29e629a1b0a49e831c28d3ee2f72da2fba473400..b765c74730a02148aed03875c782c6299cde807c 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -63,7 +63,7 @@ const DataloadSectionDetail = ({
fluidType === FluidType.MULTIFLUID &&
dataloadSectionType !== DataloadSectionType.NO_COMPARE
) {
- return <div className="dataloadvisualizer-euro text-16-normal"></div>
+ return <div className="dataloadvisualizer-euro text-16-normal" />
}
if (
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index 2e968b0189f8c1d094d8a3bae7fd4156003bfcf9..54edb152bc533b29ab2c8ae014d08bb481b46b73 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -57,7 +57,7 @@ const DuelView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_duel'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div>
{challengeToDisplay &&
diff --git a/src/components/Ecogesture/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard.spec.tsx
index 3146ddbdb375ff02e25230b93ed77e1859ba5775..2aca94f0f5a5ffff3ac0c7749837d1a6dcfddfab 100644
--- a/src/components/Ecogesture/EcogestureCard.spec.tsx
+++ b/src/components/Ecogesture/EcogestureCard.spec.tsx
@@ -20,7 +20,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
jest.mock('components/CommonKit/Icon/StyledIcon', () => () => (
- <div id="StyledIcon"></div>
+ <div id="StyledIcon" />
))
const mockImportIconbyId = jest.fn()
jest.mock('utils/utils', () => {
diff --git a/src/components/Ecogesture/SingleEcogesture.spec.tsx b/src/components/Ecogesture/SingleEcogesture.spec.tsx
index 1c4cd286b5237908c5364e48b51c8a57b47c7498..bf710ac4a42484808a829c3ccacd8a215b4e4878 100644
--- a/src/components/Ecogesture/SingleEcogesture.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.spec.tsx
@@ -27,11 +27,11 @@ jest.mock('utils/utils', () => {
})
jest.mock('components/Ecogesture/EfficientyRating', () => () => (
- <div id="EfficientyRating"></div>
+ <div id="EfficientyRating" />
))
-jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
-jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
-jest.mock('components/Loader/Loader', () => () => <div id="spinner"></div>)
+jest.mock('components/Header/Header', () => () => <div id="Header" />)
+jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar" />)
+jest.mock('components/Loader/Loader', () => () => <div id="spinner" />)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
jest.mock('components/Content/Content', () => (props: any) => (
<div id="content">{props.children}</div>
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index 2d49b1c0d8eb4314afad4ccecd907e33b907475d..a84c41f078c18b82f9b5ad3b5aa989b48c7bd471 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -141,17 +141,15 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
return ecogesture ? (
<>
<CozyBar
- titleKey={t('common.title_ecogesture')}
- isNotKey={true}
+ titleKey={'common.title_ecogesture'}
displayBackArrow={true}
backFunction={() => history.push('/ecogestures')}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={t('common.title_ecogesture')}
+ desktopTitleKey={'common.title_ecogesture'}
displayBackArrow={true}
- isNotKey={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="single-ecogesture">
<div className="icon-container">
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
index 23aaff6f392f44a743614f35dc94f361e2ac6136..aa643f350403b2285e38d710bf3bf9a2b1989a72 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
@@ -25,7 +25,6 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<Component
backFunction={[Function]}
displayBackArrow={true}
- isNotKey={true}
titleKey="common.title_ecogesture"
>
<div
@@ -35,7 +34,6 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<Component
desktopTitleKey="common.title_ecogesture"
displayBackArrow={true}
- isNotKey={true}
setHeaderHeight={[Function]}
>
<div
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index 2e001b9fc2127c95c2b60a7dd8b8fda4ec4fd2f8..d160707331f9c22eb085550666be60d71926c0a4 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -102,7 +102,7 @@ const EcogestureFormView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_ecogestures'}
- ></Header>
+ />
<Content height={headerHeight}>
{isProfileTypeCompleted ? (
<ProfileTypeView />
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 1dd8fb2d7723aa408fd5c8e04bb628e1f9abb811..e65190a65efbd2c2a614be892fb7e82adcaf4407 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -125,16 +125,14 @@ const EcogestureSelection: React.FC = () => {
return (
<>
<CozyBar
- titleKey={t('common.title_ecogestures_choice')}
- isNotKey={true}
+ titleKey={'common.title_ecogestures_choice'}
displayBackArrow={true}
backFunction={() => history.push('/ecogestures')}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={t('common.title_ecogestures_choice')}
+ desktopTitleKey={'common.title_ecogestures_choice'}
displayBackArrow={true}
- isNotKey={true}
>
<div className="eg-selection-header">
{indexEcogesture <= ecogestureList.length - 1
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
index 5680d8025e4e8999108f259e115c2fe00035c465..32838b95b199f5c6354c5fb61b4dd2e60415240c 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
@@ -17,13 +17,11 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
<mock-cozybar
backFunction={[Function]}
displayBackArrow={true}
- isNotKey={true}
titleKey="common.title_ecogestures_choice"
/>
<mock-header
desktopTitleKey="common.title_ecogestures_choice"
displayBackArrow={true}
- isNotKey={true}
setHeaderHeight={[Function]}
>
<div
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 587bc84f567978764b82d5498188209461d486c9..34b39786e36aeb7aa18c4b2246f108cfa892b889 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -40,7 +40,7 @@ const ExplorationView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_exploration'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
{currentChallenge && renderExploration(currentChallenge)}
</Content>
diff --git a/src/components/FormGlobal/FormProgress.tsx b/src/components/FormGlobal/FormProgress.tsx
index 8f8616872dbadd4abe525f2482831a8fa9c82ff4..b371ef2ae9562de3cda95a956ee90b9bc1fcfcae 100644
--- a/src/components/FormGlobal/FormProgress.tsx
+++ b/src/components/FormGlobal/FormProgress.tsx
@@ -26,7 +26,7 @@ const FormProgress: React.FC<FormProgressProps> = ({
<div
className={'profile-type-progress-bar-content'}
style={{ width: `${getProgress()}%` }}
- ></div>
+ />
</div>
</div>
)
diff --git a/src/components/GCU/GCUView.tsx b/src/components/GCU/GCUView.tsx
index 775fc21005a4d157227ef51462a009805fa5a114..841c4832243bbc5836ba57800051df27e70a8229 100644
--- a/src/components/GCU/GCUView.tsx
+++ b/src/components/GCU/GCUView.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useState } from 'react'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import GCUContent from 'components/GCU/GCUContent'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import React, { useCallback, useState } from 'react'
const GCUView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -18,7 +18,7 @@ const GCUView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_gcu'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<GCUContent />
</Content>
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index 33b4c8d7449ba701836f955187b1e62bf12d8a02..e551519bf541cb61d4a8ab7215f0e9fcb808d40a 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -12,14 +12,13 @@ import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
interface CozyBarProps {
titleKey?: string
displayBackArrow?: boolean
- isNotKey?: boolean
backFunction?: () => void
}
+/** Header with CozyBar for mobile view */
const CozyBar = ({
titleKey = 'common.title_app',
displayBackArrow = false,
- isNotKey,
backFunction,
}: CozyBarProps) => {
const { t } = useI18n()
@@ -43,7 +42,7 @@ const CozyBar = ({
const cozyBarCustom = (screen?: ScreenType) => {
if (screen === ScreenType.MOBILE) {
return (
- <React.Fragment>
+ <>
{displayBackArrow && (
<BarLeft>
<StyledIconButton
@@ -56,9 +55,7 @@ const CozyBar = ({
)}
<BarCenter>
<div className="cozy-bar">
- <span className="app-title">
- {isNotKey ? titleKey : t(titleKey)}
- </span>
+ <span className="app-title">{t(titleKey)}</span>
</div>
</BarCenter>
<BarRight>
@@ -70,7 +67,7 @@ const CozyBar = ({
onClick={handleClickFeedbacks}
/>
</BarRight>
- </React.Fragment>
+ </>
)
}
return null
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 3aab69e60e9d74357fee306a45a6702effc59c42..272c79896a49af0861773baa0e0244beecdb1fc5 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -1,14 +1,13 @@
-import React from 'react'
+import IconButton from '@material-ui/core/IconButton'
+import Header from 'components/Header/Header'
+import { ScreenType } from 'enum/screen.enum'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import * as ModalAction from 'store/modal/modal.actions'
-import Header from 'components/Header/Header'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { ScreenType } from 'enum/screen.enum'
-import IconButton from '@material-ui/core/IconButton'
-
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
useI18n: jest.fn(() => {
@@ -38,26 +37,15 @@ describe('Header component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <Header setHeaderHeight={mocksetHeaderHeight} />
+ <Header
+ setHeaderHeight={mocksetHeaderHeight}
+ desktopTitleKey="mockKey"
+ />
</Provider>
)
expect(wrapper.find('.header')).toHaveLength(1)
})
- it('should display text when textKey is provided', () => {
- const store = mockStore({
- ecolyo: {
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <Header textKey={'KEY'} setHeaderHeight={mocksetHeaderHeight} />
- </Provider>
- )
- expect(wrapper.find('.header-text').first().text()).toEqual('KEY')
- })
-
it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
const store = mockStore({
ecolyo: {
@@ -113,7 +101,10 @@ describe('Header component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <Header setHeaderHeight={mocksetHeaderHeight} />
+ <Header
+ setHeaderHeight={mocksetHeaderHeight}
+ desktopTitleKey="mockKey"
+ />
</Provider>
)
const updateModalSpy = jest.spyOn(ModalAction, 'updateModalIsFeedbacksOpen')
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3a469698acd1c2763813fac605baae53afe10cfe..8ff67e6ba539b1bf758a40248aa3a6afe2b0b943 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,36 +1,33 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import './header.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
+import IconButton from '@material-ui/core/IconButton'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from '@material-ui/core/IconButton'
+import { ScreenType } from 'enum/screen.enum'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import './header.scss'
interface HeaderProps {
- textKey?: string
- desktopTitleKey?: string
+ /** translation key used as t('key.value') */
+ desktopTitleKey: string
displayBackArrow?: boolean
children?: React.ReactNode
setHeaderHeight(height: number): void
- isNotKey?: boolean
backFunction?: () => void
}
+/** Header for desktop view */
const Header: React.FC<HeaderProps> = ({
- textKey,
desktopTitleKey,
displayBackArrow,
children,
setHeaderHeight,
- isNotKey,
backFunction,
-}: HeaderProps) => {
+}) => {
const { t } = useI18n()
const history = useHistory()
const header = useRef(null)
@@ -67,22 +64,11 @@ const Header: React.FC<HeaderProps> = ({
<div className="header-content">
<div
className={
- !textKey && !desktopTitleKey
+ !desktopTitleKey
? 'header-content-top header-content-top-right'
: 'header-content-top'
}
>
- {textKey && (
- <div
- className={`header-text ${
- screenType === ScreenType.MOBILE
- ? 'text-14-normal-uppercase'
- : 'text-22-bold'
- }`}
- >
- {isNotKey ? textKey : t(textKey)}
- </div>
- )}
{desktopTitleKey && (
<div
className={`header-text-desktop ${
@@ -100,13 +86,13 @@ const Header: React.FC<HeaderProps> = ({
<Icon icon={BackArrowIcon} size={16} />
</IconButton>
)}
- <span>{isNotKey ? desktopTitleKey : t(desktopTitleKey)}</span>
+ <span>{t(desktopTitleKey)}</span>
</div>
)}
<IconButton
aria-label={t('header.accessibility.button_open_feedbacks')}
className={
- !textKey && !desktopTitleKey
+ !desktopTitleKey
? 'header-feedbacks-button right'
: 'header-feedbacks-button'
}
@@ -118,7 +104,7 @@ const Header: React.FC<HeaderProps> = ({
{children}
</div>
</div>
- <div className="header-bar"></div>
+ <div className="header-bar" />
</div>
)
}
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 58b400875df97adae6f402c919734b5db7e52a09..755efde668cf828c91db1a5f96cfc3e8ae0eeb7f 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -7,11 +7,15 @@
align-items: center;
flex-direction: column;
overflow: hidden;
- width: 100%;
+ width: 85%;
z-index: $z-header;
position: fixed;
top: 48px;
- left: 0;
+
+ @media #{$tablet} {
+ width: 100%;
+ }
+
@media #{$large-phone} {
top: 0;
}
@@ -28,7 +32,6 @@
}
}
.header-content {
- margin: 0 0 0 220px;
display: flex;
flex-direction: column;
@media #{$tablet} {
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index c16b6ce740a524f091fd55dd4262b36371344efb..71426c536e45a82f4671113548cade25964f5a3c 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -177,8 +177,11 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
return (
<>
- <CozyBar titleKey={'navigation.consumption'} />
- <Header setHeaderHeight={defineHeaderHeight}>
+ <CozyBar titleKey={'common.title_consumption'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_consumption'}
+ >
<DateNavigator />
</Header>
<Content height={headerHeight}>
@@ -188,7 +191,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
<ReleaseNotesModal
open={openReleaseNoteModal}
handleCloseClick={handleCloseReleaseNoteModal}
- ></ReleaseNotesModal>
+ />
)}
{isFluidKonnected ? (
<>
diff --git a/src/components/LegalNotice/LegalNoticeView.tsx b/src/components/LegalNotice/LegalNoticeView.tsx
index f4c83a0e45cf3f6397a0017801950f5e47fa9294..6f66c937f972ec37b0bb96b4ae15bd32b75150f6 100644
--- a/src/components/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/LegalNotice/LegalNoticeView.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback, useState } from 'react'
+import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import './legalNoticeView.scss'
+import React, { useCallback, useState } from 'react'
import LegalNoticeContent from './LegalNoticeContent'
+import './legalNoticeView.scss'
const LegalNoticeView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -18,7 +18,7 @@ const LegalNoticeView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_legal_notice'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<LegalNoticeContent />
</Content>
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index c638d3edaaf568b11361e9e1fbd4e82c7cdbe957..127642014faec613eb8798cc55e6be0803848fbc 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -17,7 +17,7 @@ const MatomoOptOut: React.FC = () => {
<iframe
style={{ height: '250px' }}
src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
- ></iframe>
+ />
</div>
</div>
)
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 15fd3108a7219bb5ab44763929dddabb46615a83..ed07406fddecb8a5d824206ac99975b8fa7bdffe 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -24,7 +24,7 @@ const OptionsView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_options'}
- ></Header>
+ />
<Content height={headerHeight}>
<ProfileTypeOptions />
<ExportOptions />
diff --git a/src/components/Options/Unsubscribe/UnSubscribe.tsx b/src/components/Options/Unsubscribe/UnSubscribe.tsx
index bbf9646baf05915bfaba3d95a9728c827948d452..6253a5ccd5d72ad2e6b8285074eea164d6ca0d3d 100644
--- a/src/components/Options/Unsubscribe/UnSubscribe.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.tsx
@@ -1,15 +1,15 @@
-import React, { useState } from 'react'
-import './unSubscribe.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Button } from '@material-ui/core'
+import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
-import { Button } from '@material-ui/core'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
-import { updateProfile } from 'store/profile/profile.actions'
import { useHistory } from 'react-router-dom'
+import { updateProfile } from 'store/profile/profile.actions'
+import './unSubscribe.scss'
const UnSubscribe: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -30,7 +30,7 @@ const UnSubscribe: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_analysis'}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="unsubscribe-container">
<StyledIcon className="profile-icon" icon={BearIcon} size={250} />
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 49de9edb4eb2b6fcf59393070300cb5d8a53f9c8..88d58c2300888537e741dcf5dec2d40b8d5d4fee 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -1,12 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import 'components/ProfileType/profileTypeView.scss'
+import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import ProfileTypeFormSingleChoice from 'components/ProfileType/ProfileTypeFormSingleChoice'
import ProfileTypeFinished from 'components/ProfileType/ProfileTypeFinished'
+import ProfileTypeFormSingleChoice from 'components/ProfileType/ProfileTypeFormSingleChoice'
+import 'components/ProfileType/profileTypeView.scss'
+import React, { useCallback, useEffect, useState } from 'react'
-import { ProfileType, ProfileTypeAnswer } from 'models/profileType.model'
+import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
+import ProfileTypeFormMultiChoice from 'components/ProfileType/ProfileTypeFormMultiChoice'
+import ProfileTypeFormNumber from 'components/ProfileType/ProfileTypeFormNumber'
+import ProfileTypeFormNumberSelection from 'components/ProfileType/ProfileTypeFormNumberSelection'
+import { FluidType } from 'enum/fluid.enum'
import {
ConstructionYear,
Floor,
@@ -20,17 +24,13 @@ import {
ThreeChoicesAnswer,
WarmingType,
} from 'enum/profileType.enum'
-import { FluidType } from 'enum/fluid.enum'
-import ProfileTypeFormMultiChoice from 'components/ProfileType/ProfileTypeFormMultiChoice'
-import ProfileTypeFormNumber from 'components/ProfileType/ProfileTypeFormNumber'
-import ProfileTypeFormNumberSelection from 'components/ProfileType/ProfileTypeFormNumberSelection'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
import { DateTime } from 'luxon'
+import { ProfileEcogesture } from 'models/profileEcogesture.model'
+import { ProfileType, ProfileTypeAnswer } from 'models/profileType.model'
+import { useSelector } from 'react-redux'
import ProfileTypeFormService from 'services/profileTypeForm.service'
+import { AppStore } from 'store'
import ProfileTypeFormDateSelection from './ProfileTypeFormDateSelection'
-import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
-import { ProfileEcogesture } from 'models/profileEcogesture.model'
const ProfileTypeView: React.FC = () => {
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
@@ -219,7 +219,7 @@ const ProfileTypeView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_profiletype'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div className={'profile-type-container'}>
{isLoading ? null : step !== ProfileTypeStepForm.END ? (
diff --git a/src/components/Quiz/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion.spec.tsx
index 240eefd26fa0dfb0c99634056c194037aac92890..c18c3e175b34403e9863d9df17632dc0677942e5 100644
--- a/src/components/Quiz/QuizQuestion.spec.tsx
+++ b/src/components/Quiz/QuizQuestion.spec.tsx
@@ -39,10 +39,10 @@ jest.mock('services/quiz.service', () => {
})
jest.mock('components/Quiz/QuizCustomQuestionContent', () => () => (
- <div id="quizcustomquestioncontent"></div>
+ <div id="quizcustomquestioncontent" />
))
jest.mock('components/Quiz/QuizQuestionContent', () => () => (
- <div id="quizquestioncontent"></div>
+ <div id="quizquestioncontent" />
))
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx
index 6951043855f7e599cb80cf7b873b13d0019108b9..71388bcb52ad7636ecb3c6abc5495f0796aa87ff 100644
--- a/src/components/Quiz/QuizView.tsx
+++ b/src/components/Quiz/QuizView.tsx
@@ -40,7 +40,7 @@ const QuizView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_quiz'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
{currentChallenge && renderQuiz(currentChallenge)}
</Content>
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 53c526a4eeb671f210f8ed62ec53a7f393b6059b..7b8eabf85674bc4a7e93b2658c23f1b1f6c2604b 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -29,7 +29,7 @@ const SplashScreen: React.FC<SplashScreenProps> = ({
<div
className="splash-progress-bar-content"
style={{ width: `${getProgress()}%` }}
- ></div>
+ />
</div>
</div>
</div>
diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx
index 75e9b9ef5d97f8cde7d3b42e51f33c0d0297e5e7..62017f27e2c46c75bee2abcc64d42cf38768169d 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.tsx
@@ -105,12 +105,12 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
onClick={() => handleChangeTimeStep(step)}
id={TimeStep[step].toLowerCase()}
>
- <span className="clickable-area"></span>
+ <span className="clickable-area" />
<span className={'text text-14-normal'}>
{t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
</span>
</li>
- <li className="bar"></li>
+ <li className="bar" />
</React.Fragment>
)
})}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 736307b547aceaba765e53ebc63eac8aa189037b..112c7f1a2e1b202660868d6e8924fb7377bc7cf0 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,6 +1,7 @@
{
"common": {
"title_app": "Ecolyo",
+ "title_consumption": "Conso",
"title_challenge": "Défis",
"title_quiz": "Quiz",
"title_exploration": "Exploration",
@@ -19,6 +20,13 @@
"loading": "Chargement"
}
},
+ "navigation": {
+ "consumption": "Conso",
+ "challenges": "Défis",
+ "ecogestures": "Astuces",
+ "options": "Options",
+ "analysis": "Analyse"
+ },
"FLUID": {
"ELECTRICITY": {
"NAME": "Électricité",
@@ -885,13 +893,6 @@
"button_close": "Fermer la fenêtre"
}
},
- "navigation": {
- "consumption": "Conso",
- "challenges": "Défis",
- "ecogestures": "Astuces",
- "options": "Options",
- "analysis": "Analyse"
- },
"oauth": {
"window": {
"title": "OAuth"
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 977aa5666dd3e1b703ae9ea0b95e787f1fdb0988..63369debd4a3f418c3b063be15c330ce58711b52 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -45,76 +45,6 @@ body {
color: #32363f;
}
-.header {
- display: flex;
- align-items: center;
- flex-direction: column;
- overflow: hidden;
- width: 100%;
- z-index: $z-header;
- position: fixed;
- top: 48px;
- left: 0;
- @media #{$large-phone} {
- top: 0;
- }
- .header-top {
- background: radial-gradient(
- circle,
- rgba(52, 54, 65, 1) 0%,
- rgba(27, 28, 34, 1) 100%
- );
- width: 100%;
- .header-text {
- padding: 0 1rem 1rem 1rem;
- color: $grey-bright;
- }
- }
- .header-content {
- margin: 0 0 0 220px;
- display: flex;
- flex-direction: column;
- @media #{$tablet} {
- margin: 0;
- }
- @media #{$large-phone} {
- margin: 60px 0 0 0;
- }
- .header-content-top {
- display: flex;
- flex-direction: row;
- &.header-content-top-right {
- justify-content: flex-end;
- }
- .header-text {
- padding: 2rem 1rem;
- flex: 1;
- }
- .header-text-desktop {
- display: flex;
- flex: 1;
- padding: 2rem 1.25rem;
- color: $grey-bright;
- }
- .header-back-button {
- padding: 0 0.75rem;
- }
- @media #{$large-phone} {
- .header-text {
- padding: 0 1rem 1rem 1rem;
- color: $grey-bright;
- }
- .header-text-desktop {
- display: none;
- }
- .header-feedbacks-button {
- display: none;
- }
- }
- }
- }
-}
-
.content-view-loading {
height: 80vh;
width: 100%;