diff --git a/src/components/Action/ActionBegin/ActionBegin.tsx b/src/components/Action/ActionBegin/ActionBegin.tsx index f9cdae3e552e1e9e89dbdfc02d0b8fb285f5df7e..880b904f839394e15b920153a6111dceab912ad9 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 b14f909d5324041a112bc3a0538d48ef63028282..75c04ea0859f46faea90b98aef4471bc12c22e2c 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 81d15d6abb3eaec8e75a98ac99d64f00f6799e3b..d6e36fe48ae9a4b8bf74a0f70a781d28018d2842 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 4c977c1746a4286808cb9dd47a64990ed6ecbf2f..a8611f6d0468ba324dd31caf734b0c6488dab2c5 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 fa2c357fbb80de311e2ac2865b6d907855de176f..a7ee2e698aca2fb1a4d95601ccd9bd5da5993c85 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 381a846028beec7849346c46e4cf5484949a4aee..6e75e12edacb1b00e73a65b3de0d3f7be8b0684e 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 90e2d0253851d8285065acfa4a45f59b088564d9..0b36bc41ba1b3cbc27a146527b9a4308497401ff 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 501191f56856c0d1265466308d8339b0af701604..90db508772bd64a1f1e1870f654e59e980027e9d 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 cdeb8d6ced57367c32eee675b20683aba75b66dd..639677e9d9826c25ac611aeae8ccd69becafec12 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 a33ba27feaa1d76183d5a6143f5e686e77f2ace9..2bbafcead7034e59401ebe6952fa7cf23b691fc9 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 4ba5e56579766252c2dbff3a9d7a7334b131c578..ff7db3b2755c3aa716809a0c8577faa300e78dcf 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 f633f9458f81e7871e01aa9c485b02523edf9baf..6a79150325643d1b99fa30281eab1545aa26a632 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 e28a077ee9150bb6862ee91bb293b8582f007ddd..6e38fa737e66acd5e9baa6ccac631f1b373ffe12 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 2c0381eb6f25890ee3a081d8f4d7801222095876..c3a9b1a081b4970ac190095e3b995594a8d4ab08 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 6d9f119e6740e2b8bda49f8c02c8652400a3a524..0580715cbf343fc7a447a99586c0fd0f9116e380 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 afecdca34284d19092dcb34d68d2ed47c49ff92c..d5327b447e067ca95eb3d8eaa1c46a2d0932d912 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 3254cab1b5023afba53c6a495c5b653feb01ec27..13a60e4be98f167cb1f61d86aaa102607d61a519 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 4852439abc3a8be68c3a3f3a5ac3afb51c3a4008..01a1093e44da5603cbeb41e4b3d401b219801e5a 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 21401195fa52659828157655c6669b9c9e41c349..5bafacadc17325471e9b481f95332591da58a019 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 2231b9fad5dcebfd100e3cde624a67a7de318066..df6806976153c93b8bfd98da3c1eda7d5ec3b3d4 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 69faad6e0046c4d7569b9f25e3399b6e0202c369..30d505fac0627dcde4fa12bfdcaeeb33c04625ab 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 5127480c547af8ada1f7bc66b8f6b3e3ce970038..94365745aab31c7f23204de092724fca3367fb8a 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 d106bf4d1effb5d01f8104cd00bfbb6afd62cca8..d9ed1c828754438af9be7f61094272af105ecb4f 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 c1e63fc33d4b952ce125fdb309376e1066800503..fb08b585756d0410455672dc8ead00a393e3f669 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 2a3c9cfac0a6275e6c409c307dad16ed9ec734ad..07f1895e9dc293df45da3d0b99395d4207457680 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 61d317064e8565d87c1793b4d5d15b0b7c11cb89..321f73ee9dad17adcd437e17239d3ce06ff173cb 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 8d733919cc4e7f5b395d7b4d3ea8f6da2e8c6050..06b84201e2e01bb60d1abaf69b3b1d89726861e9 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 2fc81aa25bc284c25999e7b688f108426f99bf75..0f5216e8f7f333c02c64627bb3c0046e710f016d 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 d7c716aab43ddbf67ac87bb35a3b855bb4466f9b..0e3369a047fba8d9cfe4a8108920b9730cf3885a 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 4087319de1ea026307e2c0b567cdf5ea598b486c..d7262d8fc8f6677f3b65914683fed9701ce294e0 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> )