diff --git a/src/components/Action/ActionBegin.tsx b/src/components/Action/ActionBegin.tsx
index 546036e699ff8e1b973822b95b31a1655ffac714..f039432d32f51e9730e63b429b794135cfd00e86 100644
--- a/src/components/Action/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin.tsx
@@ -19,7 +19,7 @@ interface ActionBeginProps {
userChallenge: UserChallenge
}
-const ActionBegin: React.FC<ActionBeginProps> = ({
+const ActionBegin = ({
action,
setShowList,
userChallenge,
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index fa5299b089465c4cb35ce2093255b47ffceb2d62..9b491e035b0c55d4bd4a7484e9bf5fd38e5970ad 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -18,7 +18,7 @@ interface ActionCardProps {
setShowList: React.Dispatch<React.SetStateAction<boolean>>
}
-const ActionCard: React.FC<ActionCardProps> = ({
+const ActionCard = ({
action,
setSelectedAction,
setShowList,
diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx
index 98337ce197aa12cd3587f325904bbca779faa914..f33c2289a6d43ef99a6f1c57ff651daba269deb6 100644
--- a/src/components/Action/ActionChoose.tsx
+++ b/src/components/Action/ActionChoose.tsx
@@ -4,13 +4,7 @@ import { Ecogesture, UserChallenge } from 'models'
import React, { useState } from 'react'
import './actionChoose.scss'
-interface ActionChooseProps {
- userChallenge: UserChallenge
-}
-
-const ActionChoose: React.FC<ActionChooseProps> = ({
- userChallenge,
-}: ActionChooseProps) => {
+const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
const [showList, setShowList] = useState<boolean>(false)
diff --git a/src/components/Action/ActionDone.tsx b/src/components/Action/ActionDone.tsx
index c2f8db980f4339ca7c80a2a1a215c7a69e6c8248..099c9465febbb923f08efee022b1547078387524 100644
--- a/src/components/Action/ActionDone.tsx
+++ b/src/components/Action/ActionDone.tsx
@@ -15,13 +15,12 @@ import { AppActionsTypes } from 'store'
import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { toggleChallengeActionNotification } from 'store/global/global.actions'
import './actionDone.scss'
-interface ActionDoneProps {
- currentChallenge: UserChallenge
-}
-const ActionDone: React.FC<ActionDoneProps> = ({
+const ActionDone = ({
currentChallenge,
-}: ActionDoneProps) => {
+}: {
+ currentChallenge: UserChallenge
+}) => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Action/ActionList.tsx b/src/components/Action/ActionList.tsx
index 447ca9aee3975db6449a2c6cf59115a50531830e..b218dd7b11acd4343b427657b4f45b6673c2f996 100644
--- a/src/components/Action/ActionList.tsx
+++ b/src/components/Action/ActionList.tsx
@@ -12,10 +12,7 @@ interface ActionListProps {
setShowList: React.Dispatch<React.SetStateAction<boolean>>
}
-const ActionList: React.FC<ActionListProps> = ({
- setSelectedAction,
- setShowList,
-}: ActionListProps) => {
+const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
const client: Client = useClient()
const {
global: { fluidTypes },
diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index a74f9a6bc70ccbf807702c8ce3ee3af6ab62ded7..b58e54f40a0fe4dee367da8ab58d2bc9c89c38e2 100644
--- a/src/components/Action/ActionModal.tsx
+++ b/src/components/Action/ActionModal.tsx
@@ -20,7 +20,7 @@ interface ActionModalProps {
userChallenge: UserChallenge
}
-const ActionModal: React.FC<ActionModalProps> = ({
+const ActionModal = ({
open,
action,
handleCloseClick,
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index ac6d3701ba2c51cb70a7dbf66422be73dfb3ea57..28d7042995cbb41288b42d0db910c883b71bf685 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -8,13 +8,7 @@ import { UserAction } from 'models'
import React, { useCallback, useState } from 'react'
import './actionOnGoing.scss'
-interface ActionOnGoingProps {
- userAction: UserAction
-}
-
-const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
- userAction,
-}: ActionOnGoingProps) => {
+const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
const { t } = useI18n()
const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx
index d3c06417185e99ea2a032f11b604828879dfc5ce..03ecb1cb19bb7539d422dcb87bc06a55015e0884 100644
--- a/src/components/Action/ActionView.tsx
+++ b/src/components/Action/ActionView.tsx
@@ -10,7 +10,7 @@ import React, { useCallback, useState } from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
-const ActionView: React.FC = () => {
+const ActionView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const { currentChallenge } = useSelector(
(state: AppStore) => state.ecolyo.challenge
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index bdf63113e9116a0ffbf8ccbc8c243e107995b8ee..edbe23aff9805517d403fe947565cdc057bf09e5 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -32,7 +32,7 @@ interface AnalysisConsumptionProps {
analysisDate: DateTime
}
-const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
+const AnalysisConsumption = ({
aggregatedPerformanceIndicator,
performanceIndicators,
analysisDate,
diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx
index b92298babf4a7283514acf661d82cd55f886e46a..451ffab1b3c804f7d2a60ca3730a231cb4175761 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.tsx
@@ -20,7 +20,7 @@ interface AnalysisConsumptionRowProps {
noData: boolean
}
-const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
+const AnalysisConsumptionRow = ({
fluid,
userPriceConsumption,
homePriceConsumption,
diff --git a/src/components/Analysis/AnalysisErrorModal.tsx b/src/components/Analysis/AnalysisErrorModal.tsx
index 85f09505697773d606c7762294303c710ac2342c..0372cd591be4ab90f8e7b5e5461e701e22408190 100644
--- a/src/components/Analysis/AnalysisErrorModal.tsx
+++ b/src/components/Analysis/AnalysisErrorModal.tsx
@@ -1,75 +1,75 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import './analysisError.scss'
-
-const AnalysisErrorModal: React.FC = () => {
- const { t } = useI18n()
- const navigate = useNavigate()
- const goToConsumption = () => {
- navigate('/consumption')
- }
- const goBack = () => {
- if (history.length <= 2) {
- navigate('/consumption')
- } else navigate(-1)
- }
- return (
- <Dialog
- open={true}
- onClose={(event, reason): void => {
- event && reason !== 'backdropClick' && goBack()
- }}
- disableEscapeKeyDown
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('analysis_error_modal.accessibility.window_title')}
- </div>
- <div className="em-root analysis-error-container">
- <div className="em-content">
- <div className="analysis-error-title text-20-bold">
- {t('analysis_error_modal.title')}
- </div>
- <div className="analysis-error-message text-16-normal">
- {t('analysis_error_modal.message')}
- </div>
- <div className="analysis-error-button">
- <Button
- aria-label={t(
- 'analysis_error_modal.accessibility.button_go_back'
- )}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {t('analysis_error_modal.go_back')}
- </Button>
- <Button
- aria-label={t(
- 'analysis_error_modal.accessibility.button_goto_konnector'
- )}
- onClick={goToConsumption}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('analysis_error_modal.go_to_options')}
- </Button>
- </div>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default AnalysisErrorModal
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import './analysisError.scss'
+
+const AnalysisErrorModal = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const goToConsumption = () => {
+ navigate('/consumption')
+ }
+ const goBack = () => {
+ if (history.length <= 2) {
+ navigate('/consumption')
+ } else navigate(-1)
+ }
+ return (
+ <Dialog
+ open={true}
+ onClose={(event, reason): void => {
+ event && reason !== 'backdropClick' && goBack()
+ }}
+ disableEscapeKeyDown
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('analysis_error_modal.accessibility.window_title')}
+ </div>
+ <div className="em-root analysis-error-container">
+ <div className="em-content">
+ <div className="analysis-error-title text-20-bold">
+ {t('analysis_error_modal.title')}
+ </div>
+ <div className="analysis-error-message text-16-normal">
+ {t('analysis_error_modal.message')}
+ </div>
+ <div className="analysis-error-button">
+ <Button
+ aria-label={t(
+ 'analysis_error_modal.accessibility.button_go_back'
+ )}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-positive',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('analysis_error_modal.go_back')}
+ </Button>
+ <Button
+ aria-label={t(
+ 'analysis_error_modal.accessibility.button_goto_konnector'
+ )}
+ onClick={goToConsumption}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('analysis_error_modal.go_to_options')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default AnalysisErrorModal
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 110099f61ae6a1f5a64328e6e15d286ba815ebea..5891d7ba31f742fcce211b9e95ea93b62248c4fd 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -15,7 +15,7 @@ import { toggleAnalysisNotification } from 'store/global/global.actions'
import { updateProfile } from 'store/profile/profile.actions'
import './analysisView.scss'
-const AnalysisView: React.FC = () => {
+const AnalysisView = () => {
const client = useClient()
const [headerHeight, setHeaderHeight] = useState<number>(0)
const {
diff --git a/src/components/Analysis/ComparisonView.tsx b/src/components/Analysis/ComparisonView.tsx
index 17d80b45a620754979610383c629c6408ac5b059..64386b633f3fece7e59a461da48c9969926a1571 100644
--- a/src/components/Analysis/ComparisonView.tsx
+++ b/src/components/Analysis/ComparisonView.tsx
@@ -18,10 +18,7 @@ interface ComparisonViewProps {
fluidConfig: FluidConfig[]
}
-const ComparisonView: React.FC<ComparisonViewProps> = ({
- analysisDate,
- fluidConfig,
-}) => {
+const ComparisonView = ({ analysisDate, fluidConfig }: ComparisonViewProps) => {
const { t } = useI18n()
const client = useClient()
const {
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index f053445d7ba81e1aa62751773716f4faf97c4822..4232a6a7197da0b8be46fe36f7fbc094f6a345ff 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -29,9 +29,10 @@ interface ElecHalfHourMonthlyAnalysisProps {
perfIndicator: PerformanceIndicator
}
-const ElecHalfHourMonthlyAnalysis: React.FC<
- ElecHalfHourMonthlyAnalysisProps
-> = ({ analysisDate, perfIndicator }: ElecHalfHourMonthlyAnalysisProps) => {
+const ElecHalfHourMonthlyAnalysis = ({
+ analysisDate,
+ perfIndicator,
+}: ElecHalfHourMonthlyAnalysisProps) => {
const { t } = useI18n()
const client = useClient()
const [isWeekend, setIsWeekend] = useState<boolean>(true)
diff --git a/src/components/Analysis/ElecInfoModal.tsx b/src/components/Analysis/ElecInfoModal.tsx
index 5224c3346aa4564669fa58add021c5c9b5dcc125..97275ab60d837a21e36b4e91ca134a1d9fd39549 100644
--- a/src/components/Analysis/ElecInfoModal.tsx
+++ b/src/components/Analysis/ElecInfoModal.tsx
@@ -11,10 +11,7 @@ interface ElecInfoModalProps {
handleCloseClick: () => void
}
-const ElecInfoModal: React.FC<ElecInfoModalProps> = ({
- open,
- handleCloseClick,
-}: ElecInfoModalProps) => {
+const ElecInfoModal = ({ open, handleCloseClick }: ElecInfoModalProps) => {
const { t } = useI18n()
return (
diff --git a/src/components/Analysis/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard.tsx
index b8bb9c6deb9d1678a4f52033108c2c9736756ffc..af62ee1075a08809fca857dada9d155d0708a668 100644
--- a/src/components/Analysis/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard.tsx
@@ -19,13 +19,7 @@ import { getNavPicto } from 'utils/picto'
import { formatNumberValues } from 'utils/utils'
import './maxConsumptionCard.scss'
-interface MaxConsumptionCardProps {
- analysisDate: DateTime
-}
-
-const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
- analysisDate,
-}: MaxConsumptionCardProps) => {
+const MaxConsumptionCard = ({ analysisDate }: { analysisDate: DateTime }) => {
const { t } = useI18n()
const client = useClient()
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 0f5ef9a4c1b0f47acfecd8a0273dddce97ade3ec..ce883fbce6c11cb01f9c85283ab4c40ce68e6ee0 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -24,7 +24,7 @@ interface MonthlyAnalysisProps {
scrollPosition: number
}
-const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
+const MonthlyAnalysis = ({
analysisDate,
saveLastScrollPosition,
scrollPosition,
diff --git a/src/components/Analysis/PieChart.tsx b/src/components/Analysis/PieChart.tsx
index a33312c7354909625a4f2c14918bfbce26bd2295..3570646e748f7278521ac17bb9046ff189d97433 100644
--- a/src/components/Analysis/PieChart.tsx
+++ b/src/components/Analysis/PieChart.tsx
@@ -18,7 +18,7 @@ interface PieProps {
currentAnalysisDate: DateTime
}
-const PieChart: React.FC<PieProps> = ({
+const PieChart = ({
innerRadius,
outerRadius,
dataloadValueDetailArray,
diff --git a/src/components/Analysis/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart.tsx
index 238f2d338d1aab160603704dfa7121bc14a3dea9..62ab39c13938443d7271f1487195b04905ead9b7 100644
--- a/src/components/Analysis/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart.tsx
@@ -9,8 +9,8 @@ import React, { useEffect, useState } from 'react'
import ConsumptionDataManager from 'services/consumption.service'
import { getNavPicto } from 'utils/picto'
import { formatNumberValues } from 'utils/utils'
-import './analysisView.scss'
import PieChart from './PieChart'
+import './analysisView.scss'
import './totalAnalysisChart.scss'
interface TotalAnalysisChartProps {
@@ -18,7 +18,7 @@ interface TotalAnalysisChartProps {
fluidTypes: FluidType[]
}
-const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({
+const TotalAnalysisChart = ({
analysisDate,
fluidTypes,
}: TotalAnalysisChartProps) => {
diff --git a/src/components/Challenge/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard.tsx
index 5088f4347401fda2ebc7713f4d5ea43cf60ea5c3..a6788d190ade10f3defc8b7bbe3f389b94aa2b2c 100644
--- a/src/components/Challenge/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard.tsx
@@ -1,12 +1,12 @@
import { UserChallengeState } from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'
import React from 'react'
-import './challengeCard.scss'
import ChallengeCardDone from './ChallengeCardDone'
import ChallengeCardLast from './ChallengeCardLast'
import ChallengeCardLocked from './ChallengeCardLocked'
import ChallengeCardOnGoing from './ChallengeCardOnGoing'
import ChallengeCardUnlocked from './ChallengeCardUnlocked'
+import './challengeCard.scss'
interface ChallengeCardProps {
userChallenge?: UserChallenge
@@ -18,7 +18,7 @@ interface ChallengeCardProps {
moveToSlide: (slideIndex: number) => void
}
-const ChallengeCard: React.FC<ChallengeCardProps> = ({
+const ChallengeCard = ({
userChallenge,
indexSlider,
index,
diff --git a/src/components/Challenge/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone.tsx
index 969e55c0f4c78fe10974e4245c85ce74cdaa9a44..9430da1fbfba471072a8763eb91278819e8d9315 100644
--- a/src/components/Challenge/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone.tsx
@@ -14,13 +14,11 @@ import {
} from 'utils/utils'
import './challengeCardDone.scss'
-interface ChallengeCardDoneProps {
- userChallenge: UserChallenge
-}
-
-const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
+const ChallengeCardDone = ({
userChallenge,
-}: ChallengeCardDoneProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const { t } = useI18n()
const navigate = useNavigate()
const [winIcon, setWinIcon] = useState<string>(defaultIcon)
diff --git a/src/components/Challenge/ChallengeCardLast.tsx b/src/components/Challenge/ChallengeCardLast.tsx
index 252ad7ec0eb7aa76703eab79af70e9b1d6287923..c811000446f86b208f252d79a020f4f2ce764516 100644
--- a/src/components/Challenge/ChallengeCardLast.tsx
+++ b/src/components/Challenge/ChallengeCardLast.tsx
@@ -8,7 +8,7 @@ import './challengeCardLast.scss'
declare let __SAU_IDEA_DIRECT_LINK__: string
-const ChallengeCardLast: React.FC = () => {
+const ChallengeCardLast = () => {
const { t } = useI18n()
const client = useClient()
diff --git a/src/components/Challenge/ChallengeCardLocked.tsx b/src/components/Challenge/ChallengeCardLocked.tsx
index 6624aae9e1b3ff4bdb2380b052ab94320ec88208..9d8a5d5ca9960e4d87f2c182b1d509527283a359 100644
--- a/src/components/Challenge/ChallengeCardLocked.tsx
+++ b/src/components/Challenge/ChallengeCardLocked.tsx
@@ -6,12 +6,11 @@ import React from 'react'
import { getChallengeTitleWithLineReturn } from 'utils/utils'
import './challengeCardLocked.scss'
-interface ChallengeCardLockedProps {
- userChallenge: UserChallenge
-}
-const ChallengeCardLocked: React.FC<ChallengeCardLockedProps> = ({
+const ChallengeCardLocked = ({
userChallenge,
-}: ChallengeCardLockedProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const { t } = useI18n()
return (
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 92094c9f35e53795ac7a860c5261f68d8372c351..54eeab6a7d2bceb6d7d9874a3d591ad045c40ba4 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -27,12 +27,11 @@ import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import StarsContainer from './StarsContainer'
import './challengeCardOnGoing.scss'
-interface ChallengeCardOnGoingProps {
- userChallenge: UserChallenge
-}
-const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
+const ChallengeCardOnGoing = ({
userChallenge,
-}: ChallengeCardOnGoingProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx
index b5f8912cdeb5aba3fa99720866f61851ad00e08c..7d65fbab8ad380eee976e14b2135261760da04d4 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.tsx
@@ -16,12 +16,11 @@ import { getChallengeTitleWithLineReturn, importIconById } from 'utils/utils'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import './challengeCardUnlocked.scss'
-interface ChallengeCardUnlockedProps {
- userChallenge: UserChallenge
-}
-const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
+const ChallengeCardUnlocked = ({
userChallenge,
-}: ChallengeCardUnlockedProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const client: Client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { t } = useI18n()
diff --git a/src/components/Challenge/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal.tsx
index 9d9c0e9fc72aab0f6b80e2bb9a055fe3e1aa98ad..46d0057675c15f5364de798f37f15ec6d2183ca4 100644
--- a/src/components/Challenge/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal.tsx
@@ -9,7 +9,7 @@ interface ChallengeNoFluidModalProps {
handleCloseClick: () => void
}
-const ChallengeNoFluidModal: React.FC<ChallengeNoFluidModalProps> = ({
+const ChallengeNoFluidModal = ({
open,
handleCloseClick,
}: ChallengeNoFluidModalProps) => {
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 929a63f11206f57b9b0449af5e8c163076dc39ff..95f526de73d4673de4b050e9e3567ca74837688f 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -13,7 +13,7 @@ import { AppStore } from 'store'
import ChallengeCard from './ChallengeCard'
import './challengeView.scss'
-const ChallengeView: React.FC = () => {
+const ChallengeView = () => {
const { t } = useI18n()
const { userChallengeList } = useSelector(
(state: AppStore) => state.ecolyo.challenge
diff --git a/src/components/Challenge/StarsContainer.tsx b/src/components/Challenge/StarsContainer.tsx
index ab6c67731bbecc39571a18fb5951ae42235487f9..c1a32c5e3d1ca80abf8089b37f71dc387138ced7 100644
--- a/src/components/Challenge/StarsContainer.tsx
+++ b/src/components/Challenge/StarsContainer.tsx
@@ -8,10 +8,7 @@ interface StarsContainerProps {
isQuizBegin?: boolean
}
-const StarsContainer: React.FC<StarsContainerProps> = ({
- result,
- isQuizBegin,
-}: StarsContainerProps) => {
+const StarsContainer = ({ result, isQuizBegin }: StarsContainerProps) => {
const maxStars = [1, 2, 3, 4, 5]
return (
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index a34c45c90762665f3b0dfa789ec891e81784a938..0fcdc71c016200d196c21ee80a8b32b7f117327e 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -130,7 +130,7 @@ interface AxisBottomProps {
isDuel?: boolean
}
-const AxisBottom: React.FC<AxisBottomProps> = ({
+const AxisBottom = ({
data,
timeStep,
xScale,
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index fd77f84d2db67e756088394c51f0ed4dfc4faab5..487e359f0dbad3e9b2713e71a2a39001be90347a 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -24,7 +24,7 @@ export interface BarChartProps {
isSwitching: boolean
}
-const BarChart: React.FC<BarChartProps> = ({
+const BarChart = ({
chartData,
fluidType,
timeStep,
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
index 4142f1c9b176ea4a6d53e5778e630ffef5382530..69136c0867bc9beab069d7499a636c7e74920492 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
@@ -14,10 +14,7 @@ interface ErrorPageProps {
returnPage: string
}
-const ErrorPage: React.FC<ErrorPageProps> = ({
- text,
- returnPage,
-}: ErrorPageProps) => {
+const ErrorPage = ({ text, returnPage }: ErrorPageProps) => {
const navigate = useNavigate()
const { t } = useI18n()
diff --git a/src/components/CommonKit/Icon/StyledIcon.tsx b/src/components/CommonKit/Icon/StyledIcon.tsx
index bbf01cc5803f126ba7b5a72e8764c34cdc961d64..d555270c0ca2f6ee2283e07f741a8788927edcad 100644
--- a/src/components/CommonKit/Icon/StyledIcon.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.tsx
@@ -10,7 +10,7 @@ interface StyledIconProps {
title?: string
}
-const StyledIcon: React.FC<StyledIconProps> = ({
+const StyledIcon = ({
icon,
ariaHidden = true,
size = 16,
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
index 761d01d449469faa7f29240f6d60359af9235dc2..1b0c69df57541d11185e0993e65a7124e0dd2ea9 100644
--- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
@@ -37,7 +37,7 @@ interface StyledIconBorderedButtonProps extends IconButtonProps {
children?: React.ReactNode
}
-const StyledIconBorderedButton: React.FC<StyledIconBorderedButtonProps> = ({
+const StyledIconBorderedButton = ({
icon,
sized = 16,
selected = false,
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.tsx b/src/components/CommonKit/IconButton/StyledIconButton.tsx
index 03e1b990581d3dfb13417329d5ee72d2e62c1020..b71760b5d51353f9fa129037822d0efb0fca476d 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.tsx
@@ -14,7 +14,7 @@ interface StyledIconButtonProps extends IconButtonProps {
sized?: number
}
-const StyledIconButton: React.FC<StyledIconButtonProps> = ({
+const StyledIconButton = ({
icon,
sized = 16,
...props
diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx
index a6913571dd19f9c54cb5ac54262b82a9600a6ce5..3e0aedc0f10ce68b2ec0df6c396c7be7b5f58bc8 100644
--- a/src/components/Connection/Connection.tsx
+++ b/src/components/Connection/Connection.tsx
@@ -8,13 +8,8 @@ import EpglInit from './EPGLConnect/EpglInit'
import GrdfInit from './GRDFConnect/GrdfInit'
import SgeInit from './SGEConnect/SgeInit'
import './connection.scss'
-interface ConnectionProps {
- fluidStatus: FluidStatus
-}
-const Connection: React.FC<ConnectionProps> = ({
- fluidStatus,
-}: ConnectionProps) => {
+const Connection = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const handleSuccess = useCallback(async () => {
diff --git a/src/components/Connection/ConnectionNotFound.tsx b/src/components/Connection/ConnectionNotFound.tsx
index e80bda11abbfde9f76b0601add74a3fa713cb757..360ad1a8d9c8118bc209a58774d20c04ef3c4d98 100644
--- a/src/components/Connection/ConnectionNotFound.tsx
+++ b/src/components/Connection/ConnectionNotFound.tsx
@@ -1,40 +1,35 @@
-import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import './connectionNotFound.scss'
-interface ConnectionNotFoundProps {
- konnectorSlug: string
-}
-
-const ConnectionNotFound: React.FC<ConnectionNotFoundProps> = ({
- konnectorSlug,
-}: ConnectionNotFoundProps) => {
- const { t } = useI18n()
-
- const openKonnectorURL = () => {
- // TODO - Use getstoreinstallationurl from client - https://docs.cozy.io/en/cozy-client/api/cozy-client/#getstoreinstallationurl-string
- const hostname = window.location.origin.replace('ecolyo', 'store')
- const url = hostname + '/#/discover/' + konnectorSlug
- window.open(url, '_blank')
- }
-
- return (
- <div className="knotfound">
- <div className="knotfound-text"> {t('konnector_form.not_installed')}</div>
- <div className="knotfound-button">
- <Button
- aria-label={t('konnector_form.accessibility.button_install')}
- onClick={openKonnectorURL}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('konnector_form.button_install')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default ConnectionNotFound
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import './connectionNotFound.scss'
+
+const ConnectionNotFound = ({ konnectorSlug }: { konnectorSlug: string }) => {
+ const { t } = useI18n()
+
+ const openKonnectorURL = () => {
+ // TODO - Use getstoreinstallationurl from client - https://docs.cozy.io/en/cozy-client/api/cozy-client/#getstoreinstallationurl-string
+ const hostname = window.location.origin.replace('ecolyo', 'store')
+ const url = hostname + '/#/discover/' + konnectorSlug
+ window.open(url, '_blank')
+ }
+
+ return (
+ <div className="knotfound">
+ <div className="knotfound-text"> {t('konnector_form.not_installed')}</div>
+ <div className="knotfound-button">
+ <Button
+ aria-label={t('konnector_form.accessibility.button_install')}
+ onClick={openKonnectorURL}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('konnector_form.button_install')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default ConnectionNotFound
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index 31201f2f77350723a1515d99ca7825c02da392b1..27263a062697e937d31d5184a94fea4e0d43825d 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -35,7 +35,7 @@ interface ConnectionResultProps {
fluidType: FluidType
}
-const ConnectionResult: React.FC<ConnectionResultProps> = ({
+const ConnectionResult = ({
fluidStatus,
handleAccountDeletion,
fluidType,
diff --git a/src/components/Connection/DeleteGRDFAccountModal.tsx b/src/components/Connection/DeleteGRDFAccountModal.tsx
index 6ec568182479006ce2b0692051151abcf923e5d2..d2464efca8c40d70a2b41a90fc34348c995a8e33 100644
--- a/src/components/Connection/DeleteGRDFAccountModal.tsx
+++ b/src/components/Connection/DeleteGRDFAccountModal.tsx
@@ -13,7 +13,7 @@ interface DeleteGRDFAccountModalProps {
deleteAccount: () => void
}
-const DeleteGRDFAccountModal: React.FC<DeleteGRDFAccountModalProps> = ({
+const DeleteGRDFAccountModal = ({
open,
handleCloseClick,
deleteAccount,
diff --git a/src/components/Connection/EPGLConnect/EpglInit.tsx b/src/components/Connection/EPGLConnect/EpglInit.tsx
index fff3a0881e367b37aad05e81927a2e447e72b936..be04c95c0c4aaad34b39624357d7a7b71942480c 100644
--- a/src/components/Connection/EPGLConnect/EpglInit.tsx
+++ b/src/components/Connection/EPGLConnect/EpglInit.tsx
@@ -8,11 +8,7 @@ import '../connection.scss'
import EpglBill from './EpglBill'
import EpglForm from './EpglForm'
-interface EpglInitProps {
- fluidStatus: FluidStatus
-}
-
-const EpglInit: React.FC<EpglInitProps> = ({ fluidStatus }: EpglInitProps) => {
+const EpglInit = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const {
modal: { isConnectionModalOpen },
diff --git a/src/components/Connection/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal.tsx
index 6a6dcc5c5d784090b3e7a4a92f2830fdd6c7798e..c9eec3a1cf092aa1708d862fb4a370518b88a104 100644
--- a/src/components/Connection/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal.tsx
@@ -24,7 +24,7 @@ interface ExpiredConsentModalProps {
toggleModal: () => void
}
-const ExpiredConsentModal: React.FC<ExpiredConsentModalProps> = ({
+const ExpiredConsentModal = ({
open,
handleCloseClick,
fluidType,
diff --git a/src/components/Connection/FormLogin.tsx b/src/components/Connection/FormLogin.tsx
index 68434000785ce984f0c2e2c1fc499c531ba4dd6f..e3c88579cf078e8d94dffb5e154617be6309c1ac 100644
--- a/src/components/Connection/FormLogin.tsx
+++ b/src/components/Connection/FormLogin.tsx
@@ -11,13 +11,7 @@ import React, { useEffect, useState } from 'react'
import { getPartnerPicto } from 'utils/picto'
import './formLogin.scss'
-interface FormLoginProps {
- fluidStatus: FluidStatus
-}
-
-const FormLogin: React.FC<FormLoginProps> = ({
- fluidStatus,
-}: FormLoginProps) => {
+const FormLogin = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const { t } = useI18n()
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
const lastKnownCredentials: string | undefined =
diff --git a/src/components/Connection/FormOAuth.tsx b/src/components/Connection/FormOAuth.tsx
index af38519e33e05d339147c3ac45297089af4ccae1..736bd4ab02b1ac37523fa4b95ed769afae25ea14 100644
--- a/src/components/Connection/FormOAuth.tsx
+++ b/src/components/Connection/FormOAuth.tsx
@@ -16,11 +16,7 @@ interface FormOAuthProps {
fluidStatus: FluidStatus
}
-const FormOAuth: React.FC<FormOAuthProps> = ({
- konnector,
- onSuccess,
- fluidStatus,
-}: FormOAuthProps) => {
+const FormOAuth = ({ konnector, onSuccess, fluidStatus }: FormOAuthProps) => {
const IDLE = 'idle'
const WAITING = 'waiting'
diff --git a/src/components/Connection/GRDFConnect/GrdfInit.tsx b/src/components/Connection/GRDFConnect/GrdfInit.tsx
index 27df3d8ff9451fef90d02beeda55daeb0a39efe5..d47625171b37b485ac722f1e80bfdb00734d81f0 100644
--- a/src/components/Connection/GRDFConnect/GrdfInit.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfInit.tsx
@@ -19,10 +19,7 @@ interface GrdfInitProps {
onSuccess: () => Promise<void>
}
-const GrdfInit: React.FC<GrdfInitProps> = ({
- fluidStatus,
- onSuccess,
-}: GrdfInitProps) => {
+const GrdfInit = ({ fluidStatus, onSuccess }: GrdfInitProps) => {
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const {
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
index 8987d385c865af7aaaa7ade64e1c2f8938628e02..2442a5f028eedcb7d50f775c3f0e900789192002 100644
--- a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
@@ -21,13 +21,13 @@ interface EpglConnectModalProps {
setHasCreatedAccount: (value: boolean) => void
}
-const EpglConnectModal: React.FC<EpglConnectModalProps> = ({
+const EpglConnectModal = ({
open,
handleCloseClick,
setShowForm,
goToPartnerSite,
setHasCreatedAccount,
-}) => {
+}: EpglConnectModalProps) => {
const { t } = useI18n()
const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
useEffect(() => {
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
index 75edfed2927fa920fd322d8ad45fd5673d708f78..871172766e322945ed6fc05f0f6b36b2c9c7a249 100644
--- a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
@@ -28,7 +28,7 @@ interface GrdfConnectModalProps {
handleSuccess: (accountId: string) => Promise<void>
}
-const GrdfConnectModal: React.FC<GrdfConnectModalProps> = ({
+const GrdfConnectModal = ({
open,
showForm,
konnector,
@@ -37,7 +37,7 @@ const GrdfConnectModal: React.FC<GrdfConnectModalProps> = ({
setShowForm,
goToPartnerSite,
handleSuccess,
-}) => {
+}: GrdfConnectModalProps) => {
const { t } = useI18n()
const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
useEffect(() => {
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
index 1c709db2d8177f798fbd395ec114717dc744c960..7c362975af1fda45504b97594457f8946271681c 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const EpglCreateAccount: React.FC = () => {
+const EpglCreateAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
index 272d36ea7d8d129d932cd907a5590484de9005c7..db1e1a186bee9c727d05fff097b1c3a8d844794b 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const EpglDoYouHaveAccount: React.FC = () => {
+const EpglDoYouHaveAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
index 0a5e93611cde27be2c5082c1047ec4d4f72cc3e9..1751a430928764263e04c595b5e4944a15c48f8d 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const GrdfCreateAccount: React.FC = () => {
+const GrdfCreateAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
index eaddd5946cb8261221caff35065ab241c0b0ac42..680d15184fc472155fee743138f14edf90a1fc9c 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const GrdfDoYouHaveAccount: React.FC = () => {
+const GrdfDoYouHaveAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
index 5b5c567b8357ef58fe4845a7c923804a94986a45..79e5bcbc547c74f55440b5bce613390307bb6569 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const GrdfGiveConsent: React.FC = () => {
+const GrdfGiveConsent = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index fbde3f636945b73f067a423f7da8551ab78f0525..c2e0c11cb5e007a0bc673c5de238a245bd71e110 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -24,7 +24,7 @@ export type SGEKeysForm =
| 'dataConsent'
| 'pdlConfirm'
-const SgeConnectView: React.FC = () => {
+const SgeConnectView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const { sgeConnect } = useSelector((state: AppStore) => state.ecolyo.global)
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index 72dfc6f37a88df669799160ea61406135a368369..530045358d0eb2b7be18a649e5640dfb10e0ca61 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -14,11 +14,8 @@ import {
updateSgeStore,
} from 'store/global/global.actions'
import { decoreText } from 'utils/decoreText'
-interface SgeInitProps {
- fluidStatus: FluidStatus
-}
-const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => {
+const SgeInit = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const { t } = useI18n()
const navigate = useNavigate()
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 43827c813e6faa9944ff53e94a7d078c5d266649..2e5b34872fe7d16cded12d1415244ab538a41a35 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -13,10 +13,7 @@ interface SgeModalHintProps {
handleCloseClick: () => void
}
-const SgeModalHint: React.FC<SgeModalHintProps> = ({
- open,
- handleCloseClick,
-}: SgeModalHintProps) => {
+const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index 73a405da655d1dd4033ad04e7ff0c9bb75a73518..8fe99e04d6d963fcec29b65ff2778f2132375ccc 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -8,10 +8,7 @@ interface StepAddressProps {
onChange: (key: SGEKeysForm, value: string, maxLength?: number) => void
}
-const StepAddress: React.FC<StepAddressProps> = ({
- sgeState,
- onChange,
-}: StepAddressProps) => {
+const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
const { t } = useI18n()
return (
<div className="sge-step-container stepAddress">
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index f3e6bbac2049c0683ad1d1515c860b2f6a262b63..4997b3b812d2664f6dd04c3eea2e141229dc9159 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -9,10 +9,12 @@ interface StepConsentProps {
sgeState: SgeStore
onChange: (key: SGEKeysForm, value: boolean) => void
}
-const StepConsent: React.FC<StepConsentProps> = ({
- sgeState,
- onChange,
-}: StepConsentProps) => {
+const StepConsent = (
+ {
+ sgeState,
+ onChange
+ }: StepConsentProps
+) => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index eebeb80f914f49dc01c5055fe3ab19c8c4bdedbf..0012020f79887df5097ba64806d96f8ee7b12c0a 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -13,7 +13,7 @@ interface StepIdentityAndPdlProps {
) => void
}
-const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
+const StepIdentityAndPdl = ({
sgeState,
onChange,
}: StepIdentityAndPdlProps) => {
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index 03921d3db74467b78d419513b42ccc67b9fdf903..d497f4279740b55cac3eb60cc1527c10f54b5aca 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -12,7 +12,7 @@ interface ConsumptionVisualizerProps {
fluidType: FluidType
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
+const ConsumptionVisualizer = ({
fluidType,
setActive,
}: ConsumptionVisualizerProps) => {
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index 04b194750ea7bf4b55ff0e79a04837c4f166ba35..65aee657bcf1604731a8530053e77a10a8264841 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -12,7 +12,7 @@ interface DataloadNoValueProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
+const DataloadNoValue = ({
dataload,
fluidType,
setActive,
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index 3132d25dad4af730f36e8a1f946cd529eec3d43d..cbc2ca57e9fbd79f0726a93bded7145485ddd84e 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -4,9 +4,9 @@ import { DataloadSectionType } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
import React from 'react'
-import './consumptionVisualizer.scss'
import DataloadSectionDetail from './DataloadSectionDetail'
import DataloadSectionValue from './DataloadSectionValue'
+import './consumptionVisualizer.scss'
interface DataloadSectionProps {
dataload: Dataload
@@ -14,7 +14,7 @@ interface DataloadSectionProps {
dataloadSectionType: DataloadSectionType
toggleEstimationModal: () => void
}
-const DataloadSection: React.FC<DataloadSectionProps> = ({
+const DataloadSection = ({
dataload,
fluidType,
dataloadSectionType,
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index 267b981cdb1122fc7cce0a735602bd43da9de3e8..94a30953d04311e1a8ba23824bd07a3d2b718e28 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -16,7 +16,7 @@ interface EstimatedConsumptionModalProps {
handleCloseClick: () => void
}
-const EstimatedConsumptionModal: React.FC<EstimatedConsumptionModalProps> = ({
+const EstimatedConsumptionModal = ({
open,
handleCloseClick,
}: EstimatedConsumptionModalProps) => {
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index 11c362381192ab392d009f238999a7dd2609e3c6..98112d8f7eaa8dddd35673abbf820fe22e08b618 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -12,10 +12,7 @@ interface NoDataModalProps {
handleCloseClick: () => void
}
-const NoDataModal: React.FC<NoDataModalProps> = ({
- open,
- handleCloseClick,
-}: NoDataModalProps) => {
+const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
const { t } = useI18n()
return (
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 10cf6a7cd8270383fffdcd384df4cb9bfc41ee03..d1b1a370d08d87c057b7385d3b739b12bcbef122 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -12,7 +12,7 @@ interface ContentProps {
background?: string
}
-const Content: React.FC<ContentProps> = ({
+const Content = ({
children,
height = 0,
background = 'inherit',
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 333a703cfce737c1fa7496782ce1f960fc48d0fa..f3e5fb338bd45502119dbd5719abb86d145756e0 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -16,10 +16,10 @@ interface CustomPopupModalProps {
handleCloseClick: () => void
}
-const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
+const CustomPopupModal = ({
customPopup,
handleCloseClick,
-}) => {
+}: CustomPopupModalProps) => {
const { t } = useI18n()
const isPopupOutdated = () =>
DateTime.local() >= DateTime.fromISO(customPopup.endDate)
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index ba0054f21db61154cfa79c8a3a9f10763f1173ee..6dc00f9d949df7556a02d4422038782c9374ab40 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -23,7 +23,7 @@ interface DateNavigatorProps {
inlineDateDisplay?: boolean
}
-const DateNavigator: React.FC<DateNavigatorProps> = ({
+const DateNavigator = ({
currentAnalysisDate,
setCurrentAnalysisDate,
inlineDateDisplay = false,
diff --git a/src/components/DateNavigator/DateNavigatorFormat.tsx b/src/components/DateNavigator/DateNavigatorFormat.tsx
index 7b206615476ff2c9e875f46682907f09900026ad..d3052d2440d42674c8bb84d45a0156a99bdaed02 100644
--- a/src/components/DateNavigator/DateNavigatorFormat.tsx
+++ b/src/components/DateNavigator/DateNavigatorFormat.tsx
@@ -9,7 +9,7 @@ interface DateNavigatorFormatProps {
inline: boolean
}
-const DateNavigatorFormat: React.FC<DateNavigatorFormatProps> = ({
+const DateNavigatorFormat = ({
timeStep,
date,
inline,
diff --git a/src/components/Duel/DuelBar.tsx b/src/components/Duel/DuelBar.tsx
index 89b8805d1a7d6cf7bca1c9df812dcd5a3984a65c..99cfce82752506906ef1cd3b18b888763c52a89c 100644
--- a/src/components/Duel/DuelBar.tsx
+++ b/src/components/Duel/DuelBar.tsx
@@ -1,158 +1,158 @@
-import AxisBottom from 'components/Charts/AxisBottom'
-import AxisRight from 'components/Charts/AxisRight'
-import Bar from 'components/Charts/Bar'
-import UncomingBar from 'components/Charts/UncomingBar'
-import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
-import { Dataload, UserChallenge } from 'models'
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-
-export interface BarChartProps {
- userChallenge: UserChallenge
- finishedDataLoad?: Dataload[]
- average: number
- timeStep: TimeStep
- width?: number
- height?: number
- marginLeft?: number
- marginRight?: number
- marginTop?: number
- marginBottom?: number
-}
-
-const DuelBar: React.FC<BarChartProps> = ({
- userChallenge,
- finishedDataLoad,
- timeStep,
- average,
- width = 600,
- height = 400,
- marginLeft = 10,
- marginRight = 50,
- marginTop = 20,
- marginBottom = 50,
-}) => {
- const { currentDataload } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
- const dataload: Dataload[] = finishedDataLoad
- ? finishedDataLoad
- : currentDataload
- const getContentWidth = () => {
- return width - marginLeft - marginRight
- }
-
- const getContentHeight = () => {
- return height - marginTop - marginBottom
- }
-
- const getMaxLoad = () => {
- return dataload ? Math.max(...dataload.map((d: Dataload) => d.value)) : 0
- }
-
- const xScale: ScaleBand<string> = scaleBand()
- .domain(
- dataload.map((d: Dataload) =>
- d.date.toLocaleString(DateTime.DATETIME_SHORT)
- )
- )
- .range([0, getContentWidth()])
- .padding(0.2)
-
- const yScale: ScaleLinear<number, number> = scaleLinear()
- .domain([0, getMaxLoad() > average ? getMaxLoad() : average * 2])
- .range([getContentHeight(), 0])
-
- const isUpcoming = (dataload: Dataload): boolean => {
- let completedValueDetail = true
- if (dataload.valueDetail) {
- dataload.valueDetail.forEach(value => {
- if (!value) completedValueDetail = false
- })
- }
- if (!dataload.valueDetail || !completedValueDetail) {
- const dateDiff = DateTime.local()
- .setZone('utc', { keepLocalTime: true })
- .diff(dataload.date, 'days')
- .toObject()
- if (
- dateDiff.days !== undefined &&
- userChallenge !== undefined &&
- 0 < dateDiff.days
- ) {
- return true
- }
- }
- return false
- }
-
- return (
- <svg width={width} height={height}>
- <AxisRight
- fluidType={FluidType.MULTIFLUID}
- yScale={yScale}
- width={width}
- marginRight={marginRight - 10}
- marginTop={marginTop}
- />
- <g transform={`translate(${marginLeft},${marginTop})`}>
- {dataload.map((d: Dataload, index: number) => {
- if (!isUpcoming(d)) {
- return (
- <Bar
- key={index}
- index={index}
- dataload={d}
- compareDataload={null}
- fluidType={FluidType.MULTIFLUID}
- timeStep={timeStep}
- compare={false}
- xScale={xScale}
- yScale={yScale}
- height={getContentHeight()}
- isSwitching={false}
- isDuel={true}
- />
- )
- } else {
- return (
- <UncomingBar
- key={index}
- index={index}
- dataload={d}
- xScale={xScale}
- yScale={yScale}
- height={getContentHeight()}
- average={average / 2}
- />
- )
- }
- })}
- <line
- transform={`translate(0, ${yScale(average)})`}
- strokeDasharray="10"
- x1="0"
- y1={`0`}
- x2={width - marginRight}
- y2={`0`}
- className="bar-average"
- />
- </g>
- <AxisBottom
- data={dataload}
- timeStep={timeStep}
- xScale={xScale}
- height={height}
- marginLeft={marginLeft}
- marginBottom={marginBottom}
- isDuel={true}
- />
- </svg>
- )
-}
-
-export default DuelBar
+import AxisBottom from 'components/Charts/AxisBottom'
+import AxisRight from 'components/Charts/AxisRight'
+import Bar from 'components/Charts/Bar'
+import UncomingBar from 'components/Charts/UncomingBar'
+import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
+import { Dataload, UserChallenge } from 'models'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+
+export interface BarChartProps {
+ userChallenge: UserChallenge
+ finishedDataLoad?: Dataload[]
+ average: number
+ timeStep: TimeStep
+ width?: number
+ height?: number
+ marginLeft?: number
+ marginRight?: number
+ marginTop?: number
+ marginBottom?: number
+}
+
+const DuelBar = ({
+ userChallenge,
+ finishedDataLoad,
+ timeStep,
+ average,
+ width = 600,
+ height = 400,
+ marginLeft = 10,
+ marginRight = 50,
+ marginTop = 20,
+ marginBottom = 50,
+}: BarChartProps) => {
+ const { currentDataload } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const dataload: Dataload[] = finishedDataLoad
+ ? finishedDataLoad
+ : currentDataload
+ const getContentWidth = () => {
+ return width - marginLeft - marginRight
+ }
+
+ const getContentHeight = () => {
+ return height - marginTop - marginBottom
+ }
+
+ const getMaxLoad = () => {
+ return dataload ? Math.max(...dataload.map((d: Dataload) => d.value)) : 0
+ }
+
+ const xScale: ScaleBand<string> = scaleBand()
+ .domain(
+ dataload.map((d: Dataload) =>
+ d.date.toLocaleString(DateTime.DATETIME_SHORT)
+ )
+ )
+ .range([0, getContentWidth()])
+ .padding(0.2)
+
+ const yScale: ScaleLinear<number, number> = scaleLinear()
+ .domain([0, getMaxLoad() > average ? getMaxLoad() : average * 2])
+ .range([getContentHeight(), 0])
+
+ const isUpcoming = (dataload: Dataload): boolean => {
+ let completedValueDetail = true
+ if (dataload.valueDetail) {
+ dataload.valueDetail.forEach(value => {
+ if (!value) completedValueDetail = false
+ })
+ }
+ if (!dataload.valueDetail || !completedValueDetail) {
+ const dateDiff = DateTime.local()
+ .setZone('utc', { keepLocalTime: true })
+ .diff(dataload.date, 'days')
+ .toObject()
+ if (
+ dateDiff.days !== undefined &&
+ userChallenge !== undefined &&
+ 0 < dateDiff.days
+ ) {
+ return true
+ }
+ }
+ return false
+ }
+
+ return (
+ <svg width={width} height={height}>
+ <AxisRight
+ fluidType={FluidType.MULTIFLUID}
+ yScale={yScale}
+ width={width}
+ marginRight={marginRight - 10}
+ marginTop={marginTop}
+ />
+ <g transform={`translate(${marginLeft},${marginTop})`}>
+ {dataload.map((d: Dataload, index: number) => {
+ if (!isUpcoming(d)) {
+ return (
+ <Bar
+ key={index}
+ index={index}
+ dataload={d}
+ compareDataload={null}
+ fluidType={FluidType.MULTIFLUID}
+ timeStep={timeStep}
+ compare={false}
+ xScale={xScale}
+ yScale={yScale}
+ height={getContentHeight()}
+ isSwitching={false}
+ isDuel={true}
+ />
+ )
+ } else {
+ return (
+ <UncomingBar
+ key={index}
+ index={index}
+ dataload={d}
+ xScale={xScale}
+ yScale={yScale}
+ height={getContentHeight()}
+ average={average / 2}
+ />
+ )
+ }
+ })}
+ <line
+ transform={`translate(0, ${yScale(average)})`}
+ strokeDasharray="10"
+ x1="0"
+ y1={`0`}
+ x2={width - marginRight}
+ y2={`0`}
+ className="bar-average"
+ />
+ </g>
+ <AxisBottom
+ data={dataload}
+ timeStep={timeStep}
+ xScale={xScale}
+ height={height}
+ marginLeft={marginLeft}
+ marginBottom={marginBottom}
+ isDuel={true}
+ />
+ </svg>
+ )
+}
+
+export default DuelBar
diff --git a/src/components/Duel/DuelChart.tsx b/src/components/Duel/DuelChart.tsx
index eaa8d67195fbdaaea588bac2d525d34ba9d721a0..5e3b76882bc691117a73baf1e81ded9a923fb68e 100644
--- a/src/components/Duel/DuelChart.tsx
+++ b/src/components/Duel/DuelChart.tsx
@@ -11,7 +11,7 @@ interface DuelChartProps {
height: number
}
-const DuelChart: React.FC<DuelChartProps> = ({
+const DuelChart = ({
userChallenge,
finishedDataLoad,
width,
diff --git a/src/components/Duel/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal.tsx
index 2fbdf024ad98f3a766d0ec8f37213d22f0259b96..cc39de14f720b650d1405f0e0604969e5230e1ea 100644
--- a/src/components/Duel/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal.tsx
@@ -1,70 +1,70 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React, { useEffect, useState } from 'react'
-import { importIconById } from 'utils/utils'
-import './duelEmptyValueModal.scss'
-
-interface DuelEmptyValueModalProps {
- open: boolean
- handleCloseClick: () => void
-}
-
-const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
- open,
- handleCloseClick,
-}: DuelEmptyValueModalProps) => {
- const { t } = useI18n()
- const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
- useEffect(() => {
- async function handleEcogestureIcon() {
- const icon = await importIconById('emptyValue', 'duel')
- if (icon) {
- setEmptyIcon(icon)
- } else {
- setEmptyIcon(defaultIcon)
- }
- }
-
- handleEcogestureIcon()
- }, [])
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper blue-border',
- }}
- >
- <div id={'accessibility-title'}>
- {t('duel_empty_value_modal.accessibility.window_title')}
- </div>
- <div className="modal-empty-value-root">
- <Icon className="imgResult" icon={emptyIcon} size={208} />
- <div className="text-28-normal-uppercase modal-empty-value-title">
- {t('duel_empty_value_modal.title')}
- </div>
- <div className="text-18-normal">
- {t('duel_empty_value_modal.message')}
- </div>
- <Button
- aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel_empty_value_modal.button')}
- </Button>
- </div>
- </Dialog>
- )
-}
-
-export default DuelEmptyValueModal
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React, { useEffect, useState } from 'react'
+import { importIconById } from 'utils/utils'
+import './duelEmptyValueModal.scss'
+
+interface DuelEmptyValueModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const DuelEmptyValueModal = ({
+ open,
+ handleCloseClick,
+}: DuelEmptyValueModalProps) => {
+ const { t } = useI18n()
+ const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
+ useEffect(() => {
+ async function handleEcogestureIcon() {
+ const icon = await importIconById('emptyValue', 'duel')
+ if (icon) {
+ setEmptyIcon(icon)
+ } else {
+ setEmptyIcon(defaultIcon)
+ }
+ }
+
+ handleEcogestureIcon()
+ }, [])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('duel_empty_value_modal.accessibility.window_title')}
+ </div>
+ <div className="modal-empty-value-root">
+ <Icon className="imgResult" icon={emptyIcon} size={208} />
+ <div className="text-28-normal-uppercase modal-empty-value-title">
+ {t('duel_empty_value_modal.title')}
+ </div>
+ <div className="text-18-normal">
+ {t('duel_empty_value_modal.message')}
+ </div>
+ <Button
+ aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel_empty_value_modal.button')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default DuelEmptyValueModal
diff --git a/src/components/Duel/DuelError.tsx b/src/components/Duel/DuelError.tsx
index 80e9e5945fa5d244104d05dbf1ebe9b91aaa7bff..0ae106637ceb376670be433162cef6f663506916 100644
--- a/src/components/Duel/DuelError.tsx
+++ b/src/components/Duel/DuelError.tsx
@@ -1,34 +1,34 @@
-import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import './duelError.scss'
-
-const DuelError: React.FC = () => {
- const { t } = useI18n()
- const navigate = useNavigate()
-
- const goBack = useCallback(() => {
- navigate(-1)
- }, [navigate])
-
- return (
- <div className="duel-error-container">
- <div className="duel-error-message">{t('duel.global_error')}</div>
- <div className="duel-error-button">
- <Button
- aria-label={t('duel.accessibility.button_go_back')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.button_go_back')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default DuelError
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './duelError.scss'
+
+const DuelError = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goBack = useCallback(() => {
+ navigate(-1)
+ }, [navigate])
+
+ return (
+ <div className="duel-error-container">
+ <div className="duel-error-message">{t('duel.global_error')}</div>
+ <div className="duel-error-button">
+ <Button
+ aria-label={t('duel.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel.button_go_back')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default DuelError
diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index b54938d773ca4971c4144aa31b16a1110b521a9a..90b665426e8077ccfcc7ab205f276ffd4839dd7e 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -41,10 +41,7 @@ interface DuelOngoingProps {
isFinished?: boolean
}
-const DuelOngoing: React.FC<DuelOngoingProps> = ({
- userChallenge,
- isFinished,
-}: DuelOngoingProps) => {
+const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
const { currentDataload, userChallengeList } = useSelector(
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
index 7d83254a60e93f9c37f13e936f44806215f37bef..3295124400eefc2004957b1540929be235aa229f 100644
--- a/src/components/Duel/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -1,109 +1,109 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import challengeWon from 'assets/icons/visu/duelResult/challengeWon.svg'
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { UserChallenge } from 'models/challenge.model'
-import React, { useEffect, useState } from 'react'
-import { formatNumberValues, importIconById } from 'utils/utils'
-import './duelResultModal.scss'
-
-interface DuelResultModalProps {
- open: boolean
- userChallenge: UserChallenge
- win: boolean
- handleCloseClick: () => void
-}
-
-const DuelResultModal: React.FC<DuelResultModalProps> = ({
- open,
- userChallenge,
- win,
- handleCloseClick,
-}: DuelResultModalProps) => {
- const { t } = useI18n()
- const [winIcon, setWinIcon] = useState<string>(defaultIcon)
- const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
- const result: string | number = formatNumberValues(
- Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
- )
-
- useEffect(() => {
- async function handleEcogestureIcon() {
- const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
- if (icon) {
- setWinIcon(icon)
- } else {
- setWinIcon(defaultIcon)
- }
- const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
- if (icon2) {
- setLossIcon(icon2)
- } else {
- setLossIcon(defaultIcon)
- }
- }
- handleEcogestureIcon()
- }, [userChallenge])
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper blue-border',
- }}
- >
- <div id={'accessibility-title'}>
- {t('duel_result_modal.accessibility.window_title')}
- </div>
- <div className="duel-result-modal-root ">
- <div className="imgResultContainer">
- {win && (
- <Icon className="challengeWon" icon={challengeWon} size={300} />
- )}
- <Icon
- className="imgResult"
- icon={win ? winIcon : lossIcon}
- size={180}
- />
- </div>
- <div className="text-28-normal-uppercase title">
- {win
- ? t('duel_result_modal.sucess.title')
- : t('duel_result_modal.lost.title')}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel_result_modal.sucess.message1') + result + ' €'
- : t('duel_result_modal.lost.message1') + result + ' €'}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel_result_modal.sucess.message2') + userChallenge.title
- : t('duel_result_modal.lost.message2') +
- userChallenge.title +
- '...'}
- </div>
- <Button
- aria-label={t('duel_result_modal.accessibility.button_validate')}
- className="button"
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {win
- ? t('duel_result_modal.sucess.button_validate')
- : t('duel_result_modal.lost.button_validate')}
- </Button>
- </div>
- </Dialog>
- )
-}
-
-export default DuelResultModal
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import challengeWon from 'assets/icons/visu/duelResult/challengeWon.svg'
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { UserChallenge } from 'models/challenge.model'
+import React, { useEffect, useState } from 'react'
+import { formatNumberValues, importIconById } from 'utils/utils'
+import './duelResultModal.scss'
+
+interface DuelResultModalProps {
+ open: boolean
+ userChallenge: UserChallenge
+ win: boolean
+ handleCloseClick: () => void
+}
+
+const DuelResultModal = ({
+ open,
+ userChallenge,
+ win,
+ handleCloseClick,
+}: DuelResultModalProps) => {
+ const { t } = useI18n()
+ const [winIcon, setWinIcon] = useState<string>(defaultIcon)
+ const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
+ const result: string | number = formatNumberValues(
+ Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
+ )
+
+ useEffect(() => {
+ async function handleEcogestureIcon() {
+ const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
+ if (icon) {
+ setWinIcon(icon)
+ } else {
+ setWinIcon(defaultIcon)
+ }
+ const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
+ if (icon2) {
+ setLossIcon(icon2)
+ } else {
+ setLossIcon(defaultIcon)
+ }
+ }
+ handleEcogestureIcon()
+ }, [userChallenge])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('duel_result_modal.accessibility.window_title')}
+ </div>
+ <div className="duel-result-modal-root ">
+ <div className="imgResultContainer">
+ {win && (
+ <Icon className="challengeWon" icon={challengeWon} size={300} />
+ )}
+ <Icon
+ className="imgResult"
+ icon={win ? winIcon : lossIcon}
+ size={180}
+ />
+ </div>
+ <div className="text-28-normal-uppercase title">
+ {win
+ ? t('duel_result_modal.sucess.title')
+ : t('duel_result_modal.lost.title')}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel_result_modal.sucess.message1') + result + ' €'
+ : t('duel_result_modal.lost.message1') + result + ' €'}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel_result_modal.sucess.message2') + userChallenge.title
+ : t('duel_result_modal.lost.message2') +
+ userChallenge.title +
+ '...'}
+ </div>
+ <Button
+ aria-label={t('duel_result_modal.accessibility.button_validate')}
+ className="button"
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {win
+ ? t('duel_result_modal.sucess.button_validate')
+ : t('duel_result_modal.lost.button_validate')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default DuelResultModal
diff --git a/src/components/Duel/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked.tsx
index 1d230a3a2d5e590bc73d3e7ef57bfb8a6b9f83ea..c4b16b9e0b10dc7818ed75cbb7cdfa12a01fd4c8 100644
--- a/src/components/Duel/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked.tsx
@@ -16,13 +16,7 @@ import { setChallengeConsumption } from 'store/challenge/challenge.slice'
import { formatNumberValues, importIconById } from 'utils/utils'
import './duelUnlocked.scss'
-interface DuelUnlockedProps {
- userChallenge: UserChallenge
-}
-
-const DuelUnlocked: React.FC<DuelUnlockedProps> = ({
- userChallenge,
-}: DuelUnlockedProps) => {
+const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const client: Client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { t } = useI18n()
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index d96cc56ff760117c24dc14c00dbe8c9fd0640e61..b5a269f172684c9e3c6bd968026265ff6e6b911f 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -1,76 +1,76 @@
-import Content from 'components/Content/Content'
-import DuelError from 'components/Duel/DuelError'
-import DuelUnlocked from 'components/Duel/DuelUnlocked'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import { UserChallengeState } from 'enum/userChallenge.enum'
-import { UserDuelState } from 'enum/userDuel.enum'
-import { UserChallenge } from 'models'
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { AppStore } from 'store'
-import DuelEmptyValueModal from './DuelEmptyValueModal'
-import DuelOngoing from './DuelOngoing'
-
-const DuelView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { userChallengeList } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
- const id = new URLSearchParams(useLocation().search).get('id')
- const challengeToDisplay: UserChallenge | undefined = userChallengeList.find(
- challenge => challenge.id === id
- )
-
- const navigate = useNavigate()
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
- const goBackToChallenge = () => {
- navigate('/challenges')
- }
- const renderDuel = (challenge: UserChallenge) => {
- switch (challenge.duel.state) {
- case UserDuelState.UNLOCKED:
- return <DuelUnlocked userChallenge={challenge} />
- case UserDuelState.ONGOING:
- return <DuelOngoing userChallenge={challenge} />
- case UserDuelState.DONE:
- return <DuelOngoing userChallenge={challenge} isFinished={true} />
- case UserDuelState.NO_REF_PERIOD_VALID:
- return (
- <DuelEmptyValueModal
- open={true}
- handleCloseClick={goBackToChallenge}
- />
- )
- default:
- return <DuelError />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'common.title_duel'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_duel'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- <div>
- {challengeToDisplay &&
- (challengeToDisplay.state === UserChallengeState.DUEL ||
- challengeToDisplay.state === UserChallengeState.DONE) ? (
- renderDuel(challengeToDisplay)
- ) : (
- <DuelError />
- )}
- </div>
- </Content>
- </>
- )
-}
-
-export default DuelView
+import Content from 'components/Content/Content'
+import DuelError from 'components/Duel/DuelError'
+import DuelUnlocked from 'components/Duel/DuelUnlocked'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { UserChallengeState } from 'enum/userChallenge.enum'
+import { UserDuelState } from 'enum/userDuel.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { AppStore } from 'store'
+import DuelEmptyValueModal from './DuelEmptyValueModal'
+import DuelOngoing from './DuelOngoing'
+
+const DuelView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { userChallengeList } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const id = new URLSearchParams(useLocation().search).get('id')
+ const challengeToDisplay: UserChallenge | undefined = userChallengeList.find(
+ challenge => challenge.id === id
+ )
+
+ const navigate = useNavigate()
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+ const goBackToChallenge = () => {
+ navigate('/challenges')
+ }
+ const renderDuel = (challenge: UserChallenge) => {
+ switch (challenge.duel.state) {
+ case UserDuelState.UNLOCKED:
+ return <DuelUnlocked userChallenge={challenge} />
+ case UserDuelState.ONGOING:
+ return <DuelOngoing userChallenge={challenge} />
+ case UserDuelState.DONE:
+ return <DuelOngoing userChallenge={challenge} isFinished={true} />
+ case UserDuelState.NO_REF_PERIOD_VALID:
+ return (
+ <DuelEmptyValueModal
+ open={true}
+ handleCloseClick={goBackToChallenge}
+ />
+ )
+ default:
+ return <DuelError />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_duel'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_duel'}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ <div>
+ {challengeToDisplay &&
+ (challengeToDisplay.state === UserChallengeState.DUEL ||
+ challengeToDisplay.state === UserChallengeState.DONE) ? (
+ renderDuel(challengeToDisplay)
+ ) : (
+ <DuelError />
+ )}
+ </div>
+ </Content>
+ </>
+ )
+}
+
+export default DuelView
diff --git a/src/components/Duel/lastDuelModal.tsx b/src/components/Duel/lastDuelModal.tsx
index 00d2985a6f20387d509ce152555f2685e4e207cf..ad57fd6cb853f422e67146c4b7bbbf787610af81 100644
--- a/src/components/Duel/lastDuelModal.tsx
+++ b/src/components/Duel/lastDuelModal.tsx
@@ -1,51 +1,48 @@
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import star from 'assets/icons/visu/duel/star.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import './lastDuelModal.scss'
-
-interface LastDuelModalProps {
- open: boolean
- handleCloseClick: () => void
-}
-
-const LastDuelModal: React.FC<LastDuelModalProps> = ({
- open,
- handleCloseClick,
-}: LastDuelModalProps) => {
- const { t } = useI18n()
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper blue-light-border',
- }}
- >
- <div id={'accessibility-title'}>{t('last_duel_modal.title')}</div>
- <div className="duel-last-modal-root">
- <div onClick={handleCloseClick}>
- <StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
- </div>
- <StyledIcon className="icon" icon={star} size={48} />
- <div className="text-28-bold title">{t('last_duel_modal.title')}</div>
- <div className="text-22-bold subtitle">
- {t('last_duel_modal.subtitle')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message1')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message2')}
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default LastDuelModal
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import star from 'assets/icons/visu/duel/star.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import './lastDuelModal.scss'
+
+interface LastDuelModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-light-border',
+ }}
+ >
+ <div id={'accessibility-title'}>{t('last_duel_modal.title')}</div>
+ <div className="duel-last-modal-root">
+ <div onClick={handleCloseClick}>
+ <StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
+ </div>
+ <StyledIcon className="icon" icon={star} size={48} />
+ <div className="text-28-bold title">{t('last_duel_modal.title')}</div>
+ <div className="text-22-bold subtitle">
+ {t('last_duel_modal.subtitle')}
+ </div>
+ <div className="text-18-normal content">
+ {t('last_duel_modal.message1')}
+ </div>
+ <div className="text-18-normal content">
+ {t('last_duel_modal.message2')}
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default LastDuelModal
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index 650846699ab4e18a6da6eafedfc7b5a8ad945dca..c4b58cac2ce496c9997e1bbb486b64a0112a45b3 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -6,15 +6,15 @@ import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
import { Link as RouterLink } from 'react-router-dom'
import { importIconById } from 'utils/utils'
-import './ecogestureCard.scss'
import EfficiencyRating from './EfficiencyRating'
+import './ecogestureCard.scss'
interface EcogestureCardProps {
ecogesture: Ecogesture
selectionCompleted?: boolean
}
-const EcogestureCard: React.FC<EcogestureCardProps> = ({
+const EcogestureCard = ({
ecogesture,
selectionCompleted = false,
}: EcogestureCardProps) => {
diff --git a/src/components/Ecogesture/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList.tsx
index a4f36b70788bd2860cc103f146d24a7a4bd92d6c..1da8419b28ab841651d1716c86ebe3df48f6c3aa 100644
--- a/src/components/Ecogesture/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList.tsx
@@ -1,85 +1,85 @@
-import Button from '@material-ui/core/Button'
-import doingIcon from 'assets/icons/ico/doing-enabled.svg'
-import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import './ecogestureEmptyList.scss'
-
-interface EcogestureEmptyListProps {
- setTab: React.Dispatch<React.SetStateAction<number>>
- isObjective: boolean
- isSelectionDone: boolean
- handleReinitClick: () => void
-}
-const EcogestureEmptyList: React.FC<EcogestureEmptyListProps> = ({
- setTab,
- isObjective,
- isSelectionDone,
- handleReinitClick,
-}: EcogestureEmptyListProps) => {
- const { t } = useI18n()
- const navigate = useNavigate()
- const objOrDoing = isObjective ? 'obj' : 'doing'
- const isDone = isSelectionDone ? '_done' : ''
- return (
- <div className="ec-empty-container">
- <div className="ec-empty-content">
- <StyledIcon
- className="icon-big"
- icon={isObjective ? objectiveIcon : doingIcon}
- size={150}
- />
- <div className="text-16-normal text">
- {t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
- </div>
- <div className="text-16-normal text">
- {t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
- </div>
- <div className="btn-container">
- <Button
- aria-label={t('ecogesture.emptyList.btn1')}
- onClick={() => setTab(2)}
- classes={{
- root: 'btn-secondary-negative btn1',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.emptyList.btn1')}
- </Button>
-
- {isSelectionDone && (
- <Button
- aria-label={t('ecogesture.reinit')}
- onClick={handleReinitClick}
- classes={{
- root: 'reinit-button btn-profile-next rounded',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.reinit')}
- </Button>
- )}
-
- {!isSelectionDone && (
- <Button
- aria-label={t('ecogesture.emptyList.btn2')}
- onClick={() => {
- navigate('/ecogesture-form')
- }}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.emptyList.btn2')}
- </Button>
- )}
- </div>
- </div>
- </div>
- )
-}
-
-export default EcogestureEmptyList
+import Button from '@material-ui/core/Button'
+import doingIcon from 'assets/icons/ico/doing-enabled.svg'
+import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import './ecogestureEmptyList.scss'
+
+interface EcogestureEmptyListProps {
+ setTab: React.Dispatch<React.SetStateAction<number>>
+ isObjective: boolean
+ isSelectionDone: boolean
+ handleReinitClick: () => void
+}
+const EcogestureEmptyList = ({
+ setTab,
+ isObjective,
+ isSelectionDone,
+ handleReinitClick,
+}: EcogestureEmptyListProps) => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const objOrDoing = isObjective ? 'obj' : 'doing'
+ const isDone = isSelectionDone ? '_done' : ''
+ return (
+ <div className="ec-empty-container">
+ <div className="ec-empty-content">
+ <StyledIcon
+ className="icon-big"
+ icon={isObjective ? objectiveIcon : doingIcon}
+ size={150}
+ />
+ <div className="text-16-normal text">
+ {t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
+ </div>
+ <div className="text-16-normal text">
+ {t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
+ </div>
+ <div className="btn-container">
+ <Button
+ aria-label={t('ecogesture.emptyList.btn1')}
+ onClick={() => setTab(2)}
+ classes={{
+ root: 'btn-secondary-negative btn1',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.emptyList.btn1')}
+ </Button>
+
+ {isSelectionDone && (
+ <Button
+ aria-label={t('ecogesture.reinit')}
+ onClick={handleReinitClick}
+ classes={{
+ root: 'reinit-button btn-profile-next rounded',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.reinit')}
+ </Button>
+ )}
+
+ {!isSelectionDone && (
+ <Button
+ aria-label={t('ecogesture.emptyList.btn2')}
+ onClick={() => {
+ navigate('/ecogesture-form')
+ }}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.emptyList.btn2')}
+ </Button>
+ )}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default EcogestureEmptyList
diff --git a/src/components/Ecogesture/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal.tsx
index 38c4ab1cf0f93e5e1070d742421559f626ed8851..e20e0a60e9030e4e5365c6c7c2b1e302421560bf 100644
--- a/src/components/Ecogesture/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal.tsx
@@ -10,7 +10,7 @@ interface EcogestureInitModalProps {
handleCloseClick: () => void
handleLaunchForm: () => void
}
-const EcogestureInitModal: React.FC<EcogestureInitModalProps> = ({
+const EcogestureInitModal = ({
open,
handleCloseClick,
handleLaunchForm,
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 93414138c8a1dab9e9f54198721afcc67fbde1df..1d54a0d67b74f6f750fcad9c8cdcb81af3d38dcf 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -19,7 +19,7 @@ interface EcogestureListProps {
handleReinitClick?: () => void
}
-const EcogestureList: React.FC<EcogestureListProps> = ({
+const EcogestureList = ({
list,
displaySelection,
selectionTotal,
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index b5e5a3216623db05f9f39ebe044a988e7fba1919..64f363d9a26ab7bbc6e36a2c2b63aab8b431dfd0 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -14,8 +14,8 @@ import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import { getPicto } from 'utils/picto'
import { importIconById } from 'utils/utils'
-import './ecogestureModal.scss'
import EfficiencyRating from './EfficiencyRating'
+import './ecogestureModal.scss'
interface EcogestureModalProps {
open: boolean
@@ -25,7 +25,7 @@ interface EcogestureModalProps {
selectEcogesture?: () => void
}
-const EcogestureModal: React.FC<EcogestureModalProps> = ({
+const EcogestureModal = ({
open,
ecogesture,
isAction,
diff --git a/src/components/Ecogesture/EcogestureReinitModal.tsx b/src/components/Ecogesture/EcogestureReinitModal.tsx
index 15d9da6e9de373e4106bd2a16985373407851ab9..25f3ea63ebfc1ea31f7a2600331536c168836e60 100644
--- a/src/components/Ecogesture/EcogestureReinitModal.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal.tsx
@@ -11,7 +11,7 @@ interface EcogestureReinitModalProps {
handleCloseClick: () => void
handleLaunchReinit: () => void
}
-const EcogestureReinitModal: React.FC<EcogestureReinitModalProps> = ({
+const EcogestureReinitModal = ({
open,
handleCloseClick,
handleLaunchReinit,
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index d34d84ef85b811daa0666b6793470ce9b8568a5a..25e0e53311b4ba1986349711bb1337a913c52a81 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -1,328 +1,324 @@
-import { Tab, Tabs } from '@material-ui/core'
-import classNames from 'classnames'
-import Content from 'components/Content/Content'
-import EcogestureList from 'components/Ecogesture/EcogestureList'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Loader from 'components/Loader/Loader'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { EcogestureTab } from 'enum/ecogesture.enum'
-import { Ecogesture } from 'models'
-import React, { Dispatch, useCallback, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
-import EcogestureService from 'services/ecogesture.service'
-import { AppActionsTypes, AppStore } from 'store'
-import { updateProfile } from 'store/profile/profile.actions'
-import EcogestureEmptyList from './EcogestureEmptyList'
-import EcogestureInitModal from './EcogestureInitModal'
-import EcogestureReinitModal from './EcogestureReinitModal'
-import './ecogestureView.scss'
-
-interface TabPanelProps {
- children?: React.ReactNode
- tab: EcogestureTab
- value: number
-}
-const TabPanel: React.FC<TabPanelProps> = ({
- children,
- tab,
- value,
-}: TabPanelProps) => {
- return (
- <div
- role="tabpanel"
- hidden={value !== tab}
- id={`simple-tabpanel-${tab}`}
- aria-labelledby={`simple-tab-${tab}`}
- >
- {children}
- </div>
- )
-}
-
-const EcogestureView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
- const { t } = useI18n()
- const client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const tab = new URLSearchParams(useLocation().search).get('tab')
-
- const { profile, profileEcogesture, profileType } = useSelector(
- (state: AppStore) => state.ecolyo
- )
-
- const [tabValue, setTabValue] = useState<EcogestureTab>(
- tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
- )
- const navigate = useNavigate()
- const [isLoading, setIsLoading] = useState<boolean>(true)
- const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
- const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
- []
- )
- const [objectiveEcogestureList, setObjectiveEcogestureList] = useState<
- Ecogesture[]
- >([])
- const [totalViewed, setTotalViewed] = useState<number>(0)
- const [totalAvailable, setTotalAvailable] = useState<number>(0)
- const [openEcogestureInitModal, setOpenEcogestureInitModal] =
- useState<boolean>(!profile.haveSeenEcogestureModal)
- const [openEcogestureReinitModal, setOpenEcogestureReinitModal] =
- useState<boolean>(false)
-
- const handleReinitClick = useCallback(() => {
- setOpenEcogestureReinitModal(true)
- }, [])
-
- const handleLaunchForm = useCallback(async () => {
- dispatch(updateProfile({ haveSeenEcogestureModal: true }))
- setOpenEcogestureInitModal(false)
- navigate('/ecogesture-form?modal=false')
- }, [dispatch, navigate])
-
- const handleCloseEcogestureInitModal = useCallback(async () => {
- dispatch(updateProfile({ haveSeenEcogestureModal: true }))
- setOpenEcogestureInitModal(false)
- }, [dispatch])
-
- const handleLaunchReinit = useCallback(async () => {
- setOpenEcogestureReinitModal(false)
- setIsLoading(true)
- const ecogestureService = new EcogestureService(client)
- const reset = await ecogestureService.reinitAllEcogestures()
- if (reset) {
- setOpenEcogestureReinitModal(false)
- setIsLoading(false)
- navigate('/ecogesture-form?modal=true')
- }
- }, [client, navigate])
-
- const handleCloseEcogestureReinitModal = useCallback(() => {
- setOpenEcogestureReinitModal(false)
- }, [])
-
- const handleChange = useCallback(
- (event: React.ChangeEvent<object>, newValue: number) => {
- event.preventDefault()
- const params = new URLSearchParams()
- params.append('tab', newValue.toString())
- navigate({ search: params.toString() })
- setTabValue(newValue)
- },
- [navigate]
- )
-
- const tabProps = useCallback((index: number) => {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- }
- }, [])
-
- const getTabLabel = useCallback(
- (tab: EcogestureTab) => {
- const tabCounts = {
- [EcogestureTab.OBJECTIVE]: objectiveEcogestureList.length,
- [EcogestureTab.DOING]: doingEcogestureList.length,
- [EcogestureTab.ALL]: allEcogestureList.length,
- }
-
- return (
- <>
- {t(`ecogesture.title_tab_${tab}`)}
- <br />
- {`(${tabCounts[tab]})`}
- </>
- )
- },
- [
- allEcogestureList.length,
- doingEcogestureList.length,
- objectiveEcogestureList.length,
- t,
- ]
- )
-
- useEffect(() => {
- let subscribed = true
- async function loadEcogestures() {
- const ecogestureService = new EcogestureService(client)
-
- const { ecogestureList, ecogestureHash } =
- await ecogestureService.initEcogesture(profile.ecogestureHash)
-
- if (ecogestureHash !== profile.ecogestureHash) {
- dispatch(updateProfile({ ecogestureHash }))
- }
-
- const availableList = await ecogestureService.getEcogestureListByProfile(
- profileEcogesture
- )
- const filteredList = availableList.filter(
- ecogesture => ecogesture.viewedInSelection === false
- )
- if (subscribed && ecogestureList) {
- const doing = ecogestureList.filter(
- ecogesture => ecogesture.doing === true
- )
- const objective = ecogestureList.filter(
- ecogesture => ecogesture.objective === true
- )
- setAllEcogestureList(ecogestureList)
- setObjectiveEcogestureList(objective)
- setDoingEcogestureList(doing)
- setTotalAvailable(availableList.length)
- setTotalViewed(availableList.length - filteredList.length)
- }
- setIsLoading(false)
- }
- loadEcogestures()
- return () => {
- subscribed = false
- }
- }, [client, profileEcogesture, profileType, dispatch, profile.ecogestureHash])
-
- return (
- <>
- <CozyBar titleKey={'common.title_ecogestures'} />
- {isLoading && (
- <Content height={headerHeight}>
- <div className="ecogesture-spinner" aria-busy="true">
- <Loader text={t('ecogestures.loading')} />
- </div>
- </Content>
- )}
- {!isLoading && (
- <>
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_ecogestures'}
- >
- <Tabs
- value={tabValue}
- className="ecogestures-tabs"
- aria-label="ecogestures-tabs"
- onChange={handleChange}
- TabIndicatorProps={{ className: 'indicator-tab' }}
- centered={true}
- >
- <Tab
- label={getTabLabel(EcogestureTab.OBJECTIVE)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.OBJECTIVE,
- })}
- {...tabProps(EcogestureTab.OBJECTIVE)}
- />
- <Tab
- label={getTabLabel(EcogestureTab.DOING)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.DOING,
- })}
- {...tabProps(EcogestureTab.DOING)}
- />
- <Tab
- label={getTabLabel(EcogestureTab.ALL)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.ALL,
- })}
- {...tabProps(EcogestureTab.ALL)}
- />
- </Tabs>
- </Header>
-
- <Content height={headerHeight}>
- <TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
- {profile.isProfileEcogestureCompleted &&
- (totalAvailable === totalViewed &&
- objectiveEcogestureList.length === 0 ? (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={true}
- isSelectionDone={true}
- handleReinitClick={handleReinitClick}
- />
- ) : (
- <EcogestureList
- list={objectiveEcogestureList}
- displaySelection={totalAvailable !== totalViewed}
- selectionTotal={totalAvailable}
- selectionViewed={totalViewed}
- handleReinitClick={handleReinitClick}
- />
- ))}
- {!profile.isProfileEcogestureCompleted && (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={true}
- isSelectionDone={false}
- handleReinitClick={handleReinitClick}
- />
- )}
- </TabPanel>
-
- <TabPanel value={tabValue} tab={EcogestureTab.DOING}>
- {profile.isProfileEcogestureCompleted &&
- (totalAvailable === totalViewed &&
- doingEcogestureList.length === 0 ? (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={false}
- isSelectionDone={true}
- handleReinitClick={handleReinitClick}
- />
- ) : (
- <EcogestureList
- list={doingEcogestureList}
- displaySelection={totalAvailable !== totalViewed}
- selectionTotal={totalAvailable}
- selectionViewed={totalViewed}
- handleReinitClick={handleReinitClick}
- />
- ))}
- {!profile.isProfileEcogestureCompleted && (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={false}
- isSelectionDone={false}
- handleReinitClick={handleReinitClick}
- />
- )}
- </TabPanel>
-
- <TabPanel value={tabValue} tab={EcogestureTab.ALL}>
- {Boolean(allEcogestureList.length) && (
- <EcogestureList
- list={allEcogestureList}
- displaySelection={false}
- selectionTotal={totalAvailable}
- selectionViewed={totalViewed}
- />
- )}
- </TabPanel>
- </Content>
- </>
- )}
- {openEcogestureInitModal && (
- <EcogestureInitModal
- open={openEcogestureInitModal}
- handleCloseClick={handleCloseEcogestureInitModal}
- handleLaunchForm={handleLaunchForm}
- />
- )}
- {openEcogestureReinitModal && (
- <EcogestureReinitModal
- open={openEcogestureReinitModal}
- handleCloseClick={handleCloseEcogestureReinitModal}
- handleLaunchReinit={handleLaunchReinit}
- />
- )}
- </>
- )
-}
-
-export default EcogestureView
+import { Tab, Tabs } from '@material-ui/core'
+import classNames from 'classnames'
+import Content from 'components/Content/Content'
+import EcogestureList from 'components/Ecogesture/EcogestureList'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { EcogestureTab } from 'enum/ecogesture.enum'
+import { Ecogesture } from 'models'
+import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import EcogestureService from 'services/ecogesture.service'
+import { AppActionsTypes, AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
+import EcogestureEmptyList from './EcogestureEmptyList'
+import EcogestureInitModal from './EcogestureInitModal'
+import EcogestureReinitModal from './EcogestureReinitModal'
+import './ecogestureView.scss'
+
+interface TabPanelProps {
+ children?: React.ReactNode
+ tab: EcogestureTab
+ value: number
+}
+const TabPanel = ({ children, tab, value }: TabPanelProps) => {
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== tab}
+ id={`simple-tabpanel-${tab}`}
+ aria-labelledby={`simple-tab-${tab}`}
+ >
+ {children}
+ </div>
+ )
+}
+
+const EcogestureView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ const { t } = useI18n()
+ const client = useClient()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const tab = new URLSearchParams(useLocation().search).get('tab')
+
+ const { profile, profileEcogesture, profileType } = useSelector(
+ (state: AppStore) => state.ecolyo
+ )
+
+ const [tabValue, setTabValue] = useState<EcogestureTab>(
+ tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
+ )
+ const navigate = useNavigate()
+ const [isLoading, setIsLoading] = useState<boolean>(true)
+ const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
+ const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
+ []
+ )
+ const [objectiveEcogestureList, setObjectiveEcogestureList] = useState<
+ Ecogesture[]
+ >([])
+ const [totalViewed, setTotalViewed] = useState<number>(0)
+ const [totalAvailable, setTotalAvailable] = useState<number>(0)
+ const [openEcogestureInitModal, setOpenEcogestureInitModal] =
+ useState<boolean>(!profile.haveSeenEcogestureModal)
+ const [openEcogestureReinitModal, setOpenEcogestureReinitModal] =
+ useState<boolean>(false)
+
+ const handleReinitClick = useCallback(() => {
+ setOpenEcogestureReinitModal(true)
+ }, [])
+
+ const handleLaunchForm = useCallback(async () => {
+ dispatch(updateProfile({ haveSeenEcogestureModal: true }))
+ setOpenEcogestureInitModal(false)
+ navigate('/ecogesture-form?modal=false')
+ }, [dispatch, navigate])
+
+ const handleCloseEcogestureInitModal = useCallback(async () => {
+ dispatch(updateProfile({ haveSeenEcogestureModal: true }))
+ setOpenEcogestureInitModal(false)
+ }, [dispatch])
+
+ const handleLaunchReinit = useCallback(async () => {
+ setOpenEcogestureReinitModal(false)
+ setIsLoading(true)
+ const ecogestureService = new EcogestureService(client)
+ const reset = await ecogestureService.reinitAllEcogestures()
+ if (reset) {
+ setOpenEcogestureReinitModal(false)
+ setIsLoading(false)
+ navigate('/ecogesture-form?modal=true')
+ }
+ }, [client, navigate])
+
+ const handleCloseEcogestureReinitModal = useCallback(() => {
+ setOpenEcogestureReinitModal(false)
+ }, [])
+
+ const handleChange = useCallback(
+ (event: React.ChangeEvent<object>, newValue: number) => {
+ event.preventDefault()
+ const params = new URLSearchParams()
+ params.append('tab', newValue.toString())
+ navigate({ search: params.toString() })
+ setTabValue(newValue)
+ },
+ [navigate]
+ )
+
+ const tabProps = useCallback((index: number) => {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ }
+ }, [])
+
+ const getTabLabel = useCallback(
+ (tab: EcogestureTab) => {
+ const tabCounts = {
+ [EcogestureTab.OBJECTIVE]: objectiveEcogestureList.length,
+ [EcogestureTab.DOING]: doingEcogestureList.length,
+ [EcogestureTab.ALL]: allEcogestureList.length,
+ }
+
+ return (
+ <>
+ {t(`ecogesture.title_tab_${tab}`)}
+ <br />
+ {`(${tabCounts[tab]})`}
+ </>
+ )
+ },
+ [
+ allEcogestureList.length,
+ doingEcogestureList.length,
+ objectiveEcogestureList.length,
+ t,
+ ]
+ )
+
+ useEffect(() => {
+ let subscribed = true
+ async function loadEcogestures() {
+ const ecogestureService = new EcogestureService(client)
+
+ const { ecogestureList, ecogestureHash } =
+ await ecogestureService.initEcogesture(profile.ecogestureHash)
+
+ if (ecogestureHash !== profile.ecogestureHash) {
+ dispatch(updateProfile({ ecogestureHash }))
+ }
+
+ const availableList = await ecogestureService.getEcogestureListByProfile(
+ profileEcogesture
+ )
+ const filteredList = availableList.filter(
+ ecogesture => ecogesture.viewedInSelection === false
+ )
+ if (subscribed && ecogestureList) {
+ const doing = ecogestureList.filter(
+ ecogesture => ecogesture.doing === true
+ )
+ const objective = ecogestureList.filter(
+ ecogesture => ecogesture.objective === true
+ )
+ setAllEcogestureList(ecogestureList)
+ setObjectiveEcogestureList(objective)
+ setDoingEcogestureList(doing)
+ setTotalAvailable(availableList.length)
+ setTotalViewed(availableList.length - filteredList.length)
+ }
+ setIsLoading(false)
+ }
+ loadEcogestures()
+ return () => {
+ subscribed = false
+ }
+ }, [client, profileEcogesture, profileType, dispatch, profile.ecogestureHash])
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_ecogestures'} />
+ {isLoading && (
+ <Content height={headerHeight}>
+ <div className="ecogesture-spinner" aria-busy="true">
+ <Loader text={t('ecogestures.loading')} />
+ </div>
+ </Content>
+ )}
+ {!isLoading && (
+ <>
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_ecogestures'}
+ >
+ <Tabs
+ value={tabValue}
+ className="ecogestures-tabs"
+ aria-label="ecogestures-tabs"
+ onChange={handleChange}
+ TabIndicatorProps={{ className: 'indicator-tab' }}
+ centered={true}
+ >
+ <Tab
+ label={getTabLabel(EcogestureTab.OBJECTIVE)}
+ className={classNames('single-tab', {
+ ['active']: tabValue === EcogestureTab.OBJECTIVE,
+ })}
+ {...tabProps(EcogestureTab.OBJECTIVE)}
+ />
+ <Tab
+ label={getTabLabel(EcogestureTab.DOING)}
+ className={classNames('single-tab', {
+ ['active']: tabValue === EcogestureTab.DOING,
+ })}
+ {...tabProps(EcogestureTab.DOING)}
+ />
+ <Tab
+ label={getTabLabel(EcogestureTab.ALL)}
+ className={classNames('single-tab', {
+ ['active']: tabValue === EcogestureTab.ALL,
+ })}
+ {...tabProps(EcogestureTab.ALL)}
+ />
+ </Tabs>
+ </Header>
+
+ <Content height={headerHeight}>
+ <TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
+ {profile.isProfileEcogestureCompleted &&
+ (totalAvailable === totalViewed &&
+ objectiveEcogestureList.length === 0 ? (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={true}
+ isSelectionDone={true}
+ handleReinitClick={handleReinitClick}
+ />
+ ) : (
+ <EcogestureList
+ list={objectiveEcogestureList}
+ displaySelection={totalAvailable !== totalViewed}
+ selectionTotal={totalAvailable}
+ selectionViewed={totalViewed}
+ handleReinitClick={handleReinitClick}
+ />
+ ))}
+ {!profile.isProfileEcogestureCompleted && (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={true}
+ isSelectionDone={false}
+ handleReinitClick={handleReinitClick}
+ />
+ )}
+ </TabPanel>
+
+ <TabPanel value={tabValue} tab={EcogestureTab.DOING}>
+ {profile.isProfileEcogestureCompleted &&
+ (totalAvailable === totalViewed &&
+ doingEcogestureList.length === 0 ? (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={false}
+ isSelectionDone={true}
+ handleReinitClick={handleReinitClick}
+ />
+ ) : (
+ <EcogestureList
+ list={doingEcogestureList}
+ displaySelection={totalAvailable !== totalViewed}
+ selectionTotal={totalAvailable}
+ selectionViewed={totalViewed}
+ handleReinitClick={handleReinitClick}
+ />
+ ))}
+ {!profile.isProfileEcogestureCompleted && (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={false}
+ isSelectionDone={false}
+ handleReinitClick={handleReinitClick}
+ />
+ )}
+ </TabPanel>
+
+ <TabPanel value={tabValue} tab={EcogestureTab.ALL}>
+ {Boolean(allEcogestureList.length) && (
+ <EcogestureList
+ list={allEcogestureList}
+ displaySelection={false}
+ selectionTotal={totalAvailable}
+ selectionViewed={totalViewed}
+ />
+ )}
+ </TabPanel>
+ </Content>
+ </>
+ )}
+ {openEcogestureInitModal && (
+ <EcogestureInitModal
+ open={openEcogestureInitModal}
+ handleCloseClick={handleCloseEcogestureInitModal}
+ handleLaunchForm={handleLaunchForm}
+ />
+ )}
+ {openEcogestureReinitModal && (
+ <EcogestureReinitModal
+ open={openEcogestureReinitModal}
+ handleCloseClick={handleCloseEcogestureReinitModal}
+ handleLaunchReinit={handleLaunchReinit}
+ />
+ )}
+ </>
+ )
+}
+
+export default EcogestureView
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index ec5c06c56355dd76471d70663579cf2bfa864e80..2dfef67887c5fbf4dbb76facec4ce16027a29eb2 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -31,7 +31,7 @@ interface EcogestureLocation extends Location {
}
}
-const SingleEcogesture: React.FC = () => {
+const SingleEcogesture = () => {
const { t } = useI18n()
const client = useClient()
const navigate = useNavigate()
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment.tsx
index 39f6dd56a825df1276da55a3ae6cba88dca0f692..b26bd8eec3c018ed818ea19796b30f15ff2f0d6b 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment.tsx
@@ -20,7 +20,7 @@ interface EcogestureFormEquipmentProps {
step: ProfileTypeStepForm | EcogestureStepForm
}
-const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
+const EcogestureFormEquipment = ({
currentProfileEcogesture,
currentProfileType,
setPreviousStep,
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx
index 81d52efc34fa68bb6af730cc57dcaa06ad426f05..5f1299666e89f4e2b82397ed0952840ec4922d03 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx
@@ -21,7 +21,7 @@ interface EcogestureFormSingleChoiceProps {
setPreviousStep: () => void
}
-const EcogestureFormSingleChoice: React.FC<EcogestureFormSingleChoiceProps> = ({
+const EcogestureFormSingleChoice = ({
step,
viewedStep,
currentProfileEcogesture,
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index a92a6a2688eef625612a21211d50cc6e39563660..b3faea70e482efb173af8a7949874f4c563d5f09 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -22,7 +22,7 @@ import { AppActionsTypes, AppStore } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcogesture.actions'
-const EcogestureFormView: React.FC = () => {
+const EcogestureFormView = () => {
const dispatch: Dispatch<AppActionsTypes> = useDispatch()
const {
profile: { isProfileTypeCompleted },
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx
index 8e93c619c5f4f2e1ed050702aa534340bb9aaba0..43d41314757b94143c5bd35bef7739e62dcf90c4 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx
@@ -10,7 +10,7 @@ interface EcogestureLaunchFormModalProps {
open: boolean
handleCloseClick: () => void
}
-const EcogestureLaunchFormModal: React.FC<EcogestureLaunchFormModalProps> = ({
+const EcogestureLaunchFormModal = ({
open,
handleCloseClick,
}: EcogestureLaunchFormModalProps) => {
diff --git a/src/components/EcogestureForm/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon.tsx
index 64d3407a8749263f6b09deec1101a8ec990d0bfb..46b1b09c79752261cc6e1bbb91c4c757878a9664 100644
--- a/src/components/EcogestureForm/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon.tsx
@@ -9,10 +9,7 @@ interface EquipmentIconProps {
isChecked: boolean
}
-const EquipmentIcon: React.FC<EquipmentIconProps> = ({
- equipment,
- isChecked,
-}: EquipmentIconProps) => {
+const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
const { t } = useI18n()
const [icon, setIcon] = useState<string>('')
useEffect(() => {
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 090a33ffd5914d14452262acd03a9ff43630d6fc..a04d394156641b336a7a52541a33bb22663e438a 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -16,7 +16,7 @@ import EcogestureService from 'services/ecogesture.service'
import { AppStore } from 'store'
import './ecogestureSelection.scss'
-const EcogestureSelection: React.FC = () => {
+const EcogestureSelection = () => {
const { t } = useI18n()
const client = useClient()
const navigate = useNavigate()
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
index 9e6133e4d13f05c56341623c818664888a9d6f4b..1c58e184a47635ddf11c142bf709f44bef95810c 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
@@ -16,7 +16,7 @@ interface EcogestureSelectionDetailProps {
title: string
}
-const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
+const EcogestureSelectionDetail = ({
ecogesture,
validate,
title,
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
index 3e35b4ef1a3fc0fdc55f475c6ab3c7498493a04d..5742708e628210bb7da4a06b1722d91068c76b96 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
@@ -6,7 +6,7 @@ import React, { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import './ecogestureSelectionEnd.scss'
-const EcogestureSelectionEnd: React.FC = () => {
+const EcogestureSelectionEnd = () => {
const { t } = useI18n()
const navigate = useNavigate()
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal.tsx
index 644d448fd590e1bea521abc5b0f196c226e663ba..48d2db7aad55c4aad19af5538365e8e5d472be12 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal.tsx
@@ -11,7 +11,7 @@ interface EcogestureSelectionModalProps {
handleCloseClick: () => void
}
-const EcogestureSelectionModal: React.FC<EcogestureSelectionModalProps> = ({
+const EcogestureSelectionModal = ({
open,
handleCloseClick,
}: EcogestureSelectionModalProps) => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
index d871c0927aa898232373271d18b4d57915c39f57..33a68a477c8096ced33c5fd8c2f1eb5ca96e1d11 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
@@ -11,7 +11,7 @@ interface EcogestureSelectionRestartProps {
restart: () => void
}
-const EcogestureSelectionRestart: React.FC<EcogestureSelectionRestartProps> = ({
+const EcogestureSelectionRestart = ({
listLength,
restart,
}: EcogestureSelectionRestartProps) => {
diff --git a/src/components/Exploration/ExplorationError.tsx b/src/components/Exploration/ExplorationError.tsx
index f1300a16c095cd28bfa0a77fe3132d96a4d4a5e5..efd22f0f0d8e0d33f211531c73bada580a55ac1c 100644
--- a/src/components/Exploration/ExplorationError.tsx
+++ b/src/components/Exploration/ExplorationError.tsx
@@ -1,36 +1,36 @@
-import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import './explorationError.scss'
-
-const ExplorationError: React.FC = () => {
- const { t } = useI18n()
- const navigate = useNavigate()
-
- const goBack = useCallback(() => {
- navigate(-1)
- }, [navigate])
-
- return (
- <div className="exploration-error-container">
- <div className="exploration-error-message">
- {t('exploration.global_error')}
- </div>
- <div className="exploration-error-button">
- <Button
- aria-label={t('exploration.accessibility.button_go_back')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('exploration.button_go_back')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default ExplorationError
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './explorationError.scss'
+
+const ExplorationError = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goBack = useCallback(() => {
+ navigate(-1)
+ }, [navigate])
+
+ return (
+ <div className="exploration-error-container">
+ <div className="exploration-error-message">
+ {t('exploration.global_error')}
+ </div>
+ <div className="exploration-error-button">
+ <Button
+ aria-label={t('exploration.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('exploration.button_go_back')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default ExplorationError
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
index 3603d1fe456bf0a4bd632e2359817ce5e6153643..bbc2d5365db2528cd646f224d497c56ba32c63b8 100644
--- a/src/components/Exploration/ExplorationFinished.tsx
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -21,9 +21,7 @@ interface ExplorationFinishedProps {
userChallenge: UserChallenge
}
-const ExplorationFinished: React.FC<ExplorationFinishedProps> = ({
- userChallenge,
-}: ExplorationFinishedProps) => {
+const ExplorationFinished = ({ userChallenge }: ExplorationFinishedProps) => {
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 4d58ed5bc6eee7a94149848a558b352c26046963..68bec1b732511e1a9d143647131db987522b0771 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -24,9 +24,7 @@ interface ExplorationOngoingProps {
userChallenge: UserChallenge
}
-const ExplorationOngoing: React.FC<ExplorationOngoingProps> = ({
- userChallenge,
-}: ExplorationOngoingProps) => {
+const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 34b39786e36aeb7aa18c4b2246f108cfa892b889..b08315fbbd9eb35b9b71449ea4342fb515bb102d 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -1,51 +1,51 @@
-import Content from 'components/Content/Content'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import { UserExplorationState } from 'enum/userExploration.enum'
-import { UserChallenge } from 'models'
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import ExplorationError from './ExplorationError'
-import ExplorationFinished from './ExplorationFinished'
-import ExplorationOngoing from './ExplorationOngoing'
-
-const ExplorationView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
-
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
-
- const renderExploration = (challenge: UserChallenge) => {
- switch (challenge.exploration.state) {
- case UserExplorationState.UNLOCKED:
- case UserExplorationState.ONGOING:
- return <ExplorationOngoing userChallenge={challenge} />
- case UserExplorationState.NOTIFICATION:
- case UserExplorationState.DONE:
- return <ExplorationFinished userChallenge={challenge} />
- default:
- return <ExplorationError />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'common.title_exploration'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_exploration'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- {currentChallenge && renderExploration(currentChallenge)}
- </Content>
- </>
- )
-}
-
-export default ExplorationView
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { UserExplorationState } from 'enum/userExploration.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import ExplorationError from './ExplorationError'
+import ExplorationFinished from './ExplorationFinished'
+import ExplorationOngoing from './ExplorationOngoing'
+
+const ExplorationView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+
+ const renderExploration = (challenge: UserChallenge) => {
+ switch (challenge.exploration.state) {
+ case UserExplorationState.UNLOCKED:
+ case UserExplorationState.ONGOING:
+ return <ExplorationOngoing userChallenge={challenge} />
+ case UserExplorationState.NOTIFICATION:
+ case UserExplorationState.DONE:
+ return <ExplorationFinished userChallenge={challenge} />
+ default:
+ return <ExplorationError />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_exploration'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_exploration'}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ {currentChallenge && renderExploration(currentChallenge)}
+ </Content>
+ </>
+ )
+}
+
+export default ExplorationView
diff --git a/src/components/Export/exportDoneModal.tsx b/src/components/Export/exportDoneModal.tsx
index ea3bd2bf25c5fd32e270987bae2b015704c89421..4ad5cc4015c3bf8283da9f482da4aec2457220f4 100644
--- a/src/components/Export/exportDoneModal.tsx
+++ b/src/components/Export/exportDoneModal.tsx
@@ -1,93 +1,93 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import exportDone from 'assets/icons/ico/exportDone.svg'
-import warnCross from 'assets/icons/ico/warn-cross.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './exportDoneModal.scss'
-
-interface ExportDoneModalProps {
- open: boolean
- error: boolean
- handleCloseClick: () => void
-}
-
-const ExportDoneModal: React.FC<ExportDoneModalProps> = ({
- open,
- error,
- handleCloseClick,
-}: ExportDoneModalProps) => {
- const { t } = useI18n()
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('export.modal_done.accessibility_title')}
- </div>
-
- <div className="modal-done-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
-
- <div className="content">
- <div className="icon-main">
- <Icon icon={error ? warnCross : exportDone} size={44} />
- </div>
- {!error && (
- <>
- <div className="text-16-bold text text1">
- {t('export.modal_done.text1')}
- </div>
- <div className="text-16-normal text">
- {t('export.modal_done.text2')}
- </div>
- </>
- )}
- {error && (
- <>
- <div className="text-20-bold text error1">
- {t('export.modal_done.error1')}
- </div>
- <div className="text-16-bold text">
- {t('export.modal_done.error2')}
- </div>
- </>
- )}
-
- <Button
- aria-label={t('export.modal_done.button_close')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
- >
- {error
- ? t('export.modal_done.button_close_error')
- : t('export.modal_done.button_close')}
- </Button>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default ExportDoneModal
+import { Button, IconButton } from '@material-ui/core'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import exportDone from 'assets/icons/ico/exportDone.svg'
+import warnCross from 'assets/icons/ico/warn-cross.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React from 'react'
+import './exportDoneModal.scss'
+
+interface ExportDoneModalProps {
+ open: boolean
+ error: boolean
+ handleCloseClick: () => void
+}
+
+const ExportDoneModal = ({
+ open,
+ error,
+ handleCloseClick,
+}: ExportDoneModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_done.accessibility_title')}
+ </div>
+
+ <div className="modal-done-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+
+ <div className="content">
+ <div className="icon-main">
+ <Icon icon={error ? warnCross : exportDone} size={44} />
+ </div>
+ {!error && (
+ <>
+ <div className="text-16-bold text text1">
+ {t('export.modal_done.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_done.text2')}
+ </div>
+ </>
+ )}
+ {error && (
+ <>
+ <div className="text-20-bold text error1">
+ {t('export.modal_done.error1')}
+ </div>
+ <div className="text-16-bold text">
+ {t('export.modal_done.error2')}
+ </div>
+ </>
+ )}
+
+ <Button
+ aria-label={t('export.modal_done.button_close')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {error
+ ? t('export.modal_done.button_close_error')
+ : t('export.modal_done.button_close')}
+ </Button>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportDoneModal
diff --git a/src/components/Export/exportLoadingModal.tsx b/src/components/Export/exportLoadingModal.tsx
index 3e6d40f3a77e687544d24e993dad146d88ee971c..dfce4d8676e4c0a3abee26784e20da6033ba2b2b 100644
--- a/src/components/Export/exportLoadingModal.tsx
+++ b/src/components/Export/exportLoadingModal.tsx
@@ -32,7 +32,7 @@ interface ExportLoadingModalProps {
selectedFluids: FluidType[]
}
-const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
+const ExportLoadingModal = ({
open,
handleCloseClick,
handleDone,
diff --git a/src/components/Export/exportStartModal.tsx b/src/components/Export/exportStartModal.tsx
index ef7784cf8855bb95b5d48cc980c474f30ed77abe..f6c87e0beb6acf01a423d540ed0310d26182639b 100644
--- a/src/components/Export/exportStartModal.tsx
+++ b/src/components/Export/exportStartModal.tsx
@@ -1,88 +1,88 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import download from 'assets/icons/ico/download.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './exportStartModal.scss'
-
-interface ExportStartModalProps {
- open: boolean
- handleCloseClick: () => void
- handleDownloadClick: () => void
-}
-
-const ExportStartModal: React.FC<ExportStartModalProps> = ({
- open,
- handleCloseClick,
- handleDownloadClick,
-}: ExportStartModalProps) => {
- const { t } = useI18n()
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility_title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('export.modal_start.accessibility_title')}
- </div>
- <div className="modal-start-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
- <div className="content">
- <div className="icon-main">
- <Icon icon={download} size={48} />
- </div>
- <div className="text-16-bold text text1">
- {t('export.modal_start.text1')}
- </div>
- <div className="text-16-normal text">
- {t('export.modal_start.text2')}
- <br />
- {t('export.modal_start.text3')}
- </div>
- <div className="buttons">
- <Button
- aria-label={t('export.modal_start.button_cancel')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- type="submit"
- >
- {t('export.modal_start.button_cancel')}
- </Button>
- <Button
- aria-label={t('export.button_download')}
- onClick={handleDownloadClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
- >
- {t('export.button_download')}
- </Button>
- </div>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default ExportStartModal
+import { Button, IconButton } from '@material-ui/core'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import download from 'assets/icons/ico/download.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React from 'react'
+import './exportStartModal.scss'
+
+interface ExportStartModalProps {
+ open: boolean
+ handleCloseClick: () => void
+ handleDownloadClick: () => void
+}
+
+const ExportStartModal = ({
+ open,
+ handleCloseClick,
+ handleDownloadClick,
+}: ExportStartModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility_title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_start.accessibility_title')}
+ </div>
+ <div className="modal-start-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+ <div className="content">
+ <div className="icon-main">
+ <Icon icon={download} size={48} />
+ </div>
+ <div className="text-16-bold text text1">
+ {t('export.modal_start.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_start.text2')}
+ <br />
+ {t('export.modal_start.text3')}
+ </div>
+ <div className="buttons">
+ <Button
+ aria-label={t('export.modal_start.button_cancel')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.modal_start.button_cancel')}
+ </Button>
+ <Button
+ aria-label={t('export.button_download')}
+ onClick={handleDownloadClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.button_download')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportStartModal
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index fef7c2595fb456e5b048826084672ba0e5d366ba..e3858f129f868e2fd709e2dc1204071768ebd897 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -19,10 +19,7 @@ interface FeedbackModalProps {
handleCloseClick: () => void
}
-const FeedbackModal: React.FC<FeedbackModalProps> = ({
- open,
- handleCloseClick,
-}: FeedbackModalProps) => {
+const FeedbackModal = ({ open, handleCloseClick }: FeedbackModalProps) => {
const { t }: IuseI18n = useI18n()
const client: Client = useClient()
const [, setValidExploration] = useExploration()
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 3f9ed03bd0427b9e21c98dd4ead155d8274d0f70..5cf885281dd230d075b35dd804ba08ed8389fcab 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -34,10 +34,7 @@ interface FluidChartProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const FluidChart: React.FC<FluidChartProps> = ({
- fluidType,
- setActive,
-}: FluidChartProps) => {
+const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
const { t } = useI18n()
const client = useClient()
const {
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 071210de4126f43f2795b199ca5d5b1114ab70d4..3218478982d6992111d99ad95b292aa6ccfb8634 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -23,7 +23,7 @@ interface FluidChartSlideProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
+const FluidChartSlide = ({
index,
fluidType,
width,
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index f82f6302ec03ae1db67f901468584a1adc9a219a..3d5ddee72487b84c718f7a114bfac968c26d5390 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -18,10 +18,7 @@ interface FluidChartSwipeProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
- fluidType,
- setActive,
-}: FluidChartSwipeProps) => {
+const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { currentIndex, currentTimeStep, selectedDate } = useSelector(
(state: AppStore) => state.ecolyo.chart
diff --git a/src/components/FormGlobal/FormNavigation.tsx b/src/components/FormGlobal/FormNavigation.tsx
index 00bdd37a0eddc3f13dd6ef1d8873c6b0273f16a3..7fab173bf4a8ba170aa9aca3d90ececc45fb8f71 100644
--- a/src/components/FormGlobal/FormNavigation.tsx
+++ b/src/components/FormGlobal/FormNavigation.tsx
@@ -1,98 +1,98 @@
-import Button from '@material-ui/core/Button'
-import classNames from 'classnames'
-import 'components/FormGlobal/formNavigation.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
-import { SgeStep } from 'enum/sgeStep.enum'
-import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-
-interface FormNavigationProps {
- step: ProfileTypeStepForm | EcogestureStepForm | SgeStep
- handlePrevious: () => void
- handleNext: () => void
- disableNextButton: boolean
- disablePrevButton?: boolean
- isEcogesture?: boolean
- isLastConnectStep?: boolean
- isLoading?: boolean
-}
-
-const FormNavigation: React.FC<FormNavigationProps> = ({
- step,
- handlePrevious,
- handleNext,
- disableNextButton,
- disablePrevButton,
- isEcogesture,
- isLastConnectStep,
- isLoading,
-}: FormNavigationProps) => {
- const { t } = useI18n()
- const navigate = useNavigate()
- const handlePreviousClick = () => {
- handlePrevious()
- }
- const handleNextClick = () => {
- handleNext()
- // handle go back to connect for SGE
- if (isLastConnectStep) {
- navigate('/consumption/electricity')
- }
- }
-
- const getSecondButtonLabel = useCallback(() => {
- if (isLoading) {
- return t('profile_type.form.button_loading')
- } else if (
- isLastConnectStep ||
- step === ProfileTypeStepForm.UPDATE_DATE ||
- (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
- ) {
- return t('profile_type.form.button_end')
- } else {
- return `${t('profile_type.form.button_next')} >`
- }
- }, [isEcogesture, isLastConnectStep, isLoading, step, t])
-
- return (
- <div className="profile-navigation">
- <Button
- aria-label={t('profile_type.accessibility.button_previous')}
- onClick={handlePreviousClick}
- className={'profile-navigation-button'}
- disabled={
- disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
- }
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('profile_type.form.button_previous')}`}
- </Button>
- <Button
- aria-label={
- step === ProfileTypeStepForm.UPDATE_DATE ||
- (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
- ? t('profile_type.accessibility.button_end')
- : t('profile_type.accessibility.button_next')
- }
- onClick={handleNextClick}
- className={classNames('profile-navigation-button', {
- ['disabled']: disableNextButton,
- })}
- disabled={disableNextButton}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
- >
- {getSecondButtonLabel()}
- </Button>
- </div>
- )
-}
-
-export default FormNavigation
+import Button from '@material-ui/core/Button'
+import classNames from 'classnames'
+import 'components/FormGlobal/formNavigation.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { SgeStep } from 'enum/sgeStep.enum'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface FormNavigationProps {
+ step: ProfileTypeStepForm | EcogestureStepForm | SgeStep
+ handlePrevious: () => void
+ handleNext: () => void
+ disableNextButton: boolean
+ disablePrevButton?: boolean
+ isEcogesture?: boolean
+ isLastConnectStep?: boolean
+ isLoading?: boolean
+}
+
+const FormNavigation = ({
+ step,
+ handlePrevious,
+ handleNext,
+ disableNextButton,
+ disablePrevButton,
+ isEcogesture,
+ isLastConnectStep,
+ isLoading,
+}: FormNavigationProps) => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const handlePreviousClick = () => {
+ handlePrevious()
+ }
+ const handleNextClick = () => {
+ handleNext()
+ // handle go back to connect for SGE
+ if (isLastConnectStep) {
+ navigate('/consumption/electricity')
+ }
+ }
+
+ const getSecondButtonLabel = useCallback(() => {
+ if (isLoading) {
+ return t('profile_type.form.button_loading')
+ } else if (
+ isLastConnectStep ||
+ step === ProfileTypeStepForm.UPDATE_DATE ||
+ (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
+ ) {
+ return t('profile_type.form.button_end')
+ } else {
+ return `${t('profile_type.form.button_next')} >`
+ }
+ }, [isEcogesture, isLastConnectStep, isLoading, step, t])
+
+ return (
+ <div className="profile-navigation">
+ <Button
+ aria-label={t('profile_type.accessibility.button_previous')}
+ onClick={handlePreviousClick}
+ className={'profile-navigation-button'}
+ disabled={
+ disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
+ }
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {`< ${t('profile_type.form.button_previous')}`}
+ </Button>
+ <Button
+ aria-label={
+ step === ProfileTypeStepForm.UPDATE_DATE ||
+ (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
+ ? t('profile_type.accessibility.button_end')
+ : t('profile_type.accessibility.button_next')
+ }
+ onClick={handleNextClick}
+ className={classNames('profile-navigation-button', {
+ ['disabled']: disableNextButton,
+ })}
+ disabled={disableNextButton}
+ classes={{
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
+ }}
+ >
+ {getSecondButtonLabel()}
+ </Button>
+ </div>
+ )
+}
+
+export default FormNavigation
diff --git a/src/components/FormGlobal/FormProgress.tsx b/src/components/FormGlobal/FormProgress.tsx
index 0d3944d01c49f36ae917199b33d702c3a7524655..5971e430756d9f4cc4addd159d6a0b6685b4c652 100644
--- a/src/components/FormGlobal/FormProgress.tsx
+++ b/src/components/FormGlobal/FormProgress.tsx
@@ -8,10 +8,7 @@ interface FormProgressProps {
formType: 'sge' | 'profile'
}
-const FormProgress: React.FC<FormProgressProps> = ({
- step,
- formType,
-}: FormProgressProps) => {
+const FormProgress = ({ step, formType }: FormProgressProps) => {
const getProgress = () => {
const total: number =
Object.values(formType === 'sge' ? SgeStep : ProfileTypeStepForm).length /
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d2e574b89b3f42c68a538f9d406921bd757ed06a..943f408a4f0e458e94fd3dbb2224b1df27ce24f1 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -21,13 +21,13 @@ interface HeaderProps {
}
/** Header for desktop view */
-const Header: React.FC<HeaderProps> = ({
+const Header = ({
desktopTitleKey,
displayBackArrow,
children,
setHeaderHeight,
backFunction,
-}) => {
+}: HeaderProps) => {
const { t } = useI18n()
const navigate = useNavigate()
const header = useRef<HTMLDivElement>(null)
diff --git a/src/components/Home/ConsumptionDetails.tsx b/src/components/Home/ConsumptionDetails.tsx
index b02482996131393096a0aff336fca83963ad7125..3d17fc62059044c64b543d436f9da187b4dc75b5 100644
--- a/src/components/Home/ConsumptionDetails.tsx
+++ b/src/components/Home/ConsumptionDetails.tsx
@@ -1,50 +1,45 @@
-import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { convertDateToShortDateString } from 'utils/date'
-import './consumptionDetails.scss'
-interface ConsumptionDetailsProps {
- fluidType: FluidType
-}
-
-const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
- fluidType,
-}: ConsumptionDetailsProps) => {
- const { t } = useI18n()
- const { currentTimeStep, currentDatachart, showCompare } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
-
- return (
- <>
- <div className="consumption-details-root">
- <div className="consumption-details-content">
- <div className="consumption-details-header text-16-normal-uppercase details-title">
- {convertDateToShortDateString(
- currentDatachart.actualData,
- currentTimeStep
- )}
- {showCompare && (
- <div className="consumption-details-header compare">
- {t('consumption.compared')}
- {currentTimeStep === TimeStep.DAY && ' '}
- {currentTimeStep !== TimeStep.DAY && ' AU '}
- {convertDateToShortDateString(
- currentDatachart.comparisonData,
- currentTimeStep
- )}
- </div>
- )}
- </div>
- <TotalConsumption fluidType={fluidType} />
- </div>
- </div>
- </>
- )
-}
-
-export default ConsumptionDetails
+import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { convertDateToShortDateString } from 'utils/date'
+import './consumptionDetails.scss'
+
+const ConsumptionDetails = ({ fluidType }: { fluidType: FluidType }) => {
+ const { t } = useI18n()
+ const { currentTimeStep, currentDatachart, showCompare } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+
+ return (
+ <>
+ <div className="consumption-details-root">
+ <div className="consumption-details-content">
+ <div className="consumption-details-header text-16-normal-uppercase details-title">
+ {convertDateToShortDateString(
+ currentDatachart.actualData,
+ currentTimeStep
+ )}
+ {showCompare && (
+ <div className="consumption-details-header compare">
+ {t('consumption.compared')}
+ {currentTimeStep === TimeStep.DAY && ' '}
+ {currentTimeStep !== TimeStep.DAY && ' AU '}
+ {convertDateToShortDateString(
+ currentDatachart.comparisonData,
+ currentTimeStep
+ )}
+ </div>
+ )}
+ </div>
+ <TotalConsumption fluidType={fluidType} />
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default ConsumptionDetails
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index 133e524a8df89357478c3c191de0eda89781ce94..d6d6373561ad2b59f0bf53ef7f4bbbca26d398bd 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -31,12 +31,7 @@ import {
import ReleaseNotesModal from './ReleaseNotesModal'
import './consumptionView.scss'
-interface ConsumptionViewProps {
- fluidType: FluidType
-}
-const ConsumptionView: React.FC<ConsumptionViewProps> = ({
- fluidType,
-}: ConsumptionViewProps) => {
+const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
const navigate = useNavigate()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
index a9ba2c020dda0c745ca857f037fbe9d0b35a44c6..7ceed80870fb15891436834e7a501565882e3ac6 100644
--- a/src/components/Home/FluidButton.tsx
+++ b/src/components/Home/FluidButton.tsx
@@ -19,10 +19,7 @@ interface FluidButtonProps {
isActive: boolean
}
-const FluidButton: React.FC<FluidButtonProps> = ({
- fluidType,
- isActive,
-}: FluidButtonProps) => {
+const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
const { t } = useI18n()
const navigate = useNavigate()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
diff --git a/src/components/Home/FluidButtons.tsx b/src/components/Home/FluidButtons.tsx
index 6a4d6ce5b7edd1990de94d594a09b21015f54bdc..62bcae8bfdbf25a7467e19f466f215151dca1b90 100644
--- a/src/components/Home/FluidButtons.tsx
+++ b/src/components/Home/FluidButtons.tsx
@@ -3,12 +3,7 @@ import React from 'react'
import FluidButton from './FluidButton'
import './fluidButtons.scss'
-interface FluidButtonsProps {
- activeFluid: FluidType
-}
-const FluidButtons: React.FC<FluidButtonsProps> = ({
- activeFluid,
-}: FluidButtonsProps) => {
+const FluidButtons = ({ activeFluid }: { activeFluid: FluidType }) => {
const orderedFluids = [
FluidType.MULTIFLUID,
FluidType.ELECTRICITY,
diff --git a/src/components/Home/ReleaseNotesModal.tsx b/src/components/Home/ReleaseNotesModal.tsx
index cc64fcf1bba2febeb47af4402a72d558e54943f9..13dac570ae33003d448fcaaaf5e2376182bfd6af 100644
--- a/src/components/Home/ReleaseNotesModal.tsx
+++ b/src/components/Home/ReleaseNotesModal.tsx
@@ -12,7 +12,7 @@ interface ReleaseNotesModalProps {
handleCloseClick: () => void
}
-const ReleaseNotesModal: React.FC<ReleaseNotesModalProps> = ({
+const ReleaseNotesModal = ({
open,
handleCloseClick,
}: ReleaseNotesModalProps) => {
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index ec1294a18137b6332cb63b40e5c2c8751a44c17e..f02c94ea6c13400fb9eb708714694d287d0b280f 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -17,8 +17,8 @@ import { KonnectorError } from 'enum/konnectorError.enum'
import { shuffle } from 'lodash'
import { Account } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import './konnectorModal.scss'
import KonnectorModalFooter from './KonnectorModalFooter'
+import './konnectorModal.scss'
interface KonnectorModalProps {
open: boolean
@@ -32,7 +32,7 @@ interface KonnectorModalProps {
account: Account | null
}
-const KonnectorModal: React.FC<KonnectorModalProps> = ({
+const KonnectorModal = ({
open,
isUpdating,
isLogging,
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 7ebc8434aa6c45f056c3a0649e1a710c0e95f307..7ce01b20503760e4d795c5dd0c7d0cb6de35c594 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -21,7 +21,7 @@ interface KonnectorModalFooterProps {
isUpdating: boolean
}
-const KonnectorModalFooter: React.FC<KonnectorModalFooterProps> = ({
+const KonnectorModalFooter = ({
state,
error,
handleCloseClick,
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 0086b5b92d4dacb73706d1f7bec25609891c4cfd..e5249c3d07572d46e7a8cb09ca4ab93b427bc76f 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -79,7 +79,7 @@ interface KonnectorViewerCardProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
+const KonnectorViewerCard = ({
fluidStatus,
isParam,
isDisconnected,
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 338d13f6ed7c2c728535c90154b7091fb3d972ac..8a67ad38cee09c38990f77aee618d032d6e77919 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -21,7 +21,7 @@ import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import './navBar.scss'
-export const Navbar: React.FC = () => {
+export const Navbar = () => {
const { t } = useI18n()
const {
challengeExplorationNotification,
diff --git a/src/components/Options/Accessibility/Accessibility.tsx b/src/components/Options/Accessibility/Accessibility.tsx
index 6bbb4be6c1cee42bb04b59bc5548190d9b833aef..9fe279c519ccd97586d99d965c15de73b5144d68 100644
--- a/src/components/Options/Accessibility/Accessibility.tsx
+++ b/src/components/Options/Accessibility/Accessibility.tsx
@@ -5,7 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
import '../GCU/gcuLink.scss'
-const Accessibility: React.FC = () => {
+const Accessibility = () => {
const { t } = useI18n()
return (
<div className="gcu-link-root">
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index 1e9df7f5b87b0d8ecab95efd714cdc04c99a3fae..253a24355d001e2aa329fcd96bb618c83037a714 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -1,193 +1,193 @@
-import {
- Accordion,
- AccordionDetails,
- AccordionSummary,
- Button,
-} from '@material-ui/core'
-import chevronDown from 'assets/icons/ico/chevron-down.svg'
-import exportIcon from 'assets/icons/ico/export.svg'
-import classNames from 'classnames'
-import ExportDoneModal from 'components/Export/exportDoneModal'
-import ExportLoadingModal from 'components/Export/exportLoadingModal'
-import ExportStartModal from 'components/Export/exportStartModal'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { remove } from 'lodash'
-import React, { useEffect, useMemo, useState } from 'react'
-import ConsumptionDataManager from 'services/consumption.service'
-import './exportData.scss'
-
-const ExportData: React.FC = () => {
- const { t } = useI18n()
- const client = useClient()
- const consumptionService = useMemo(
- () => new ConsumptionDataManager(client),
- [client]
- )
-
- const [isExportStartModal, setIsExportStartModal] = useState<boolean>(false)
- const [isExportLoadingModal, setIsExportLoadingModal] =
- useState<boolean>(false)
- const [isExportDoneModal, setIsExportDoneModal] = useState<boolean>(false)
- const [hasError, setHasError] = useState<boolean>(false)
- const [exportableFluids, setExportableFluids] = useState<FluidType[]>([])
- const [answer, setAnswer] = useState<FluidType[]>([])
-
- const [active, setActive] = useState<boolean>(false)
-
- const toggleAccordion = () => {
- setActive(prev => !prev)
- }
-
- const handleChange = (value: FluidType) => {
- const tempAnswer = [...answer]
- if (tempAnswer.includes(value)) {
- remove(tempAnswer, answer => answer === value)
- } else {
- tempAnswer.push(value)
- }
- setAnswer(tempAnswer)
- }
-
- useEffect(() => {
- let subscribed = true
- const getExportableFluids = async () => {
- const exportableFluidsData: FluidType[] =
- await consumptionService.getExportableFluids(
- [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
- TimeStep.MONTH
- )
- setExportableFluids(exportableFluidsData)
- setAnswer(exportableFluidsData)
- subscribed = false
- }
-
- if (subscribed) {
- getExportableFluids()
- }
- return () => {
- subscribed = false
- }
- }, [consumptionService])
-
- const fluidCheckbox = () =>
- exportableFluids.map((fluidType, key) => (
- <label
- key={key}
- className={classNames('checkbox', {
- ['answer-checked']: answer.includes(fluidType),
- })}
- >
- <input
- type={'checkbox'}
- value={fluidType}
- name={t('FLUID.' + FluidType[fluidType] + '.LABEL')}
- onChange={() => handleChange(fluidType)}
- checked={answer.includes(fluidType)}
- />
- {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
- </label>
- ))
-
- const handleDone = (e?: any) => {
- if (e) {
- setHasError(true)
- }
- setIsExportDoneModal(true)
- setIsExportLoadingModal(false)
- }
-
- return (
- <>
- <div className="export-option-root">
- <div className="export-option-content">
- <Accordion
- expanded={active}
- onChange={toggleAccordion}
- classes={{
- root: 'expansion-panel-root',
- }}
- >
- <AccordionSummary
- aria-label={t('profile_type.accessibility.button_toggle_export')}
- expandIcon={
- <Icon icon={chevronDown} size={16} className="accordion-icon" />
- }
- classes={{
- root: 'expansion-panel-summary',
- content: 'expansion-panel-content',
- }}
- >
- <Icon className="export-icon" icon={exportIcon} size={42} />
- <div className="text-16-normal accordion-title">
- {t('export.title_export')}
- </div>
- </AccordionSummary>
- <AccordionDetails
- classes={{
- root: 'expansion-panel-details',
- }}
- >
- <div className="text-15-normal content intro">
- {t('export.text1')}
- </div>
- <div className="text-16-bold content">
- {t('export.fluid_select')}
- </div>
-
- {exportableFluids.length === 0 ? (
- <div className="text-15-normal content intro">
- {t('export.no_data')}
- </div>
- ) : (
- <>
- {fluidCheckbox()}
- <Button
- aria-label={t('unsubscribe.button_accessibility')}
- onClick={() => setIsExportStartModal(true)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- type="submit"
- disabled={answer.length === 0}
- >
- {t('export.button_download')}
- </Button>
- </>
- )}
- </AccordionDetails>
- </Accordion>
- </div>
- </div>
- <ExportStartModal
- open={isExportStartModal}
- handleCloseClick={() => setIsExportStartModal(false)}
- handleDownloadClick={() => {
- setIsExportStartModal(false)
- setIsExportLoadingModal(true)
- }}
- />
- {isExportLoadingModal && (
- <ExportLoadingModal
- open={isExportLoadingModal}
- handleCloseClick={() => {
- setIsExportLoadingModal(false)
- }}
- handleDone={(e?: any): void => handleDone(e)}
- selectedFluids={answer}
- />
- )}
- <ExportDoneModal
- open={isExportDoneModal}
- error={hasError}
- handleCloseClick={() => setIsExportDoneModal(false)}
- />
- </>
- )
-}
-
-export default ExportData
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Button,
+} from '@material-ui/core'
+import chevronDown from 'assets/icons/ico/chevron-down.svg'
+import exportIcon from 'assets/icons/ico/export.svg'
+import classNames from 'classnames'
+import ExportDoneModal from 'components/Export/exportDoneModal'
+import ExportLoadingModal from 'components/Export/exportLoadingModal'
+import ExportStartModal from 'components/Export/exportStartModal'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { remove } from 'lodash'
+import React, { useEffect, useMemo, useState } from 'react'
+import ConsumptionDataManager from 'services/consumption.service'
+import './exportData.scss'
+
+const ExportData = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const consumptionService = useMemo(
+ () => new ConsumptionDataManager(client),
+ [client]
+ )
+
+ const [isExportStartModal, setIsExportStartModal] = useState<boolean>(false)
+ const [isExportLoadingModal, setIsExportLoadingModal] =
+ useState<boolean>(false)
+ const [isExportDoneModal, setIsExportDoneModal] = useState<boolean>(false)
+ const [hasError, setHasError] = useState<boolean>(false)
+ const [exportableFluids, setExportableFluids] = useState<FluidType[]>([])
+ const [answer, setAnswer] = useState<FluidType[]>([])
+
+ const [active, setActive] = useState<boolean>(false)
+
+ const toggleAccordion = () => {
+ setActive(prev => !prev)
+ }
+
+ const handleChange = (value: FluidType) => {
+ const tempAnswer = [...answer]
+ if (tempAnswer.includes(value)) {
+ remove(tempAnswer, answer => answer === value)
+ } else {
+ tempAnswer.push(value)
+ }
+ setAnswer(tempAnswer)
+ }
+
+ useEffect(() => {
+ let subscribed = true
+ const getExportableFluids = async () => {
+ const exportableFluidsData: FluidType[] =
+ await consumptionService.getExportableFluids(
+ [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
+ TimeStep.MONTH
+ )
+ setExportableFluids(exportableFluidsData)
+ setAnswer(exportableFluidsData)
+ subscribed = false
+ }
+
+ if (subscribed) {
+ getExportableFluids()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [consumptionService])
+
+ const fluidCheckbox = () =>
+ exportableFluids.map((fluidType, key) => (
+ <label
+ key={key}
+ className={classNames('checkbox', {
+ ['answer-checked']: answer.includes(fluidType),
+ })}
+ >
+ <input
+ type={'checkbox'}
+ value={fluidType}
+ name={t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ onChange={() => handleChange(fluidType)}
+ checked={answer.includes(fluidType)}
+ />
+ {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ </label>
+ ))
+
+ const handleDone = (e?: any) => {
+ if (e) {
+ setHasError(true)
+ }
+ setIsExportDoneModal(true)
+ setIsExportLoadingModal(false)
+ }
+
+ return (
+ <>
+ <div className="export-option-root">
+ <div className="export-option-content">
+ <Accordion
+ expanded={active}
+ onChange={toggleAccordion}
+ classes={{
+ root: 'expansion-panel-root',
+ }}
+ >
+ <AccordionSummary
+ aria-label={t('profile_type.accessibility.button_toggle_export')}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <Icon className="export-icon" icon={exportIcon} size={42} />
+ <div className="text-16-normal accordion-title">
+ {t('export.title_export')}
+ </div>
+ </AccordionSummary>
+ <AccordionDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ <div className="text-15-normal content intro">
+ {t('export.text1')}
+ </div>
+ <div className="text-16-bold content">
+ {t('export.fluid_select')}
+ </div>
+
+ {exportableFluids.length === 0 ? (
+ <div className="text-15-normal content intro">
+ {t('export.no_data')}
+ </div>
+ ) : (
+ <>
+ {fluidCheckbox()}
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => setIsExportStartModal(true)}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ type="submit"
+ disabled={answer.length === 0}
+ >
+ {t('export.button_download')}
+ </Button>
+ </>
+ )}
+ </AccordionDetails>
+ </Accordion>
+ </div>
+ </div>
+ <ExportStartModal
+ open={isExportStartModal}
+ handleCloseClick={() => setIsExportStartModal(false)}
+ handleDownloadClick={() => {
+ setIsExportStartModal(false)
+ setIsExportLoadingModal(true)
+ }}
+ />
+ {isExportLoadingModal && (
+ <ExportLoadingModal
+ open={isExportLoadingModal}
+ handleCloseClick={() => {
+ setIsExportLoadingModal(false)
+ }}
+ handleDone={(e?: any): void => handleDone(e)}
+ selectedFluids={answer}
+ />
+ )}
+ <ExportDoneModal
+ open={isExportDoneModal}
+ error={hasError}
+ handleCloseClick={() => setIsExportDoneModal(false)}
+ />
+ </>
+ )
+}
+
+export default ExportData
diff --git a/src/components/Options/GCU/GCULink.tsx b/src/components/Options/GCU/GCULink.tsx
index 4e63440137a272037746f71d31212f1f39f529e8..3fff26ec8500b8da8282068cdd8feef42ab5cc3b 100644
--- a/src/components/Options/GCU/GCULink.tsx
+++ b/src/components/Options/GCU/GCULink.tsx
@@ -1,39 +1,39 @@
-import Link from '@material-ui/core/Link'
-import GCUIcon from 'assets/icons/ico/gcu.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './gcuLink.scss'
-
-const GCULink: React.FC = () => {
- const { t } = useI18n()
- return (
- <div className="gcu-link-root">
- <div className="gcu-link-content">
- <Link
- className="gcu-link-card-link"
- component={RouterLink}
- to="/options/gcu"
- >
- <div className="card optionCard">
- <div className="gcu-link-card">
- <div className="gcu-link-card-content">
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon={GCUIcon}
- size={42}
- />
- <div className="gcu-link-card-content-title">
- {t('common.title_gcu')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default GCULink
+import Link from '@material-ui/core/Link'
+import GCUIcon from 'assets/icons/ico/gcu.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import './gcuLink.scss'
+
+const GCULink = () => {
+ const { t } = useI18n()
+ return (
+ <div className="gcu-link-root">
+ <div className="gcu-link-content">
+ <Link
+ className="gcu-link-card-link"
+ component={RouterLink}
+ to="/options/gcu"
+ >
+ <div className="card optionCard">
+ <div className="gcu-link-card">
+ <div className="gcu-link-card-content">
+ <StyledIcon
+ className="gcu-link-card-content-icon"
+ icon={GCUIcon}
+ size={42}
+ />
+ <div className="gcu-link-card-content-title">
+ {t('common.title_gcu')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default GCULink
diff --git a/src/components/Options/GCU/GCUView.tsx b/src/components/Options/GCU/GCUView.tsx
index 49439dd79c4a4a105c69035967d3ccd8fd8d3730..999dd89a81f7d9e778f1b4d088eb1839b2e6a73f 100644
--- a/src/components/Options/GCU/GCUView.tsx
+++ b/src/components/Options/GCU/GCUView.tsx
@@ -4,7 +4,7 @@ import Header from 'components/Header/Header'
import GCUContent from 'components/Options/GCU/GCUContent'
import React, { useCallback, useState } from 'react'
-const GCUView: React.FC = () => {
+const GCUView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = useCallback((height: number) => {
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index e42ea407a4b7a131f4ccfb2525a43e8a15ca8560..d463ce5213c874808dce1bed554589738d594d68 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -1,45 +1,45 @@
-import Link from '@material-ui/core/Link'
-import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { Dispatch } from 'react'
-import { useDispatch } from 'react-redux'
-import { AppActionsTypes } from 'store'
-import { openFeedbackModal } from 'store/modal/modal.slice'
-import './HelpLink.scss'
-
-const HelpLink: React.FC = () => {
- const { t } = useI18n()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
-
- return (
- <div
- className="help-root"
- onClick={() => dispatch(openFeedbackModal(true))}
- >
- <div className="help-content">
- <div className="help-header text-16-normal-uppercase">
- {t('help.title_help')}
- </div>
- <Link className="help-card-link">
- <div className="card optionCard">
- <div className="help-card">
- <div className="help-card-content">
- <StyledIcon
- className="help-card-content-icon"
- icon={QuestionMarkIcon}
- size={42}
- />
- <div className="help-card-content-title">
- {t('help.read_help')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default HelpLink
+import Link from '@material-ui/core/Link'
+import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { Dispatch } from 'react'
+import { useDispatch } from 'react-redux'
+import { AppActionsTypes } from 'store'
+import { openFeedbackModal } from 'store/modal/modal.slice'
+import './HelpLink.scss'
+
+const HelpLink = () => {
+ const { t } = useI18n()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+
+ return (
+ <div
+ className="help-root"
+ onClick={() => dispatch(openFeedbackModal(true))}
+ >
+ <div className="help-content">
+ <div className="help-header text-16-normal-uppercase">
+ {t('help.title_help')}
+ </div>
+ <Link className="help-card-link">
+ <div className="card optionCard">
+ <div className="help-card">
+ <div className="help-card-content">
+ <StyledIcon
+ className="help-card-content-icon"
+ icon={QuestionMarkIcon}
+ size={42}
+ />
+ <div className="help-card-content-title">
+ {t('help.read_help')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default HelpLink
diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
index c19f2bff78e1662cdf148e9c30e40ebdd56a0142..eba23d5b0b9e5b79016ca01453e24d9aa6298068 100644
--- a/src/components/Options/LegalNotice/LegalNoticeContent.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './legalNoticeView.scss'
-const LegalNoticeContent: React.FC = () => {
+const LegalNoticeContent = () => {
const { t } = useI18n()
return (
<>
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index 90c48a35dac9dd9a668869b9e9ed6b7d735e699b..5475686d5866eff333af781dbb4262a6f68c646e 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -1,52 +1,52 @@
-import Link from '@material-ui/core/Link'
-import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import React, { useCallback } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import UsageEventService from 'services/usageEvent.service'
-import './legalNoticeLink.scss'
-
-const LegalNoticeLink: React.FC = () => {
- const { t } = useI18n()
- const client = useClient()
- const emitNavEvent = useCallback(async () => {
- await UsageEventService.addEvent(client, {
- type: UsageEventType.NAVIGATION_EVENT,
- target: 'legalNotice',
- })
- }, [client])
- return (
- <div className="legal-notice-root">
- <div className="legal-notice-content">
- <div className="legal-notice-header text-16-normal-uppercase">
- {t('legal.title_legal')}
- </div>
- <Link
- className="legal-notice-card-link"
- component={RouterLink}
- to="/options/legalnotice"
- >
- <div className="card optionCard" onClick={emitNavEvent}>
- <div className="legal-notice-card">
- <div className="legal-notice-card-content">
- <StyledIcon
- className="legal-notice-card-content-icon"
- icon={LegalNoticeIcon}
- size={42}
- />
- <div className="legal-notice-card-content-title">
- {t('legal.read_legal')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default LegalNoticeLink
+import Link from '@material-ui/core/Link'
+import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import React, { useCallback } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import UsageEventService from 'services/usageEvent.service'
+import './legalNoticeLink.scss'
+
+const LegalNoticeLink = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const emitNavEvent = useCallback(async () => {
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.NAVIGATION_EVENT,
+ target: 'legalNotice',
+ })
+ }, [client])
+ return (
+ <div className="legal-notice-root">
+ <div className="legal-notice-content">
+ <div className="legal-notice-header text-16-normal-uppercase">
+ {t('legal.title_legal')}
+ </div>
+ <Link
+ className="legal-notice-card-link"
+ component={RouterLink}
+ to="/options/legalnotice"
+ >
+ <div className="card optionCard" onClick={emitNavEvent}>
+ <div className="legal-notice-card">
+ <div className="legal-notice-card-content">
+ <StyledIcon
+ className="legal-notice-card-content-icon"
+ icon={LegalNoticeIcon}
+ size={42}
+ />
+ <div className="legal-notice-card-content-title">
+ {t('legal.read_legal')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default LegalNoticeLink
diff --git a/src/components/Options/LegalNotice/LegalNoticeView.tsx b/src/components/Options/LegalNotice/LegalNoticeView.tsx
index 6f66c937f972ec37b0bb96b4ae15bd32b75150f6..cd7b6723a5498a27ed20706681863cee96b2e2b9 100644
--- a/src/components/Options/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeView.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useState } from 'react'
import LegalNoticeContent from './LegalNoticeContent'
import './legalNoticeView.scss'
-const LegalNoticeView: React.FC = () => {
+const LegalNoticeView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = useCallback((height: number) => {
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 04bf325167112608fd5994532ae21eddad8cbfd5..5ddd959112782634293eb4dc6c742254b649a7b6 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -4,7 +4,7 @@ import './matomoOptOut.scss'
declare let __PIWIK_TRACKER_URL__: string
-const MatomoOptOut: React.FC = () => {
+const MatomoOptOut = () => {
const { t } = useI18n()
const baseUrl = __PIWIK_TRACKER_URL__
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 8fd37c74a2cfd4f320954aa00290beb25027ca9e..baf6819f2a0d51d74d764ef10397e1041f650cc2 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -13,7 +13,7 @@ import ProfileTypeOptions from './ProfileTypeOptions/ProfileTypeOptions'
import ReportOptions from './ReportOptions/ReportOptions'
import Version from './Version/Version'
-const OptionsView: React.FC = () => {
+const OptionsView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index 72a98af3e38651d4a5183dcba9d805d6e2d2746d..79fab17416acdb05de78815e3c60dd48b7cd7a29 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -25,7 +25,7 @@ import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import './profileTypeOptions.scss'
-const ProfileTypeOptions: React.FC = () => {
+const ProfileTypeOptions = () => {
const { profile, profileType } = useSelector(
(state: AppStore) => state.ecolyo
)
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index b311b3aa81ba36268a772f545c1e682ad8eff322..f24ed8ad617ba3e00d17a6e691037208b78ba6ea 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -1,181 +1,181 @@
-import { Button } from '@material-ui/core'
-import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidState, FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
-import { Dataload, TimePeriod } from 'models'
-import React, { Dispatch, useCallback, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import ConsumptionDataManager from 'services/consumption.service'
-import { AppActionsTypes, AppStore } from 'store'
-import { updateProfile } from 'store/profile/profile.actions'
-import './reportOptions.scss'
-
-const ReportOptions: React.FC = () => {
- const { t } = useI18n()
- const client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const {
- global: { fluidStatus },
- profile,
- } = useSelector((state: AppStore) => state.ecolyo)
- const [maxDayData, setLastSemesterMaxDay] = useState<Dataload | null>(null)
-
- const updateProfileReport = async (value: boolean) => {
- dispatch(updateProfile({ sendAnalysisNotification: value }))
- }
-
- const updateProfileAlert = useCallback(
- async (value: boolean) => {
- dispatch(updateProfile({ sendConsumptionAlert: value }))
- },
- [dispatch]
- )
-
- const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
- if (e.target.value !== null && parseInt(e.target.value) > 0) {
- dispatch(
- updateProfile({ waterDailyConsumptionLimit: parseInt(e.target.value) })
- )
- } else {
- updateProfileAlert(false)
- }
- }
-
- const toggleAnalysisNotification = () => {
- profile.sendAnalysisNotification
- ? updateProfileReport(false)
- : updateProfileReport(true)
- }
-
- const handleAlertChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- e.target.checked ? updateProfileAlert(true) : updateProfileAlert(false)
- }
-
- useEffect(() => {
- let subscribed = true
- async function getMaxLoadData() {
- const timePeriod: TimePeriod = {
- startDate: DateTime.now().minus({ month: 6 }).startOf('month'),
- endDate: DateTime.now(),
- }
- const consumptionService = new ConsumptionDataManager(client)
- const lastSemesterMax = await consumptionService.getMaxLoad(
- timePeriod,
- TimeStep.DAY,
- [FluidType.WATER],
- undefined,
- false,
- true
- )
- if (lastSemesterMax) {
- setLastSemesterMaxDay(lastSemesterMax as Dataload)
- }
- }
- if (subscribed) {
- getMaxLoadData()
- }
- return () => {
- subscribed = false
- }
- }, [
- client,
- profile.sendConsumptionAlert,
- profile.waterDailyConsumptionLimit,
- updateProfileAlert,
- ])
- return (
- <div className="report-option-root">
- <div className="report-option-content">
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_bilan')}
- </div>
- {/* Monthly Report activation */}
- <div className="switch-container-bilan">
- <span className="switch-label text-16-normal">
- {t('profile.report.switch_label_bilan')}
- </span>
- <div className="button-container">
- <Button
- aria-label={t('unsubscribe.button_accessibility')}
- onClick={() => toggleAnalysisNotification()}
- variant={'contained'}
- classes={{
- root: 'btn-highlight',
- label: 'text-18-bold',
- }}
- type="submit"
- >
- {profile.sendAnalysisNotification
- ? t('profile.report.deactivate')
- : t('profile.report.activate')}
- </Button>
- </div>
- </div>
- {/* Consumption Alert activation */}
- {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.KONNECTOR_NOT_FOUND &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.ERROR_LOGIN_FAILED && (
- <>
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_alert')}
- </div>
- <div className="switch-container-alert">
- <StyledSwitch
- checked={profile.sendConsumptionAlert}
- onChange={handleAlertChange}
- inputProps={{
- 'aria-label': t(
- 'profile.accessibility.button_toggle_consumption_alert'
- ),
- }}
- />
- <span className="switch-label text-16-normal">
- {t('profile.report.switch_label_alert')}
- </span>
- </div>
- </>
- )}
- {profile.sendConsumptionAlert && (
- <div className="alert-inputs-display">
- <div className="alert-input-row">
- <div className="head text-16-normal">
- {t('profile.report.input_label_alert')}
- </div>
- <div className="switch-container-alert">
- <input
- className="input-style"
- type={'number'}
- defaultValue={
- profile.waterDailyConsumptionLimit === 0
- ? ''
- : profile.waterDailyConsumptionLimit
- }
- onBlur={setWaterLimit}
- aria-label={t(
- 'profile.accessibility.input_water_alert_report'
- )}
- inputMode="numeric"
- />
- <span className="switch-label text-16-normal">L</span>
- </div>
- </div>
- {maxDayData && (
- <div className="alert-input-subtext">
- {t('profile.report.input_label_subtext_alert')}
- {Math.round(maxDayData.value)}
- {' L'}
- </div>
- )}
- </div>
- )}
- </div>
- </div>
- )
-}
-
-export default ReportOptions
+import { Button } from '@material-ui/core'
+import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidState, FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
+import { Dataload, TimePeriod } from 'models'
+import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import ConsumptionDataManager from 'services/consumption.service'
+import { AppActionsTypes, AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
+import './reportOptions.scss'
+
+const ReportOptions = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const {
+ global: { fluidStatus },
+ profile,
+ } = useSelector((state: AppStore) => state.ecolyo)
+ const [maxDayData, setLastSemesterMaxDay] = useState<Dataload | null>(null)
+
+ const updateProfileReport = async (value: boolean) => {
+ dispatch(updateProfile({ sendAnalysisNotification: value }))
+ }
+
+ const updateProfileAlert = useCallback(
+ async (value: boolean) => {
+ dispatch(updateProfile({ sendConsumptionAlert: value }))
+ },
+ [dispatch]
+ )
+
+ const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
+ if (e.target.value !== null && parseInt(e.target.value) > 0) {
+ dispatch(
+ updateProfile({ waterDailyConsumptionLimit: parseInt(e.target.value) })
+ )
+ } else {
+ updateProfileAlert(false)
+ }
+ }
+
+ const toggleAnalysisNotification = () => {
+ profile.sendAnalysisNotification
+ ? updateProfileReport(false)
+ : updateProfileReport(true)
+ }
+
+ const handleAlertChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ e.target.checked ? updateProfileAlert(true) : updateProfileAlert(false)
+ }
+
+ useEffect(() => {
+ let subscribed = true
+ async function getMaxLoadData() {
+ const timePeriod: TimePeriod = {
+ startDate: DateTime.now().minus({ month: 6 }).startOf('month'),
+ endDate: DateTime.now(),
+ }
+ const consumptionService = new ConsumptionDataManager(client)
+ const lastSemesterMax = await consumptionService.getMaxLoad(
+ timePeriod,
+ TimeStep.DAY,
+ [FluidType.WATER],
+ undefined,
+ false,
+ true
+ )
+ if (lastSemesterMax) {
+ setLastSemesterMaxDay(lastSemesterMax as Dataload)
+ }
+ }
+ if (subscribed) {
+ getMaxLoadData()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [
+ client,
+ profile.sendConsumptionAlert,
+ profile.waterDailyConsumptionLimit,
+ updateProfileAlert,
+ ])
+ return (
+ <div className="report-option-root">
+ <div className="report-option-content">
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_bilan')}
+ </div>
+ {/* Monthly Report activation */}
+ <div className="switch-container-bilan">
+ <span className="switch-label text-16-normal">
+ {t('profile.report.switch_label_bilan')}
+ </span>
+ <div className="button-container">
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => toggleAnalysisNotification()}
+ variant={'contained'}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ type="submit"
+ >
+ {profile.sendAnalysisNotification
+ ? t('profile.report.deactivate')
+ : t('profile.report.activate')}
+ </Button>
+ </div>
+ </div>
+ {/* Consumption Alert activation */}
+ {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
+ fluidStatus[FluidType.WATER].status !==
+ FluidState.KONNECTOR_NOT_FOUND &&
+ fluidStatus[FluidType.WATER].status !==
+ FluidState.ERROR_LOGIN_FAILED && (
+ <>
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <StyledSwitch
+ checked={profile.sendConsumptionAlert}
+ onChange={handleAlertChange}
+ inputProps={{
+ 'aria-label': t(
+ 'profile.accessibility.button_toggle_consumption_alert'
+ ),
+ }}
+ />
+ <span className="switch-label text-16-normal">
+ {t('profile.report.switch_label_alert')}
+ </span>
+ </div>
+ </>
+ )}
+ {profile.sendConsumptionAlert && (
+ <div className="alert-inputs-display">
+ <div className="alert-input-row">
+ <div className="head text-16-normal">
+ {t('profile.report.input_label_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <input
+ className="input-style"
+ type={'number'}
+ defaultValue={
+ profile.waterDailyConsumptionLimit === 0
+ ? ''
+ : profile.waterDailyConsumptionLimit
+ }
+ onBlur={setWaterLimit}
+ aria-label={t(
+ 'profile.accessibility.input_water_alert_report'
+ )}
+ inputMode="numeric"
+ />
+ <span className="switch-label text-16-normal">L</span>
+ </div>
+ </div>
+ {maxDayData && (
+ <div className="alert-input-subtext">
+ {t('profile.report.input_label_subtext_alert')}
+ {Math.round(maxDayData.value)}
+ {' L'}
+ </div>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+export default ReportOptions
diff --git a/src/components/Options/Unsubscribe/UnSubscribe.tsx b/src/components/Options/Unsubscribe/UnSubscribe.tsx
index 8b13800328c9a8b700ea825730da73c886855e2b..1ce8beeaae6f58656ba78f755aec99863aeb804f 100644
--- a/src/components/Options/Unsubscribe/UnSubscribe.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.tsx
@@ -12,7 +12,7 @@ import { AppActionsTypes } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
import './unSubscribe.scss'
-const UnSubscribe: React.FC = () => {
+const UnSubscribe = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
diff --git a/src/components/Options/Version/Version.tsx b/src/components/Options/Version/Version.tsx
index 043b118826e19b7f95eafc562edddee5ef9dc803..151b8189fb13023d79fa2aff723f78d4e15ae65f 100644
--- a/src/components/Options/Version/Version.tsx
+++ b/src/components/Options/Version/Version.tsx
@@ -2,7 +2,7 @@ import { Client, useClient } from 'cozy-client'
import React from 'react'
import './version.scss'
-const Version: React.FC = () => {
+const Version = () => {
const client: Client = useClient()
return (
<div className="version-root text-14-normal">
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index 3e449f713934ae6f63d3ad17c0a21f0f7a7abd60..59d4c7842b84cbee2a94db15aaed0791087312ae 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -17,7 +17,7 @@ interface PartnerIssueModalProps {
handleCloseClick: (fluidType: FluidType) => void
}
-const PartnerIssueModal: React.FC<PartnerIssueModalProps> = ({
+const PartnerIssueModal = ({
open,
issuedFluid,
handleCloseClick,
diff --git a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 998cb8fb79e2d4353bfd5cfb230b8a25e5be3e58..d5af35ce3f974fba88a3ab4f929fa1a0c3e5ce88 100644
--- a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -14,7 +14,7 @@ interface FluidPerformanceIndicatorProps {
comparisonDate: DateTime
}
-const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
+const FluidPerformanceIndicator = ({
performanceIndicator,
fluidType,
comparisonDate,
diff --git a/src/components/ProfileType/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished.tsx
index 56b7def6f600f81cc901450434de32f905998102..c47d58667093a21e73439766aeaff0f0fb7f25f3 100644
--- a/src/components/ProfileType/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished.tsx
@@ -22,9 +22,7 @@ import { AppActionsTypes, AppStore } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
import { setProfileType } from 'store/profileType/profileType.slice'
-const ProfileTypeFinished: React.FC<{ profileType: ProfileType }> = ({
- profileType,
-}) => {
+const ProfileTypeFinished = ({ profileType }: { profileType: ProfileType }) => {
const { t } = useI18n()
const location = useLocation()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/ProfileType/ProfileTypeFormDateSelection.tsx b/src/components/ProfileType/ProfileTypeFormDateSelection.tsx
index ff4334beb9c393739cb813fa4bd5c2caa2e746ec..d9b203f0cc59a06ce30e2893d5158875694bfb66 100644
--- a/src/components/ProfileType/ProfileTypeFormDateSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormDateSelection.tsx
@@ -26,9 +26,7 @@ interface SelectionMonth {
value: string
}
-const ProfileTypeFormDateSelection: React.FC<
- ProfileTypeFormDateSelectionProps
-> = ({
+const ProfileTypeFormDateSelection = ({
step,
profileType,
answerType,
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
index e6e3d8c085c66f520d32e8eabc411128f6cfc6cd..95c275ca6ed38d8739724fe4e400e87fb8f930c0 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
@@ -19,7 +19,7 @@ interface ProfileTypeFormMultiChoiceProps {
setPreviousStep: () => void
}
-const ProfileTypeFormMultiChoice: React.FC<ProfileTypeFormMultiChoiceProps> = ({
+const ProfileTypeFormMultiChoice = ({
step,
viewedStep,
currentProfileType,
diff --git a/src/components/ProfileType/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber.tsx
index 269c8e074120622dcd786cce27f4fbf2bc5e63c0..2b700fedc1d03328846830491e6e6db9e0dbf3c6 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber.tsx
@@ -21,7 +21,7 @@ interface ProfileTypeFormNumberProps {
setPreviousStep: () => void
}
-const ProfileTypeFormNumber: React.FC<ProfileTypeFormNumberProps> = ({
+const ProfileTypeFormNumber = ({
step,
viewedStep,
currentProfileType,
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
index efc734ea7041dc1f24676726a5892f014fb9c427..034e8bde4ea6aeb0e360891e97308b93bb5b6a94 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
@@ -22,9 +22,7 @@ interface ProfileTypeFormNumberSelectionProps {
setPreviousStep: () => void
}
-const ProfileTypeFormNumberSelection: React.FC<
- ProfileTypeFormNumberSelectionProps
-> = ({
+const ProfileTypeFormNumberSelection = ({
step,
viewedStep,
currentProfileType,
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx
index 51c8d8d7e657f15a1a6b68144d7470d5010e2eaa..85f3a0e17801a9d517d538f95cbc7c5ae9a8b105 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx
@@ -23,9 +23,7 @@ interface ProfileTypeFormSingleChoiceProps {
setPreviousStep: () => void
}
-const ProfileTypeFormSingleChoice: React.FC<
- ProfileTypeFormSingleChoiceProps
-> = ({
+const ProfileTypeFormSingleChoice = ({
step,
viewedStep,
currentProfileType,
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 646110a21d59454e1f0839ddee7d036cd26d43af..f5c18d2bc5a4d3812e6d8e4e499e1a20a887baf5 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -32,7 +32,7 @@ import ProfileTypeFormService from 'services/profileTypeForm.service'
import { AppStore } from 'store'
import ProfileTypeFormDateSelection from './ProfileTypeFormDateSelection'
-const ProfileTypeView: React.FC = () => {
+const ProfileTypeView = () => {
const { profile, profileType, profileEcogesture } = useSelector(
(state: AppStore) => state.ecolyo
)
diff --git a/src/components/Quiz/QuizBegin.tsx b/src/components/Quiz/QuizBegin.tsx
index 375bbcc63e01c221e9e4157614c755e4640521e7..5ba3ea40ab895c1b1c6999bb9b4e2fe586a78b76 100644
--- a/src/components/Quiz/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin.tsx
@@ -1,65 +1,59 @@
-import Button from '@material-ui/core/Button'
-import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
-import StarsContainer from 'components/Challenge/StarsContainer'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { UserChallenge } from 'models'
-import React, { Dispatch } from 'react'
-import { useDispatch } from 'react-redux'
-import ChallengeService from 'services/challenge.service'
-import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.slice'
-import './quizBegin.scss'
-
-interface QuizBeginProps {
- userChallenge: UserChallenge
-}
-
-const QuizBegin: React.FC<QuizBeginProps> = ({
- userChallenge,
-}: QuizBeginProps) => {
- const client: Client = useClient()
- const { t } = useI18n()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const launchQuiz = async () => {
- const challengeService: ChallengeService = new ChallengeService(client)
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_START
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }
-
- return (
- <div className="quiz-container">
- <div className="quiz-begin-container">
- <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
- <StarsContainer
- result={userChallenge.progress.quizProgress}
- isQuizBegin={true}
- />
-
- <div className="quiz-explanation text-18-bold">
- {t('quiz.explanation')}
- </div>
- <div className="button-start">
- <Button
- aria-label={t('duel.accessibility.button_start_quiz')}
- onClick={launchQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.button_start')}
- </Button>
- </div>
- </div>
- </div>
- )
-}
-
-export default QuizBegin
+import Button from '@material-ui/core/Button'
+import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
+import StarsContainer from 'components/Challenge/StarsContainer'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { Dispatch } from 'react'
+import { useDispatch } from 'react-redux'
+import ChallengeService from 'services/challenge.service'
+import { AppActionsTypes } from 'store'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import './quizBegin.scss'
+
+const QuizBegin = ({ userChallenge }: { userChallenge: UserChallenge }) => {
+ const client: Client = useClient()
+ const { t } = useI18n()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const launchQuiz = async () => {
+ const challengeService: ChallengeService = new ChallengeService(client)
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_START
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }
+
+ return (
+ <div className="quiz-container">
+ <div className="quiz-begin-container">
+ <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
+ <StarsContainer
+ result={userChallenge.progress.quizProgress}
+ isQuizBegin={true}
+ />
+
+ <div className="quiz-explanation text-18-bold">
+ {t('quiz.explanation')}
+ </div>
+ <div className="button-start">
+ <Button
+ aria-label={t('duel.accessibility.button_start_quiz')}
+ onClick={launchQuiz}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel.button_start')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default QuizBegin
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index 90369f131dd56ae7c2ed324f8cb62b7aa5ca4f74..1c4efae265ba27fc645e474a42e8bc20353c9ac6 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -24,7 +24,7 @@ interface QuizCustomQuestionContent {
isLoading: boolean
}
-const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
+const QuizCustomQuestionContent = ({
userChallenge,
goBack,
question,
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index f11e26b73177437144e975e510cf57f81a745652..f1f1d432d14670f0fe56b6bbe5ecd2b1830c936c 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -16,7 +16,7 @@ interface QuizExplanationModalProps {
handleCloseClick: () => void
}
-const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
+const QuizExplanationModal = ({
open,
answerIndex,
question,
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index 6c44d04492e013ed4cd31be435be8023f787839a..e3abbcf0ae72a04aca396c055a72e576237c731d 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -1,107 +1,101 @@
-import Button from '@material-ui/core/Button'
-import starResult from 'assets/icons/visu/quiz/starResult.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { UserChallenge } from 'models'
-import React, { Dispatch, useCallback, useMemo } from 'react'
-import { useDispatch } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import ChallengeService from 'services/challenge.service'
-import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.slice'
-import './quizFinish.scss'
-
-interface QuizFinishProps {
- userChallenge: UserChallenge
-}
-
-const QuizFinish: React.FC<QuizFinishProps> = ({
- userChallenge,
-}: QuizFinishProps) => {
- const client: Client = useClient()
- const { t } = useI18n()
- const navigate = useNavigate()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const challengeService: ChallengeService = useMemo(
- () => new ChallengeService(client),
- [client]
- )
-
- const retryQuiz = useCallback(async () => {
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_RESET
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }, [dispatch, userChallenge, challengeService])
-
- const goBack = async () => {
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_UPDATE,
- userChallenge.quiz
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- navigate('/challenges')
- }
- return (
- <div className="quiz-container">
- <div className="quiz-finish-container">
- <div>
- <div className="score-final-title">{t('quiz.score_final')}</div>
- <div className="score-final">
- <span>{userChallenge.quiz.result}</span> / 5
- </div>
- <div className="score-label">{t('quiz.earn')}</div>
- <div className="score-stars">
- {userChallenge.quiz.result}
- <StyledIcon className="quiz-icon" icon={starResult} size={30} />
- </div>
- </div>
- {userChallenge.quiz.result === 5 ? (
- <div className="button-start">
- <Button
- aria-label={t('quiz.accessibility.button_end_quiz')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_end_quiz')}
- </Button>
- </div>
- ) : (
- <div className="button-start">
- <Button
- aria-label={t('quiz.accessibility.button_go_back')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_go_back')}
- </Button>
- <Button
- aria-label={t('quiz.accessibility.button_try_again')}
- onClick={retryQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_try_again')}
- </Button>
- </div>
- )}
- </div>
- </div>
- )
-}
-
-export default QuizFinish
+import Button from '@material-ui/core/Button'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { Dispatch, useCallback, useMemo } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import ChallengeService from 'services/challenge.service'
+import { AppActionsTypes } from 'store'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import './quizFinish.scss'
+
+const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
+ const client: Client = useClient()
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const challengeService: ChallengeService = useMemo(
+ () => new ChallengeService(client),
+ [client]
+ )
+
+ const retryQuiz = useCallback(async () => {
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_RESET
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }, [dispatch, userChallenge, challengeService])
+
+ const goBack = async () => {
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ userChallenge.quiz
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ navigate('/challenges')
+ }
+ return (
+ <div className="quiz-container">
+ <div className="quiz-finish-container">
+ <div>
+ <div className="score-final-title">{t('quiz.score_final')}</div>
+ <div className="score-final">
+ <span>{userChallenge.quiz.result}</span> / 5
+ </div>
+ <div className="score-label">{t('quiz.earn')}</div>
+ <div className="score-stars">
+ {userChallenge.quiz.result}
+ <StyledIcon className="quiz-icon" icon={starResult} size={30} />
+ </div>
+ </div>
+ {userChallenge.quiz.result === 5 ? (
+ <div className="button-start">
+ <Button
+ aria-label={t('quiz.accessibility.button_end_quiz')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_end_quiz')}
+ </Button>
+ </div>
+ ) : (
+ <div className="button-start">
+ <Button
+ aria-label={t('quiz.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_go_back')}
+ </Button>
+ <Button
+ aria-label={t('quiz.accessibility.button_try_again')}
+ onClick={retryQuiz}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_try_again')}
+ </Button>
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+export default QuizFinish
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index 24009e287ce6b0cd4cccea6c3a4745b980f8930b..b433733c0755e9337c4e57f985f9e26d6ece2ba3 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -9,13 +9,7 @@ import QuizService from 'services/quiz.service'
import { AppStore } from 'store'
import './quizQuestion.scss'
-interface QuizQuestion {
- userChallenge: UserChallenge
-}
-
-const QuizQuestion: React.FC<QuizQuestion> = ({
- userChallenge,
-}: QuizQuestion) => {
+const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const questionsIsLocked: boolean = userChallenge.quiz.questions.some(
answer => answer.result == 0
)
diff --git a/src/components/Quiz/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestionContent.tsx
index cf2b10172dcdfe5c6135556166bc559e81ad7b63..3007c8cc292541e4bbbbec3f353aaf3f906fbc63 100644
--- a/src/components/Quiz/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestionContent.tsx
@@ -1,141 +1,141 @@
-import Button from '@material-ui/core/Button'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { Answer, UserChallenge, UserQuiz } from 'models'
-import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ChallengeService from 'services/challenge.service'
-import QuizService from 'services/quiz.service'
-import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.slice'
-import './quizQuestion.scss'
-
-interface QuizQuestionContent {
- userChallenge: UserChallenge
- setIsCustomQuest: Dispatch<SetStateAction<boolean>>
- goBack: () => void
-}
-
-const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
- userChallenge,
- setIsCustomQuest,
- goBack,
-}: QuizQuestionContent) => {
- const { t } = useI18n()
- const questionIndexLocked = userChallenge.quiz.questions.findIndex(
- answer => answer.result == 0
- )
- const [userChoice, setUserChoice] = useState<string>('')
- const [openModal, setOpenModal] = useState<boolean>(false)
- const [answerIndex, setAnswerIndex] = useState<number>(0)
- const [questionIndex, setQuestionIndex] =
- useState<number>(questionIndexLocked)
-
- const client: Client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
-
- const quizService: QuizService = new QuizService(client)
- const challengeService: ChallengeService = new ChallengeService(client)
-
- const validateQuestion = async () => {
- const resultIndex: number = userChallenge.quiz.questions[
- questionIndex
- ].answers.findIndex(answer => answer.answerLabel === userChoice)
- const result: Answer[] = userChallenge.quiz.questions[
- questionIndex
- ].answers.filter(answer => answer.answerLabel === userChoice)
- setAnswerIndex(resultIndex)
- setOpenModal(true)
- const quizUpdated: UserQuiz = await quizService.updateUserQuiz(
- userChallenge.quiz,
- result[0].isTrue,
- questionIndex
- )
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_UPDATE,
- quizUpdated
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }
-
- const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- setUserChoice(e.target.value)
- }
- const goNextQuestion = useCallback(() => {
- setUserChoice('')
- setOpenModal(false)
- if (questionIndex === userChallenge.quiz.questions.length - 1) {
- setIsCustomQuest(true)
- }
- if (questionIndex !== userChallenge.quiz.questions.length - 1) {
- setQuestionIndex(questionIndex + 1)
- }
- }, [
- questionIndex,
- setIsCustomQuest,
- setQuestionIndex,
- setUserChoice,
- setOpenModal,
- userChallenge.quiz.questions.length,
- ])
-
- return (
- <div className="quiz-container">
- <div className="question-container">
- <StyledIconButton
- className="btn-back"
- icon={CloseIcon}
- onClick={goBack}
- />
- <p className="index-question">{questionIndex + 1}/5</p>
- <p className="question text-18-bold">
- {userChallenge.quiz.questions[questionIndex].questionLabel}
- </p>
- {userChallenge.quiz.questions[questionIndex].answers.map(
- (answer, index) => (
- <div className="answer" key={index}>
- <input
- type="radio"
- id={`answer${index}`}
- value={answer.answerLabel}
- onChange={handleChange}
- checked={userChoice === answer.answerLabel}
- />
- <label htmlFor={`answer${index}`} className="text-16-bold">
- {answer.answerLabel}
- </label>
- </div>
- )
- )}
- </div>
- <Button
- aria-label={t('quiz.accessibility.button_validate')}
- onClick={validateQuestion}
- disabled={!userChoice}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_validate')}
- </Button>
- {openModal && (
- <QuizExplanationModal
- open={openModal}
- answerIndex={answerIndex}
- question={userChallenge.quiz.questions[questionIndex]}
- goNext={goNextQuestion}
- handleCloseClick={() => setOpenModal(false)}
- />
- )}
- </div>
- )
-}
-
-export default QuizQuestionContent
+import Button from '@material-ui/core/Button'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { Answer, UserChallenge, UserQuiz } from 'models'
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ChallengeService from 'services/challenge.service'
+import QuizService from 'services/quiz.service'
+import { AppActionsTypes } from 'store'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import './quizQuestion.scss'
+
+interface QuizQuestionContent {
+ userChallenge: UserChallenge
+ setIsCustomQuest: Dispatch<SetStateAction<boolean>>
+ goBack: () => void
+}
+
+const QuizQuestionContent = ({
+ userChallenge,
+ setIsCustomQuest,
+ goBack,
+}: QuizQuestionContent) => {
+ const { t } = useI18n()
+ const questionIndexLocked = userChallenge.quiz.questions.findIndex(
+ answer => answer.result == 0
+ )
+ const [userChoice, setUserChoice] = useState<string>('')
+ const [openModal, setOpenModal] = useState<boolean>(false)
+ const [answerIndex, setAnswerIndex] = useState<number>(0)
+ const [questionIndex, setQuestionIndex] =
+ useState<number>(questionIndexLocked)
+
+ const client: Client = useClient()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+
+ const quizService: QuizService = new QuizService(client)
+ const challengeService: ChallengeService = new ChallengeService(client)
+
+ const validateQuestion = async () => {
+ const resultIndex: number = userChallenge.quiz.questions[
+ questionIndex
+ ].answers.findIndex(answer => answer.answerLabel === userChoice)
+ const result: Answer[] = userChallenge.quiz.questions[
+ questionIndex
+ ].answers.filter(answer => answer.answerLabel === userChoice)
+ setAnswerIndex(resultIndex)
+ setOpenModal(true)
+ const quizUpdated: UserQuiz = await quizService.updateUserQuiz(
+ userChallenge.quiz,
+ result[0].isTrue,
+ questionIndex
+ )
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ quizUpdated
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }
+
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setUserChoice(e.target.value)
+ }
+ const goNextQuestion = useCallback(() => {
+ setUserChoice('')
+ setOpenModal(false)
+ if (questionIndex === userChallenge.quiz.questions.length - 1) {
+ setIsCustomQuest(true)
+ }
+ if (questionIndex !== userChallenge.quiz.questions.length - 1) {
+ setQuestionIndex(questionIndex + 1)
+ }
+ }, [
+ questionIndex,
+ setIsCustomQuest,
+ setQuestionIndex,
+ setUserChoice,
+ setOpenModal,
+ userChallenge.quiz.questions.length,
+ ])
+
+ return (
+ <div className="quiz-container">
+ <div className="question-container">
+ <StyledIconButton
+ className="btn-back"
+ icon={CloseIcon}
+ onClick={goBack}
+ />
+ <p className="index-question">{questionIndex + 1}/5</p>
+ <p className="question text-18-bold">
+ {userChallenge.quiz.questions[questionIndex].questionLabel}
+ </p>
+ {userChallenge.quiz.questions[questionIndex].answers.map(
+ (answer, index) => (
+ <div className="answer" key={index}>
+ <input
+ type="radio"
+ id={`answer${index}`}
+ value={answer.answerLabel}
+ onChange={handleChange}
+ checked={userChoice === answer.answerLabel}
+ />
+ <label htmlFor={`answer${index}`} className="text-16-bold">
+ {answer.answerLabel}
+ </label>
+ </div>
+ )
+ )}
+ </div>
+ <Button
+ aria-label={t('quiz.accessibility.button_validate')}
+ onClick={validateQuestion}
+ disabled={!userChoice}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_validate')}
+ </Button>
+ {openModal && (
+ <QuizExplanationModal
+ open={openModal}
+ answerIndex={answerIndex}
+ question={userChallenge.quiz.questions[questionIndex]}
+ goNext={goNextQuestion}
+ handleCloseClick={() => setOpenModal(false)}
+ />
+ )}
+ </div>
+ )
+}
+
+export default QuizQuestionContent
diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx
index 71388bcb52ad7636ecb3c6abc5495f0796aa87ff..4888e43e1e9d84b8fdd285290cbc3453a39dee07 100644
--- a/src/components/Quiz/QuizView.tsx
+++ b/src/components/Quiz/QuizView.tsx
@@ -1,51 +1,51 @@
-import Content from 'components/Content/Content'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import { UserQuizState } from 'enum/userQuiz.enum'
-import { UserChallenge } from 'models'
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import QuizBegin from './QuizBegin'
-import QuizFinish from './QuizFinish'
-import QuizQuestion from './QuizQuestion'
-
-const QuizView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
-
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
-
- const renderQuiz = (challenge: UserChallenge) => {
- switch (challenge.quiz.state) {
- case UserQuizState.UNLOCKED:
- return <QuizBegin userChallenge={challenge} />
- case UserQuizState.ONGOING:
- return <QuizQuestion userChallenge={challenge} />
- case UserQuizState.DONE:
- return <QuizFinish userChallenge={challenge} />
- default:
- return <QuizBegin userChallenge={challenge} />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'common.title_quiz'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_quiz'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- {currentChallenge && renderQuiz(currentChallenge)}
- </Content>
- </>
- )
-}
-
-export default QuizView
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { UserQuizState } from 'enum/userQuiz.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import QuizBegin from './QuizBegin'
+import QuizFinish from './QuizFinish'
+import QuizQuestion from './QuizQuestion'
+
+const QuizView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+
+ const renderQuiz = (challenge: UserChallenge) => {
+ switch (challenge.quiz.state) {
+ case UserQuizState.UNLOCKED:
+ return <QuizBegin userChallenge={challenge} />
+ case UserQuizState.ONGOING:
+ return <QuizQuestion userChallenge={challenge} />
+ case UserQuizState.DONE:
+ return <QuizFinish userChallenge={challenge} />
+ default:
+ return <QuizBegin userChallenge={challenge} />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_quiz'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_quiz'}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ {currentChallenge && renderQuiz(currentChallenge)}
+ </Content>
+ </>
+ )
+}
+
+export default QuizView
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 851d878b85b4ebbf5b244d1d4d4d805099538fa0..f795d67a8ad84ed5ba1844b6b413476eeea30dcf 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,109 +1,106 @@
-import ActionView from 'components/Action/ActionView'
-import ChallengeView from 'components/Challenge/ChallengeView'
-import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView'
-import DuelView from 'components/Duel/DuelView'
-import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
-import EcogestureSelection from 'components/EcogestureSelection/EcogestureSelection'
-import ExplorationView from 'components/Exploration/ExplorationView'
-import Loader from 'components/Loader/Loader'
-import UnSubscribe from 'components/Options/Unsubscribe/UnSubscribe'
-import QuizView from 'components/Quiz/QuizView'
-import TermsView from 'components/Terms/TermsView'
-import { FluidType } from 'enum/fluid.enum'
-import { TermsStatus } from 'models'
-import React, { lazy, Suspense } from 'react'
-import { Navigate, Route, Routes } from 'react-router-dom'
-
-const ConsumptionView = lazy(() => import('components/Home/ConsumptionView'))
-const EcogestureView = lazy(
- () => import('components/Ecogesture/EcogestureView')
-)
-const SingleEcogesture = lazy(
- () => import('components/Ecogesture/SingleEcogesture')
-)
-const OptionsView = lazy(() => import('components/Options/OptionsView'))
-const LegalNoticeView = lazy(
- () => import('components/Options/LegalNotice/LegalNoticeView')
-)
-const GCUView = lazy(() => import('components/Options/GCU/GCUView'))
-const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
-const ProfileTypeView = lazy(
- () => import('components/ProfileType/ProfileTypeView')
-)
-
-interface RouteProps {
- termsStatus: TermsStatus
-}
-const AppRoutes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
- return (
- <Suspense
- fallback={
- <div className="loaderContainer">
- <Loader />
- </div>
- }
- >
- <Routes>
- {!termsStatus.accepted && (
- <>
- <Route path="/terms" element={<TermsView />} />
- <Route path="*" element={<Navigate replace to="/terms" />} />
- </>
- )}
- {termsStatus.accepted && (
- <>
- <Route
- path="/consumption/electricity"
- element={<ConsumptionView fluidType={FluidType.ELECTRICITY} />}
- />
- <Route
- path="/consumption/water"
- element={<ConsumptionView fluidType={FluidType.WATER} />}
- />
- <Route
- path="/consumption/gas"
- element={<ConsumptionView fluidType={FluidType.GAS} />}
- />
- <Route
- path="/consumption"
- element={<ConsumptionView fluidType={FluidType.MULTIFLUID} />}
- />
- <Route path="/sge-connect" element={<SgeConnectView />} />
- <Route path="/challenges/duel" element={<DuelView />} />
- <Route path="/challenges/quiz" element={<QuizView />} />
- <Route
- path="/challenges/exploration"
- element={<ExplorationView />}
- />
- <Route path="/challenges/action" element={<ActionView />} />
- <Route path="/challenges/" element={<ChallengeView />} />
- <Route path="/ecogesture-form" element={<EcogestureFormView />} />
- <Route
- path="/ecogesture-selection"
- element={<EcogestureSelection />}
- />
- <Route
- path="/ecogesture/:ecogestureID/:tab"
- element={<SingleEcogesture />}
- />
- <Route
- path="/ecogesture/:ecogestureID"
- element={<SingleEcogesture />}
- />
- <Route path="/ecogestures" element={<EcogestureView />} />
- <Route path="/options/legalnotice" element={<LegalNoticeView />} />
- <Route path="/options/gcu" element={<GCUView />} />
- <Route path="/options/:connectParam" element={<OptionsView />} />
- <Route path="/options" element={<OptionsView />} />
- <Route path="/analysis" element={<AnalysisView />} />
- <Route path="/profiletype" element={<ProfileTypeView />} />
- <Route path="/unsubscribe" element={<UnSubscribe />} />
- <Route path="*" element={<Navigate replace to="/consumption" />} />
- </>
- )}
- </Routes>
- </Suspense>
- )
-}
-
-export default AppRoutes
+import ActionView from 'components/Action/ActionView'
+import ChallengeView from 'components/Challenge/ChallengeView'
+import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView'
+import DuelView from 'components/Duel/DuelView'
+import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
+import EcogestureSelection from 'components/EcogestureSelection/EcogestureSelection'
+import ExplorationView from 'components/Exploration/ExplorationView'
+import Loader from 'components/Loader/Loader'
+import UnSubscribe from 'components/Options/Unsubscribe/UnSubscribe'
+import QuizView from 'components/Quiz/QuizView'
+import TermsView from 'components/Terms/TermsView'
+import { FluidType } from 'enum/fluid.enum'
+import { TermsStatus } from 'models'
+import React, { lazy, Suspense } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+
+const ConsumptionView = lazy(() => import('components/Home/ConsumptionView'))
+const EcogestureView = lazy(
+ () => import('components/Ecogesture/EcogestureView')
+)
+const SingleEcogesture = lazy(
+ () => import('components/Ecogesture/SingleEcogesture')
+)
+const OptionsView = lazy(() => import('components/Options/OptionsView'))
+const LegalNoticeView = lazy(
+ () => import('components/Options/LegalNotice/LegalNoticeView')
+)
+const GCUView = lazy(() => import('components/Options/GCU/GCUView'))
+const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
+const ProfileTypeView = lazy(
+ () => import('components/ProfileType/ProfileTypeView')
+)
+
+const AppRoutes = ({ termsStatus }: { termsStatus: TermsStatus }) => {
+ return (
+ <Suspense
+ fallback={
+ <div className="loaderContainer">
+ <Loader />
+ </div>
+ }
+ >
+ <Routes>
+ {!termsStatus.accepted && (
+ <>
+ <Route path="/terms" element={<TermsView />} />
+ <Route path="*" element={<Navigate replace to="/terms" />} />
+ </>
+ )}
+ {termsStatus.accepted && (
+ <>
+ <Route
+ path="/consumption/electricity"
+ element={<ConsumptionView fluidType={FluidType.ELECTRICITY} />}
+ />
+ <Route
+ path="/consumption/water"
+ element={<ConsumptionView fluidType={FluidType.WATER} />}
+ />
+ <Route
+ path="/consumption/gas"
+ element={<ConsumptionView fluidType={FluidType.GAS} />}
+ />
+ <Route
+ path="/consumption"
+ element={<ConsumptionView fluidType={FluidType.MULTIFLUID} />}
+ />
+ <Route path="/sge-connect" element={<SgeConnectView />} />
+ <Route path="/challenges/duel" element={<DuelView />} />
+ <Route path="/challenges/quiz" element={<QuizView />} />
+ <Route
+ path="/challenges/exploration"
+ element={<ExplorationView />}
+ />
+ <Route path="/challenges/action" element={<ActionView />} />
+ <Route path="/challenges/" element={<ChallengeView />} />
+ <Route path="/ecogesture-form" element={<EcogestureFormView />} />
+ <Route
+ path="/ecogesture-selection"
+ element={<EcogestureSelection />}
+ />
+ <Route
+ path="/ecogesture/:ecogestureID/:tab"
+ element={<SingleEcogesture />}
+ />
+ <Route
+ path="/ecogesture/:ecogestureID"
+ element={<SingleEcogesture />}
+ />
+ <Route path="/ecogestures" element={<EcogestureView />} />
+ <Route path="/options/legalnotice" element={<LegalNoticeView />} />
+ <Route path="/options/gcu" element={<GCUView />} />
+ <Route path="/options/:connectParam" element={<OptionsView />} />
+ <Route path="/options" element={<OptionsView />} />
+ <Route path="/analysis" element={<AnalysisView />} />
+ <Route path="/profiletype" element={<ProfileTypeView />} />
+ <Route path="/unsubscribe" element={<UnSubscribe />} />
+ <Route path="*" element={<Navigate replace to="/consumption" />} />
+ </>
+ )}
+ </Routes>
+ </Suspense>
+ )
+}
+
+export default AppRoutes
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 7b8eabf85674bc4a7e93b2658c23f1b1f6c2604b..468b85b5f9eb5b2a450bf4101e500839f8a857b8 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -5,12 +5,7 @@ import { InitSteps } from 'models/initialisationSteps.model'
import React from 'react'
import './splashScreen.scss'
-interface SplashScreenProps {
- initStep: InitSteps
-}
-const SplashScreen: React.FC<SplashScreenProps> = ({
- initStep,
-}: SplashScreenProps) => {
+const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
const { t } = useI18n()
const getProgress = () => {
const total: number = Object.values(InitSteps).length / 2
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index baaa576c160104a2141f6adff56dcce9f3df30c3..91eaf7dbac5a299a8bfbf089bdaef94dd8408584 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -6,12 +6,7 @@ import { InitStepsErrors } from 'models/initialisationSteps.model'
import React from 'react'
import './splashScreen.scss'
-interface SplashScreenErrorProps {
- error: InitStepsErrors
-}
-const SplashScreenError: React.FC<SplashScreenErrorProps> = ({
- error,
-}: SplashScreenErrorProps) => {
+const SplashScreenError = ({ error }: { error: InitStepsErrors }) => {
const { t } = useI18n()
return (
<>
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index b3dfb6a58c68599f7601373cb89bb31cfbbe7c13..2102a0a3d890b04fbd8d66bc8618ea8abb778ea4 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -11,10 +11,7 @@ interface CGUModalProps {
open: boolean
handleCloseClick: () => void
}
-const CGUModal: React.FC<CGUModalProps> = ({
- open,
- handleCloseClick,
-}: CGUModalProps) => {
+const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
const { t } = useI18n()
return (
<Dialog
diff --git a/src/components/Terms/DataShareConsentContent.tsx b/src/components/Terms/DataShareConsentContent.tsx
index cb2308c8e088a66dc065180c7fa6e8aadfbcf810..8a561a2652fc27aea34e396bbcfc360315b31157 100644
--- a/src/components/Terms/DataShareConsentContent.tsx
+++ b/src/components/Terms/DataShareConsentContent.tsx
@@ -5,7 +5,7 @@ import { AppStore } from 'store'
import { decoreText } from 'utils/decoreText'
import './termsView.scss'
-const DataShareConsentContent: React.FC = () => {
+const DataShareConsentContent = () => {
const { t } = useI18n()
const { isFirstConnection } = useSelector(
(state: AppStore) => state.ecolyo.profile
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 9f97244e52c7df19de85299ccb0ca67208116711..7e7e15f3b616a112441680adcbdd996d30394fd6 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -12,7 +12,7 @@ interface LegalNoticeModalProps {
handleCloseClick: () => void
}
-const LegalNoticeModal: React.FC<LegalNoticeModalProps> = ({
+const LegalNoticeModal = ({
open,
handleCloseClick,
}: LegalNoticeModalProps) => {
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index 51bf642c9d1c5f5b43c66c2331ed5aca5bb262cf..5ce7b5a0c550ee620b257ffbeeb3ba17e5f46783 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -15,7 +15,7 @@ import LegalNoticeModal from './LegalNoticeModal'
import MinorUpdateContent from './MinorUpdateContent'
import './termsView.scss'
-const TermsView: React.FC = () => {
+const TermsView = () => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx
index e38857efb36221428a57f9493562c2e4c61f7bbe..d6cf1e041994d524a68bcaf927ca1b5536b72b4a 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.tsx
@@ -1,120 +1,114 @@
-import { Button } from '@material-ui/core'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import { DateTime } from 'luxon'
-import React, { Dispatch } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import DateChartService from 'services/dateChart.service'
-import UsageEventService from 'services/usageEvent.service'
-import { AppActionsTypes, AppStore } from 'store'
-import {
- setCurrentIndex,
- setCurrentTimeStep,
- setSelectedDate,
-} from 'store/chart/chart.slice'
-import './timeStepSelector.scss'
-
-interface TimeStepSelectorProps {
- fluidType: FluidType
-}
-
-const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
- fluidType,
-}: TimeStepSelectorProps) => {
- const { currentTimeStep, selectedDate } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
- const { t } = useI18n()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const dateChartService = new DateChartService()
- const client = useClient()
- const timeStepElecArray: TimeStep[] = [
- TimeStep.HALF_AN_HOUR,
- TimeStep.WEEK,
- TimeStep.DAY,
- TimeStep.MONTH,
- TimeStep.YEAR,
- ]
- const timeStepMultiArray: TimeStep[] = [
- TimeStep.WEEK,
- TimeStep.DAY,
- TimeStep.MONTH,
- TimeStep.YEAR,
- ]
- const timeStepArray: TimeStep[] =
- fluidType === FluidType.ELECTRICITY
- ? [...timeStepElecArray]
- : [...timeStepMultiArray]
-
- const handleToday = () => {
- const today = DateTime.local()
- .setZone('utc', {
- keepLocalTime: true,
- })
- .startOf('day')
- UsageEventService.addEvent(client, {
- type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
- target: TimeStep[TimeStep.WEEK].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
- })
- dispatch(setCurrentIndex(0))
- dispatch(setSelectedDate(today))
- dispatch(setCurrentTimeStep(TimeStep.WEEK))
- }
- const handleChangeTimeStep = (targetTimestep: TimeStep) => {
- const index: number = dateChartService.defineDateIndex(
- targetTimestep,
- selectedDate
- )
- UsageEventService.addEvent(client, {
- type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
- target: TimeStep[currentTimeStep].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
- })
- dispatch(setCurrentTimeStep(targetTimestep))
- dispatch(setCurrentIndex(index))
- }
- return (
- <div className={'timestep-selector'}>
- <Button
- onClick={handleToday}
- classes={{
- root: 'btn-today',
- label: 'text-13-normal',
- }}
- >
- {t('timestep.today')}
- </Button>
- <div className={'timestep-container'}>
- <ul
- className={`timestep-bar ${
- fluidType === FluidType.ELECTRICITY && 'elec-bar'
- }`}
- >
- {timeStepArray.map(step => (
- <React.Fragment key={step}>
- <li
- className={
- step === currentTimeStep ? 'active circle' : 'circle'
- }
- onClick={() => handleChangeTimeStep(step)}
- id={TimeStep[step].toLowerCase()}
- >
- <span className="clickable-area" />
- <span className={'text text-14-normal'}>
- {t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
- </span>
- </li>
- <li className="bar" />
- </React.Fragment>
- ))}
- </ul>
- </div>
- </div>
- )
-}
-
-export default TimeStepSelector
+import { Button } from '@material-ui/core'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { DateTime } from 'luxon'
+import React, { Dispatch } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import DateChartService from 'services/dateChart.service'
+import UsageEventService from 'services/usageEvent.service'
+import { AppActionsTypes, AppStore } from 'store'
+import {
+ setCurrentIndex,
+ setCurrentTimeStep,
+ setSelectedDate,
+} from 'store/chart/chart.slice'
+import './timeStepSelector.scss'
+
+const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
+ const { currentTimeStep, selectedDate } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+ const { t } = useI18n()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const dateChartService = new DateChartService()
+ const client = useClient()
+ const timeStepElecArray: TimeStep[] = [
+ TimeStep.HALF_AN_HOUR,
+ TimeStep.WEEK,
+ TimeStep.DAY,
+ TimeStep.MONTH,
+ TimeStep.YEAR,
+ ]
+ const timeStepMultiArray: TimeStep[] = [
+ TimeStep.WEEK,
+ TimeStep.DAY,
+ TimeStep.MONTH,
+ TimeStep.YEAR,
+ ]
+ const timeStepArray: TimeStep[] =
+ fluidType === FluidType.ELECTRICITY
+ ? [...timeStepElecArray]
+ : [...timeStepMultiArray]
+
+ const handleToday = () => {
+ const today = DateTime.local()
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day')
+ UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
+ target: TimeStep[TimeStep.WEEK].toLowerCase(),
+ context: FluidType[fluidType].toLowerCase(),
+ })
+ dispatch(setCurrentIndex(0))
+ dispatch(setSelectedDate(today))
+ dispatch(setCurrentTimeStep(TimeStep.WEEK))
+ }
+ const handleChangeTimeStep = (targetTimestep: TimeStep) => {
+ const index: number = dateChartService.defineDateIndex(
+ targetTimestep,
+ selectedDate
+ )
+ UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
+ target: TimeStep[currentTimeStep].toLowerCase(),
+ context: FluidType[fluidType].toLowerCase(),
+ })
+ dispatch(setCurrentTimeStep(targetTimestep))
+ dispatch(setCurrentIndex(index))
+ }
+ return (
+ <div className={'timestep-selector'}>
+ <Button
+ onClick={handleToday}
+ classes={{
+ root: 'btn-today',
+ label: 'text-13-normal',
+ }}
+ >
+ {t('timestep.today')}
+ </Button>
+ <div className={'timestep-container'}>
+ <ul
+ className={`timestep-bar ${
+ fluidType === FluidType.ELECTRICITY && 'elec-bar'
+ }`}
+ >
+ {timeStepArray.map(step => (
+ <React.Fragment key={step}>
+ <li
+ className={
+ step === currentTimeStep ? 'active circle' : 'circle'
+ }
+ onClick={() => handleChangeTimeStep(step)}
+ id={TimeStep[step].toLowerCase()}
+ >
+ <span className="clickable-area" />
+ <span className={'text text-14-normal'}>
+ {t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
+ </span>
+ </li>
+ <li className="bar" />
+ </React.Fragment>
+ ))}
+ </ul>
+ </div>
+ </div>
+ )
+}
+
+export default TimeStepSelector