From cdd9e8222651077ec0b9c79e17bde2ef7b3ec4e2 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 13 May 2024 12:13:17 +0000
Subject: [PATCH] refactor: remove use state & callbacks
---
.../Action/ActionBegin/ActionBegin.tsx | 13 ++-
.../Action/ActionCard/ActionCard.tsx | 15 ++--
.../Action/ActionOnGoing/ActionOnGoing.tsx | 11 ++-
.../ElecHalfHourMonthlyAnalysis.spec.tsx | 11 ++-
.../ElecHalfHourMonthlyAnalysis.tsx | 26 +++---
.../ElecHalfHourMonthlyAnalysis.spec.tsx.snap | 8 +-
src/components/Analysis/MonthlyAnalysis.tsx | 18 ++---
.../ProfileComparator/ProfileComparator.tsx | 33 ++++----
.../ChallengeCardOnGoing.tsx | 14 ++--
.../ChallengeCardUnlocked.tsx | 2 +-
.../Connection/GRDFConnect/StepIdentity.tsx | 8 +-
.../SGEConnect/StepIdentityAndPdl.tsx | 8 +-
.../DataloadConsumptionVisualizer.tsx | 6 +-
.../InfoDataConsumptionVisualizer.tsx | 10 +--
src/components/Duel/DuelError/DuelError.tsx | 8 +-
.../Ecogesture/EcogestureTabsView.tsx | 80 +++++++------------
.../Ecogesture/SingleEcogestureView.tsx | 23 ++----
.../EcogestureFormEquipment.tsx | 6 +-
.../EcogestureFormSingleChoice.tsx | 6 +-
.../EcogestureSelectionView.tsx | 11 ++-
.../Konnector/KonnectorModalFooter.tsx | 4 +-
.../Options/ExportData/ExportData.tsx | 44 ++++------
.../ProfileTypeOptions/ProfileTypeOptions.tsx | 8 +-
.../ProfileTypeFormDateSelection.tsx | 8 +-
.../ProfileTypeFormMultiChoice.tsx | 6 +-
.../ProfileTypeFormNumber.tsx | 6 +-
.../ProfileTypeFormNumberSelection.tsx | 6 +-
.../ProfileTypeFormSingleChoice.tsx | 5 +-
.../ProfileType/ProfileTypeView.tsx | 3 +-
src/components/Terms/TermsView.tsx | 29 +++----
30 files changed, 168 insertions(+), 268 deletions(-)
diff --git a/src/components/Action/ActionBegin/ActionBegin.tsx b/src/components/Action/ActionBegin/ActionBegin.tsx
index f9cdae3e5..880b904f8 100644
--- a/src/components/Action/ActionBegin/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin/ActionBegin.tsx
@@ -6,7 +6,7 @@ import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { Ecogesture, UserChallenge } from 'models'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
import ActionService from 'services/action.service'
import { useAppSelector } from 'store/hooks'
import { importIconById } from 'utils/utils'
@@ -33,10 +33,6 @@ const ActionBegin = ({
const [actionIcon, setActionIcon] = useState<string>('')
const [openLaunchModal, setOpenLaunchModal] = useState<boolean>(false)
- const toggleLaunchModal = useCallback(() => {
- setOpenLaunchModal(prev => !prev)
- }, [])
-
useEffect(() => {
let subscribed = true
const getAction = async () => {
@@ -92,7 +88,10 @@ const ActionBegin = ({
{currentAction.actionName}
</div>
<div className="action-buttons">
- <Button onClick={toggleLaunchModal} className="btnSecondary">
+ <Button
+ onClick={() => setOpenLaunchModal(true)}
+ className="btnSecondary"
+ >
{t('action.apply')}
</Button>
<Button
@@ -106,7 +105,7 @@ const ActionBegin = ({
<ActionModal
open={openLaunchModal}
action={currentAction}
- handleCloseClick={toggleLaunchModal}
+ handleCloseClick={() => setOpenLaunchModal(false)}
userChallenge={userChallenge}
/>
</div>
diff --git a/src/components/Action/ActionCard/ActionCard.tsx b/src/components/Action/ActionCard/ActionCard.tsx
index b14f909d5..75c04ea08 100644
--- a/src/components/Action/ActionCard/ActionCard.tsx
+++ b/src/components/Action/ActionCard/ActionCard.tsx
@@ -20,15 +20,12 @@ const ActionCard = ({
}: ActionCardProps) => {
const [actionIcon, setActionIcon] = useState<string>('')
const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
- const toggleModal = useCallback(() => {
- setOpenEcogestureModal(prev => !prev)
- }, [])
const selectEcogesture = useCallback(() => {
setSelectedAction(action)
setShowList(false)
- toggleModal()
- }, [setSelectedAction, setShowList, action, toggleModal])
+ setOpenEcogestureModal(false)
+ }, [setSelectedAction, setShowList, action])
useEffect(() => {
async function handleEcogestureIcon() {
@@ -41,7 +38,11 @@ const ActionCard = ({
return (
<>
{action && (
- <Button key={action.id} className="action-card" onClick={toggleModal}>
+ <Button
+ key={action.id}
+ className="action-card"
+ onClick={() => setOpenEcogestureModal(true)}
+ >
<StyledIcon className="action-icon" icon={actionIcon} size={100} />
<div className="action-title text-18-bold">{action.shortName}</div>
</Button>
@@ -51,7 +52,7 @@ const ActionCard = ({
open={openEcogestureModal}
ecogesture={action}
isAction={true}
- handleCloseClick={toggleModal}
+ handleCloseClick={() => setOpenEcogestureModal(false)}
selectEcogesture={selectEcogesture}
/>
)}
diff --git a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
index 81d15d6ab..d6e36fe48 100644
--- a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
@@ -12,10 +12,6 @@ const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
const { t } = useI18n()
const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
- const toggleEcogestureModal = useCallback(() => {
- setOpenEcogestureModal(prev => !prev)
- }, [setOpenEcogestureModal])
-
const setGradient = useCallback(() => {
if (!userAction.startDate || !userAction.ecogesture) return null
@@ -88,14 +84,17 @@ const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
</div>
<div className="result-title text-18-bold"> {t('action.result')}</div>
<div className="result-date text-24-bold">{getResultDate()}</div>
- <Button className="btnSecondary" onClick={toggleEcogestureModal}>
+ <Button
+ className="btnSecondary"
+ onClick={() => setOpenEcogestureModal(true)}
+ >
{t('action.details')}
</Button>
<EcogestureModal
open={openEcogestureModal}
ecogesture={userAction.ecogesture}
isAction={false}
- handleCloseClick={toggleEcogestureModal}
+ handleCloseClick={() => setOpenEcogestureModal(false)}
/>
</>
)}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 4c977c174..a8611f6d0 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -66,7 +66,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
expect(container).toMatchSnapshot()
})
- it('should be rendered correctly when isHalfHourActivated is true', async () => {
+ it('should be rendered correctly when isHalfHourActivated is true and render weekend graph', async () => {
mockCheckDoctypeEntries.mockResolvedValue(true)
mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
mockEnedisMonthlyAnalysisArray
@@ -83,6 +83,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
)
await waitFor(() => null, { container })
expect(container).toMatchSnapshot()
+ expect(screen.getByText('special_elec.weekend')).toBeInTheDocument()
})
it('should change from weekend to week', async () => {
@@ -94,17 +95,20 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockDataLoadEnedisAnalysis
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const { container } = render(
+ render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
+ await waitFor(() =>
+ screen.getByLabelText('consumption.accessibility.button_previous_value')
+ )
await act(async () => {
await userEvent.click(
screen.getByLabelText('consumption.accessibility.button_previous_value')
)
})
- expect(container.getElementsByClassName('week').length).toBeTruthy()
+ expect(screen.getByText('special_elec.week')).toBeInTheDocument()
})
it('should call the ElecInfoModal with open = true when click on the button', async () => {
@@ -116,7 +120,6 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockDataLoadEnedisAnalysis
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
-
render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index fa2c357fb..a7ee2e698 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -37,7 +37,7 @@ const ElecHalfHourMonthlyAnalysis = ({
const { analysisMonth } = useAppSelector(state => state.ecolyo.analysis)
const [isWeekend, setIsWeekend] = useState<boolean>(true)
- const [isHalfHourActivated, setIsHalfHourActivated] = useState<boolean>(true)
+ const [isHalfHourActivated, setIsHalfHourActivated] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(true)
const [monthDataloads, setMonthDataloads] =
useState<AggregatedEnedisMonthlyDataloads>()
@@ -48,15 +48,7 @@ const ElecHalfHourMonthlyAnalysis = ({
const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)
const [offPeakHours, setOffPeakHours] = useState<OffPeakHours[]>()
- const handleChangeWeek = useCallback(() => {
- setIsWeekend(prev => !prev)
- }, [])
-
- const toggleInfoModal = useCallback(() => {
- setOpenInfoModal(prev => !prev)
- }, [])
-
- /** EnedisMonthlyAnalysisDataService*/
+ /** EnedisMonthlyAnalysisDataService */
const emas = useMemo(
() => new EnedisMonthlyAnalysisDataService(client),
[client]
@@ -96,6 +88,7 @@ const ElecHalfHourMonthlyAnalysis = ({
)
if (!subscribed) return
if (isHalfHourLoadActivated) {
+ setIsHalfHourActivated(true)
const aggregatedDate = analysisMonth.minus({ month: 1 })
const data = await emas.getEnedisMonthlyAnalysisByDate(
aggregatedDate.year,
@@ -110,8 +103,6 @@ const ElecHalfHourMonthlyAnalysis = ({
setFacturePercentage(percentage)
}
}
- } else {
- setIsHalfHourActivated(false)
}
setIsLoading(false)
@@ -177,7 +168,7 @@ const ElecHalfHourMonthlyAnalysis = ({
<div className="navigator">
<IconButton
aria-label={t('consumption.accessibility.button_previous_value')}
- onClick={handleChangeWeek}
+ onClick={() => setIsWeekend(prev => !prev)}
className="arrow-prev"
>
<Icon icon={LeftArrowIcon} size={24} />
@@ -195,7 +186,7 @@ const ElecHalfHourMonthlyAnalysis = ({
</div>
<IconButton
aria-label={t('consumption.accessibility.button_next_value')}
- onClick={handleChangeWeek}
+ onClick={() => setIsWeekend(prev => !prev)}
className="arrow-next"
>
<Icon icon={RightArrowIcon} size={24} />
@@ -283,7 +274,10 @@ const ElecHalfHourMonthlyAnalysis = ({
</div>
</div>
- <Button className="btnText" onClick={toggleInfoModal}>
+ <Button
+ className="btnText"
+ onClick={() => setOpenInfoModal(true)}
+ >
{t('special_elec.showModal')}
</Button>
</div>
@@ -295,7 +289,7 @@ const ElecHalfHourMonthlyAnalysis = ({
<ElecInfoModal
open={openInfoModal}
offPeakHours={offPeakHours}
- handleCloseClick={toggleInfoModal}
+ handleCloseClick={() => setOpenInfoModal(false)}
/>
</div>
)
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 381a84602..6e75e12ed 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
</div>
`;
-exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true 1`] = `
+exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true and render weekend graph 1`] = `
<div>
<div
class="special-elec-container"
@@ -69,9 +69,6 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
/>
</svg>
</span>
- <span
- class="MuiTouchRipple-root"
- />
</button>
<div
class="average text-18-normal"
@@ -112,9 +109,6 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
/>
</svg>
</span>
- <span
- class="MuiTouchRipple-root"
- />
</button>
</div>
<p
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 90e2d0253..0b36bc41b 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -44,7 +44,7 @@ const MonthlyAnalysis = ({
fluid => fluid.status === FluidState.NOT_CONNECTED
)
- const [loadAnalysis, setLoadAnalysis] = useState<boolean>(true)
+ const [isLoadingAnalysis, setLoadingAnalysis] = useState<boolean>(true)
const [openNoDataModal, setOpenNoDataModal] = useState(false)
const [fluidsWithData, setFluidsWithData] = useState<FluidType[]>([])
const [incompleteDataFluids, setIncompleteDataFluids] = useState<FluidType[]>(
@@ -64,7 +64,7 @@ const MonthlyAnalysis = ({
let subscribed = true
const populateData = async () => {
- setLoadAnalysis(true)
+ setLoadingAnalysis(true)
const timePeriod: TimePeriod = {
startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
@@ -97,7 +97,7 @@ const MonthlyAnalysis = ({
if (fetchedPerformanceIndicators) {
setPerformanceIndicators(fetchedPerformanceIndicators)
- setLoadAnalysis(false)
+ setLoadingAnalysis(false)
setAggregatedPerformanceIndicators(
performanceIndicatorService.aggregatePerformanceIndicators(
fetchedPerformanceIndicators
@@ -108,7 +108,7 @@ const MonthlyAnalysis = ({
setOpenNoDataModal(true)
}
setFluidsWithData(resultFluids)
- setLoadAnalysis(false)
+ setLoadingAnalysis(false)
}
if (subscribed) {
@@ -128,23 +128,23 @@ const MonthlyAnalysis = ({
])
useEffect(() => {
- if (!loadAnalysis) {
+ if (!isLoadingAnalysis) {
const app = document.querySelector('.app-content')
window.scrollTo(0, scrollPosition)
app?.scrollTo(0, scrollPosition)
}
- }, [loadAnalysis, scrollPosition])
+ }, [isLoadingAnalysis, scrollPosition])
return (
<>
- {loadAnalysis && (
+ {isLoadingAnalysis && (
<div className="loaderContainer">
<Loader />
</div>
)}
<NoAnalysisModal open={openNoDataModal} onClose={setOpenNoDataModal} />
- {!loadAnalysis && (
- <Fade in={!loadAnalysis}>
+ {!isLoadingAnalysis && (
+ <Fade in={!isLoadingAnalysis}>
<div className="analysis-root">
{incompleteDataFluids.length !== 0 && (
<div className="analysis-content">
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 501191f56..90db50877 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -42,13 +42,26 @@ const ProfileComparator = ({
const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0)
const [forecast, setForecast] = useState<MonthlyForecast | null>(null)
const [isLoading, setIsLoading] = useState<boolean>(true)
- const [activeAverageHome, setActiveAverageHome] = useState<boolean>(false)
+ const [isExpanded, setIsExpanded] = useState<boolean>(false)
const userPriceConsumption = aggregatedPerformanceIndicator.value || 0
+ const emptyFluidTypes: FluidType[] = []
+ if (performanceIndicators.length === 0) {
+ // If no indicators add all fluids for component placeholder
+ emptyFluidTypes.push(FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS)
+ } else {
+ for (let i = 0; i < performanceIndicators.length; i++) {
+ if (!performanceIndicators[i]?.value) {
+ emptyFluidTypes.push(i)
+ }
+ }
+ }
+
+ /** Toggle accordion and scroll to the first element */
const toggleAccordion = () => {
- setActiveAverageHome(prev => !prev)
- if (!activeAverageHome) {
+ setIsExpanded(prev => !prev)
+ if (!isExpanded) {
setTimeout(() => {
const content = document.querySelector('.consumption-electricity')
if (content) {
@@ -61,18 +74,6 @@ const ProfileComparator = ({
}
}
- const emptyFluidTypes: FluidType[] = []
- if (performanceIndicators.length === 0) {
- // If no indicators add all fluids for component placeholder
- emptyFluidTypes.push(FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS)
- } else {
- for (let i = 0; i < performanceIndicators.length; i++) {
- if (!performanceIndicators[i]?.value) {
- emptyFluidTypes.push(i)
- }
- }
- }
-
const getTotalValueWithConnectedFluids = useCallback(
(monthlyForecast: MonthlyForecast) => {
if (performanceIndicators.length === 3) {
@@ -205,7 +206,7 @@ const ProfileComparator = ({
))}
<Accordion
- expanded={activeAverageHome}
+ expanded={isExpanded}
onChange={toggleAccordion}
classes={{
root: 'expansion-panel-root',
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index cdeb8d6ce..639677e9d 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -19,7 +19,7 @@ import {
UserQuizState,
} from 'enums'
import { UserChallenge } from 'models'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { updateUserChallengeList } from 'store/challenge/challenge.slice'
@@ -41,7 +41,7 @@ const ChallengeCardOnGoing = ({
challenge: { currentDataload },
global: { fluidTypes, fluidStatus },
} = useAppSelector(state => state.ecolyo)
- const [isOneFluidUp, setIsOneFluidUp] = useState<boolean>(true)
+ const [noFluidConnected, setNoFluidConnected] = useState<boolean>(true)
const [challengeIcon, setChallengeIcon] = useState<string>(defaultIcon)
const [isDone, setIsDone] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -55,10 +55,6 @@ const ChallengeCardOnGoing = ({
const explorationFinished = userChallenge.progress.explorationProgress === 5
const actionFinished = userChallenge.progress.actionProgress === 5
- const toggleNoFluidModal = useCallback(() => {
- setIsOneFluidUp(prev => !prev)
- }, [])
-
const challengeService = useMemo(() => new ChallengeService(client), [client])
const goDuel = async () => {
@@ -78,7 +74,7 @@ const ChallengeCardOnGoing = ({
navigate(`/challenges/duel?id=${userChallenge.id}`)
} else {
setIsLoading(false)
- toggleNoFluidModal()
+ setNoFluidConnected(true)
}
}
@@ -310,8 +306,8 @@ const ChallengeCardOnGoing = ({
{actionButton()}
{duelContainer()}
<ChallengeNoFluidModal
- open={!isOneFluidUp}
- handleCloseClick={toggleNoFluidModal}
+ open={noFluidConnected}
+ handleCloseClick={() => setNoFluidConnected(false)}
/>
</div>
)
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
index a33ba27fe..2bbafcead 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
@@ -27,12 +27,12 @@ const ChallengeCardUnlocked = ({
const dispatch = useAppDispatch()
const [openNoFluidModal, setOpenNoFluidModal] = useState(false)
const [challengeIcon, setChallengeIcon] = useState(defaultIcon)
- let statusRequirementOk = false
const toggleNoFluidModal = useCallback(() => {
setOpenNoFluidModal(prev => !prev)
}, [])
+ let statusRequirementOk = false
fluidStatus.forEach(fluid => {
if (
fluid.status !== FluidState.NOT_CONNECTED &&
diff --git a/src/components/Connection/GRDFConnect/StepIdentity.tsx b/src/components/Connection/GRDFConnect/StepIdentity.tsx
index 4ba5e5657..ff7db3b27 100644
--- a/src/components/Connection/GRDFConnect/StepIdentity.tsx
+++ b/src/components/Connection/GRDFConnect/StepIdentity.tsx
@@ -14,7 +14,6 @@ export const StepIdentity = ({
}) => {
const { t } = useI18n()
const [openHintModal, setOpenHintModal] = useState<boolean>(false)
- const toggleModal = () => setOpenHintModal(prev => !prev)
return (
<div className="stepDetails stepIdentity">
@@ -88,10 +87,13 @@ export const StepIdentity = ({
}}
/>
- <Button className="btnText" onClick={toggleModal}>
+ <Button className="btnText" onClick={() => setOpenHintModal(true)}>
{t('auth.grdfgrandlyon.pceHint')}
</Button>
- <GrdfModalHint open={openHintModal} handleCloseClick={toggleModal} />
+ <GrdfModalHint
+ open={openHintModal}
+ handleCloseClick={() => setOpenHintModal(false)}
+ />
</div>
)
}
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index f633f9458..6a7915032 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -20,7 +20,6 @@ const StepIdentityAndPdl = ({
}: StepIdentityAndPdlProps) => {
const { t } = useI18n()
const [openHintModal, setOpenHintModal] = useState<boolean>(false)
- const toggleModal = () => setOpenHintModal(prev => !prev)
return (
<div className="stepDetails stepIdentity">
@@ -59,10 +58,13 @@ const StepIdentityAndPdl = ({
inputMode="numeric"
required
/>
- <Button className="btnText" onClick={toggleModal}>
+ <Button className="btnText" onClick={() => setOpenHintModal(true)}>
{t('auth.enedissgegrandlyon.pdlModal.title')}
</Button>
- <SgeModalHint open={openHintModal} handleCloseClick={toggleModal} />
+ <SgeModalHint
+ open={openHintModal}
+ handleCloseClick={() => setOpenHintModal(false)}
+ />
</div>
)
}
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index e28a077ee..6e38fa737 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -1,7 +1,7 @@
import { DataloadSectionType, DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
import { useAppSelector } from 'store/hooks'
import DataloadNoValue from './DataloadNoValue'
import DataloadSection from './DataloadSection'
@@ -20,9 +20,7 @@ const DataloadConsumptionVisualizer = ({
}: DataloadConsumptionVisualizerProps) => {
const { showCompare } = useAppSelector(state => state.ecolyo.chart)
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
- const toggleEstimationModal = useCallback(() => {
- setOpenEstimationModal(prev => !prev)
- }, [])
+ const toggleEstimationModal = () => setOpenEstimationModal(prev => !prev)
if (!dataload || dataload.date > DateTime.local()) {
return <div className="dataloadvisualizer-root" />
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
index 2c0381eb6..c3a9b1a08 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
@@ -4,7 +4,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
import NoDataModal from './NoDataModal'
import './infoDataConsumptionVisualizer.scss'
@@ -23,10 +23,6 @@ const InfoDataConsumptionVisualizer = ({
const [openNoDataModal, setOpenNoDataModal] = useState<boolean>(false)
const { moveToLatestDate } = useMoveToLatestDate(lastDataDate)
- const toggleNoDataModal = useCallback(() => {
- setOpenNoDataModal(prev => !prev)
- }, [])
-
if (!dataload) {
return <></>
}
@@ -60,14 +56,14 @@ const InfoDataConsumptionVisualizer = ({
) {
return (
<>
- <Button className="btnText" onClick={toggleNoDataModal}>
+ <Button className="btnText" onClick={() => setOpenNoDataModal(true)}>
<span className="text-16-normal underlined-error">
{t('consumption_visualizer.why_no_data')}
</span>
</Button>
<NoDataModal
open={openNoDataModal}
- handleCloseClick={toggleNoDataModal}
+ handleCloseClick={() => setOpenNoDataModal(false)}
/>
</>
)
diff --git a/src/components/Duel/DuelError/DuelError.tsx b/src/components/Duel/DuelError/DuelError.tsx
index 6d9f119e6..0580715cb 100644
--- a/src/components/Duel/DuelError/DuelError.tsx
+++ b/src/components/Duel/DuelError/DuelError.tsx
@@ -1,6 +1,6 @@
import Button from '@material-ui/core/Button'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useCallback } from 'react'
+import React from 'react'
import { useNavigate } from 'react-router-dom'
import './duelError.scss'
@@ -8,17 +8,13 @@ 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}
+ onClick={() => navigate(-1)}
className="btnSecondary"
>
{t('duel.button_go_back')}
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index afecdca34..d5327b447 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -51,29 +51,21 @@ const EcogestureTabsView = () => {
tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
)
const [isLoading, setIsLoading] = useState<boolean>(true)
- const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
- const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
- []
- )
- const [objectiveEcogestureList, setObjectiveEcogestureList] = useState<
- Ecogesture[]
- >([])
+ const [openEcResetModal, setOpenEcResetModal] = useState(false)
+ const [ecogestures, setEcogestures] = useState<Ecogesture[]>([])
const [totalViewed, setTotalViewed] = useState<number>(0)
const [totalAvailable, setTotalAvailable] = useState<number>(0)
- const [openEcogestureResetModal, setOpenEcogestureResetModal] =
- useState<boolean>(false)
+
+ const objective = ecogestures.filter(({ objective }) => objective)
+ const doing = ecogestures.filter(({ doing }) => doing)
const ecogestureService = useMemo(
() => new EcogestureService(client),
[client]
)
- const openResetEcogestureModal = () => {
- setOpenEcogestureResetModal(true)
- }
- const closeEcogestureResetModal = () => {
- setOpenEcogestureResetModal(false)
- }
+ const openResetEcogestureModal = () => setOpenEcResetModal(true)
+ const closeEcogestureResetModal = () => setOpenEcResetModal(false)
const handleConfirmReset = useCallback(async () => {
closeEcogestureResetModal()
@@ -98,9 +90,9 @@ const EcogestureTabsView = () => {
const getTabLabel = useCallback(
(tab: EcogestureTab) => {
const tabCounts = {
- [EcogestureTab.OBJECTIVE]: objectiveEcogestureList.length,
- [EcogestureTab.DOING]: doingEcogestureList.length,
- [EcogestureTab.ALL]: allEcogestureList.length,
+ [EcogestureTab.OBJECTIVE]: objective.length,
+ [EcogestureTab.DOING]: doing.length,
+ [EcogestureTab.ALL]: ecogestures.length,
}
return (
@@ -111,12 +103,7 @@ const EcogestureTabsView = () => {
</>
)
},
- [
- allEcogestureList.length,
- doingEcogestureList.length,
- objectiveEcogestureList.length,
- t,
- ]
+ [doing.length, ecogestures.length, objective.length, t]
)
useEffect(() => {
@@ -132,29 +119,22 @@ const EcogestureTabsView = () => {
dispatch(updateProfile({ ecogestureHash }))
}
- const availableList =
- await ecogestureService.getEcogestureListByProfile(currentProfile)
- const filteredList = availableList.filter(
- ecogesture => ecogesture.viewedInSelection === false
- )
-
- if (subscribed && ecogestureList) {
- const doing = ecogestureList.filter(
- ecogesture => ecogesture.doing === true
+ if (ecogestureList) {
+ const availableList =
+ await ecogestureService.getEcogestureListByProfile(currentProfile)
+ const notViewedList = availableList.filter(
+ ecogesture => ecogesture.viewedInSelection === false
)
- const objective = ecogestureList.filter(
- ecogesture => ecogesture.objective === true
- )
- setAllEcogestureList(ecogestureList)
- setObjectiveEcogestureList(objective)
- setDoingEcogestureList(doing)
+
+ setEcogestures(ecogestureList)
setTotalAvailable(availableList.length)
- setTotalViewed(availableList.length - filteredList.length)
+ setTotalViewed(availableList.length - notViewedList.length)
}
+
setIsLoading(false)
}
- loadEcogestures()
+ subscribed && loadEcogestures()
return () => {
subscribed = false
}
@@ -219,8 +199,7 @@ const EcogestureTabsView = () => {
<>
<TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
{profile.isProfileEcogestureCompleted &&
- (totalAvailable === totalViewed &&
- objectiveEcogestureList.length === 0 ? (
+ (totalAvailable === totalViewed && objective.length === 0 ? (
<EcogestureEmptyList
setTab={setTabValue}
isObjective={true}
@@ -229,7 +208,7 @@ const EcogestureTabsView = () => {
/>
) : (
<EcogestureList
- list={objectiveEcogestureList}
+ list={objective}
displaySelection={totalAvailable !== totalViewed}
selectionTotal={totalAvailable}
selectionViewed={totalViewed}
@@ -248,8 +227,7 @@ const EcogestureTabsView = () => {
<TabPanel value={tabValue} tab={EcogestureTab.DOING}>
{profile.isProfileEcogestureCompleted &&
- (totalAvailable === totalViewed &&
- doingEcogestureList.length === 0 ? (
+ (totalAvailable === totalViewed && doing.length === 0 ? (
<EcogestureEmptyList
setTab={setTabValue}
isObjective={false}
@@ -258,7 +236,7 @@ const EcogestureTabsView = () => {
/>
) : (
<EcogestureList
- list={doingEcogestureList}
+ list={doing}
displaySelection={totalAvailable !== totalViewed}
selectionTotal={totalAvailable}
selectionViewed={totalViewed}
@@ -276,9 +254,9 @@ const EcogestureTabsView = () => {
</TabPanel>
<TabPanel value={tabValue} tab={EcogestureTab.ALL}>
- {Boolean(allEcogestureList.length) && (
+ {Boolean(ecogestures.length) && (
<EcogestureList
- list={allEcogestureList}
+ list={ecogestures}
displaySelection={false}
selectionTotal={totalAvailable}
selectionViewed={totalViewed}
@@ -289,9 +267,9 @@ const EcogestureTabsView = () => {
)}
<EcogestureInitModal />
- {openEcogestureResetModal && (
+ {openEcResetModal && (
<EcogestureResetModal
- open={openEcogestureResetModal}
+ open={openEcResetModal}
closeEcogestureResetModal={closeEcogestureResetModal}
handleConfirmReset={handleConfirmReset}
/>
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 3254cab1b..13a60e4be 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -29,35 +29,30 @@ import './singleEcogestureView.scss'
const SingleEcogestureView = () => {
const { t } = useI18n()
const client = useClient()
+ const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
+ const { ecogestureID } = useParams<{ ecogestureID: string }>()
+ const [isLoading, setIsLoading] = useState<boolean>(true)
const [ecogesture, setEcogesture] = useState<Ecogesture>()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
const [showDetails, setShowDetails] = useState<boolean>(false)
- const [isDoing, setIsDoing] = useState<boolean>(false)
- const [isObjective, setIsObjective] = useState<boolean>(false)
- const [isLoading, setIsLoading] = useState<boolean>(true)
- const { ecogestureID } = useParams<{ ecogestureID: string }>()
+ const isDoing = ecogesture?.doing
+ const isObjective = ecogesture?.objective
const ecogestureService = useMemo(
() => new EcogestureService(client),
[client]
)
- const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
const [, setValidExploration] = useExploration()
const updateEcogesture = useCallback(
async (objective: boolean, doing: boolean) => {
if (ecogesture) {
- const updates: Ecogesture = {
+ const result = await ecogestureService.updateEcogesture({
...ecogesture,
objective,
doing,
- }
- const result = await ecogestureService.updateEcogesture(updates)
- if (result) {
- setIsObjective(result.objective)
- setIsDoing(result.doing)
- setEcogesture(result)
- }
+ })
+ if (result) setEcogesture(result)
}
},
[ecogesture, ecogestureService]
@@ -81,8 +76,6 @@ const SingleEcogestureView = () => {
if (data?.[0]) {
setEcogesture(data[0])
// Prevent case this key doesn't exist in doctype
- setIsObjective(data[0].objective)
- setIsDoing(data[0].doing)
const icon = await importIconById(data[0].id, 'ecogesture')
if (subscribed) {
setEcogestureIcon(icon || defaultIcon)
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
index 4852439ab..01a1093e4 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
@@ -34,10 +34,6 @@ const EcogestureFormEquipment = ({
isProfileEcogestureCompleted ? previousEquipments : []
)
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
-
const handleNext = useCallback(() => {
if (setNextStepProfileForm && currentProfileType) {
setNextStepProfileForm({
@@ -109,7 +105,7 @@ const EcogestureFormEquipment = ({
</div>
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disableNextButton={answer.length == 0}
isLastStep={true}
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
index 21401195f..5bafacadc 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
@@ -38,10 +38,6 @@ const EcogestureFormSingleChoice = ({
: null
)
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
-
const handleNext = useCallback(() => {
setNextStep({ ...currentProfileEcogesture, [answerType.attribute]: answer })
}, [currentProfileEcogesture, setNextStep, answer, answerType.attribute])
@@ -83,7 +79,7 @@ const EcogestureFormSingleChoice = ({
})}
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disablePrevButton={step === EcogestureStepForm.HEATING_TYPE}
disableNextButton={answer === null}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
index 2231b9fad..df6806976 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionView.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
@@ -29,8 +29,7 @@ const EcogestureSelectionView = () => {
const [ecogestureList, setEcogestureList] = useState<Ecogesture[]>([])
const [totalViewed, setTotalViewed] = useState<number>(0)
const [totalAvailable, setTotalAvailable] = useState<number>(0)
- const [openEcogestureSelectionModal, setOpenEcogestureSelectionModal] =
- useState(false)
+ const [openEcSelectionModal, setOpenEcSelectionModal] = useState(false)
const ecogestureService = useMemo(
() => new EcogestureService(client),
@@ -100,7 +99,7 @@ const EcogestureSelectionView = () => {
availableList.length === slicedFilteredList.length &&
slicedFilteredList.length > 0
) {
- setOpenEcogestureSelectionModal(true)
+ setOpenEcSelectionModal(true)
}
setTotalAvailable(availableList.length)
setTotalViewed(availableList.length - filteredList.length)
@@ -168,10 +167,10 @@ const EcogestureSelectionView = () => {
{!isLoading && (
<>
{renderEcogestureSelection()}
- {openEcogestureSelectionModal && (
+ {openEcSelectionModal && (
<EcogestureSelectionModal
- open={openEcogestureSelectionModal}
- handleCloseClick={() => setOpenEcogestureSelectionModal(false)}
+ open={openEcSelectionModal}
+ handleCloseClick={() => setOpenEcSelectionModal(false)}
/>
)}
</>
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 69faad6e0..30d505fac 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -32,10 +32,10 @@ const KonnectorModalFooter = ({
const client = useClient()
const navigate = useNavigate()
- const handleSGELoginRetry = useCallback(() => {
+ const handleSGELoginRetry = () => {
handleCloseClick(state === SUCCESS_EVENT)
navigate('/connect/electricity')
- }, [handleCloseClick, navigate, state])
+ }
const handleResetSGEAccount = useCallback(async () => {
if (account) {
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index 5127480c5..94365745a 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -26,19 +26,13 @@ const ExportData = () => {
[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 [showExportModal, setShowExportModal] = useState<
+ 'start' | 'loading' | 'done' | null
+ >(null)
+ const [hasError, setHasError] = useState(false)
const [exportableFluids, setExportableFluids] = useState<FluidType[]>([])
const [answer, setAnswer] = useState<FluidType[]>([])
-
- const [active, setActive] = useState<boolean>(false)
-
- const toggleAccordion = () => {
- setActive(prev => !prev)
- }
+ const [isExpanded, setIsExpanded] = useState(false)
const handleChange = (value: FluidType) => {
const tempAnswer = [...answer]
@@ -89,8 +83,7 @@ const ExportData = () => {
if (e) {
setHasError(true)
}
- setIsExportDoneModal(true)
- setIsExportLoadingModal(false)
+ setShowExportModal('done')
}
return (
@@ -98,8 +91,8 @@ const ExportData = () => {
<div className="export-option-root">
<div className="export-option-content">
<Accordion
- expanded={active}
- onChange={toggleAccordion}
+ expanded={isExpanded}
+ onChange={() => setIsExpanded(prev => !prev)}
classes={{
root: 'expansion-panel-root',
}}
@@ -134,7 +127,7 @@ const ExportData = () => {
{fluidCheckbox()}
<Button
aria-label={t('unsubscribe.button_accessibility')}
- onClick={() => setIsExportStartModal(true)}
+ onClick={() => setShowExportModal('start')}
className="btnSecondary"
disabled={answer.length === 0}
>
@@ -147,25 +140,20 @@ const ExportData = () => {
</div>
</div>
<ExportStartModal
- open={isExportStartModal}
- handleCloseClick={() => setIsExportStartModal(false)}
- handleDownloadClick={() => {
- setIsExportStartModal(false)
- setIsExportLoadingModal(true)
- }}
+ open={showExportModal === 'start'}
+ handleCloseClick={() => setShowExportModal(null)}
+ handleDownloadClick={() => setShowExportModal('loading')}
/>
<ExportLoadingModal
- open={isExportLoadingModal}
- handleCloseClick={() => {
- setIsExportLoadingModal(false)
- }}
+ open={showExportModal === 'loading'}
+ handleCloseClick={() => setShowExportModal(null)}
handleDone={e => handleDone(e)}
selectedFluids={answer}
/>
<ExportDoneModal
- open={isExportDoneModal}
+ open={showExportModal === 'done'}
error={hasError}
- handleCloseClick={() => setIsExportDoneModal(false)}
+ handleCloseClick={() => setShowExportModal(null)}
/>
</>
)
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index d106bf4d1..d9ed1c828 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -29,13 +29,13 @@ const ProfileTypeOptions = () => {
const { t } = useI18n()
const navigate = useNavigate()
const [, setValidExploration] = useExploration()
- const [active, setActive] = useState<boolean>(false)
+ const [isExpanded, setIsExpanded] = useState<boolean>(false)
const toggleAccordion = () => {
- if (!active) {
+ if (!isExpanded) {
setValidExploration(UserExplorationID.EXPLORATION001)
}
- setActive(prev => !prev)
+ setIsExpanded(prev => !prev)
}
const goToForm = () => {
@@ -58,7 +58,7 @@ const ProfileTypeOptions = () => {
)}
{profile.isProfileTypeCompleted && (
<Accordion
- expanded={active}
+ expanded={isExpanded}
onChange={toggleAccordion}
classes={{
root: 'expansion-panel-root',
diff --git a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
index c1e63fc33..fb08b5857 100644
--- a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
@@ -5,7 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enums'
import { DateTime } from 'luxon'
import { ProfileType, ProfileTypeAnswer, ProfileTypeValues } from 'models'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
import { formatTwoDigits, getMonthFullName } from 'utils/utils'
interface ProfileTypeFormDateSelectionProps {
@@ -100,10 +100,6 @@ const ProfileTypeFormDateSelection = ({
selectYears.push(i)
}
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
-
const handleNext = () => {
setNextStep({ ...profileType, [answerType.attribute]: answer })
}
@@ -175,7 +171,7 @@ const ProfileTypeFormDateSelection = ({
)}
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disableNextButton={answer === ''}
isLastStep={true}
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
index 2a3c9cfac..07f1895e9 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
@@ -52,10 +52,6 @@ const ProfileTypeFormMultiChoice = ({
return answer.includes(value)
}
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
-
const handleNext = useCallback(() => {
setNextStep({
...currentProfileType,
@@ -108,7 +104,7 @@ const ProfileTypeFormMultiChoice = ({
})}
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disableNextButton={answer.length < 1}
/>
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index 61d317064..321f73ee9 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -31,10 +31,6 @@ const ProfileTypeFormNumber = ({
)
const [answer, setAnswer] = useState<ProfileTypeValues>('')
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
-
const handleNext = useCallback(() => {
setNextStep({ ...currentProfileType, [answerType.attribute]: answer })
}, [currentProfileType, setNextStep, answer, answerType.attribute])
@@ -69,7 +65,7 @@ const ProfileTypeFormNumber = ({
)}
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disableNextButton={answer === ''}
/>
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index 8d733919c..06b84201e 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -41,10 +41,6 @@ const ProfileTypeFormNumberSelection = ({
setIndex(prev => prev + 1)
}
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
-
const handleNext = useCallback(() => {
setNextStep({ ...currentProfileType, [answerType.attribute]: answer })
}, [currentProfileType, setNextStep, answer, answerType.attribute])
@@ -104,7 +100,7 @@ const ProfileTypeFormNumberSelection = ({
)}
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disableNextButton={answer === ''}
/>
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
index 2fc81aa25..0f5216e8f 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
@@ -36,9 +36,6 @@ const ProfileTypeFormSingleChoice = ({
} = useAppSelector(state => state.ecolyo)
const [answer, setAnswer] = useState<ProfileTypeValues>('')
- const handlePrevious = useCallback(() => {
- setPreviousStep()
- }, [setPreviousStep])
const handleNext = useCallback(() => {
setNextStep({ ...currentProfileType, [answerType.attribute]: answer })
@@ -103,7 +100,7 @@ const ProfileTypeFormSingleChoice = ({
})}
</div>
<FormNavigation
- handlePrevious={handlePrevious}
+ handlePrevious={setPreviousStep}
handleNext={handleNext}
disablePrevButton={step === ProfileTypeStepForm.HOUSING_TYPE}
disableNextButton={answer === '' || answer === undefined}
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index d7c716aab..0e3369a04 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -122,8 +122,7 @@ const ProfileTypeView = () => {
const profileTypeFormService = new ProfileTypeFormService(
currentProfileType
)
- const previousStep: ProfileTypeStepForm =
- profileTypeFormService.getPreviousFormStep(step)
+ const previousStep = profileTypeFormService.getPreviousFormStep(step)
setIsLoading(true)
setStep(previousStep)
}, [currentProfileType, step])
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index 4087319de..d7262d8fc 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -23,20 +23,6 @@ const TermsView = () => {
const [openCGUModal, setOpenCGUModal] = useState(false)
const [openLegalNoticeModal, setOpenLegalNoticeModal] = useState(false)
- const toggleCGUModal = () => {
- setOpenCGUModal(prev => !prev)
- }
- const toggleLegalNoticeModal = () => {
- setOpenLegalNoticeModal(prev => !prev)
- }
-
- const handleGCUValidate = () => {
- setGCUValidation(prev => !prev)
- }
- const handleDataConsentValidation = () => {
- setDataConsentValidation(prev => !prev)
- }
-
const handleTermValidate = useCallback(async () => {
const termsService = new TermsService(client)
const createdTerm = await termsService.createTerm()
@@ -63,7 +49,7 @@ const TermsView = () => {
type="checkbox"
name="Data-consent-validation"
className="inputCheckbox"
- onChange={handleDataConsentValidation}
+ onChange={e => setDataConsentValidation(e.target.checked)}
checked={dataConsentValidation}
/>
{t('dataShare.validDataConsent')}
@@ -74,7 +60,7 @@ const TermsView = () => {
type="checkbox"
name="GCU-validation"
className="inputCheckbox"
- onChange={handleGCUValidate}
+ onChange={e => setGCUValidation(e.target.checked)}
checked={GCUValidation}
/>
<div>
@@ -82,7 +68,7 @@ const TermsView = () => {
<Button
size="small"
className="btnText"
- onClick={toggleCGUModal}
+ onClick={() => setOpenCGUModal(true)}
>
{t('dataShare.validCGU_button')}
</Button>
@@ -91,7 +77,7 @@ const TermsView = () => {
<Button
size="small"
className="btnText"
- onClick={toggleLegalNoticeModal}
+ onClick={() => setOpenLegalNoticeModal(true)}
>
{t('dataShare.validLegal_button')}
</Button>
@@ -127,10 +113,13 @@ const TermsView = () => {
</>
)}
- <CGUModal open={openCGUModal} handleCloseClick={toggleCGUModal} />
+ <CGUModal
+ open={openCGUModal}
+ handleCloseClick={() => setOpenCGUModal(false)}
+ />
<LegalNoticeModal
open={openLegalNoticeModal}
- handleCloseClick={toggleLegalNoticeModal}
+ handleCloseClick={() => setOpenLegalNoticeModal(false)}
/>
</div>
)
--
GitLab