From 96ef8ca49e680464f63c4b7ac292c720d208ad83 Mon Sep 17 00:00:00 2001
From: Renovate-Bot <le.rameur.94@gmail.com>
Date: Wed, 1 Feb 2023 08:01:49 +0000
Subject: [PATCH] fix(deps): update dependency react-router-dom to v6
---
.vscode/settings.json | 2 +
package.json | 6 +-
src/components/Action/ActionBegin.spec.tsx | 16 +-
src/components/Action/ActionBegin.tsx | 22 +-
src/components/Action/ActionCard.spec.tsx | 6 +-
src/components/Action/ActionCard.tsx | 16 +-
src/components/Action/ActionDone.spec.tsx | 6 +-
src/components/Action/ActionDone.tsx | 26 +-
src/components/Action/ActionOnGoing.spec.tsx | 6 +-
src/components/Action/ActionView.spec.tsx | 5 +
.../Analysis/AnalysisConsumption.spec.tsx | 8 +-
.../Analysis/AnalysisConsumption.tsx | 6 +-
.../Analysis/AnalysisError.spec.tsx | 8 +-
.../Analysis/AnalysisErrorModal.tsx | 10 +-
.../Analysis/ElecHalfHourMonthlyAnalysis.tsx | 6 +-
.../Analysis/elecHalfHourMonthlyAnalysis.scss | 3 -
src/components/App.tsx | 54 +--
.../Challenge/ChallengeCardDone.spec.tsx | 14 +-
.../Challenge/ChallengeCardDone.tsx | 28 +-
.../Challenge/ChallengeCardOnGoing.tsx | 17 +-
.../Challenge/ChallengeCardUnlocked.spec.tsx | 4 +-
.../Challenge/ChallengeCardUnlocked.tsx | 24 +-
.../CommonKit/ErrorPage/ErrorPage.spec.tsx | 14 +-
.../CommonKit/ErrorPage/ErrorPage.tsx | 8 +-
src/components/Connection/Connection.spec.tsx | 5 +
.../Connection/ExpiredConsentModal.spec.tsx | 24 +-
.../Connection/ExpiredConsentModal.tsx | 20 +-
.../SGEConnect/SgeConnectView.spec.tsx | 15 +-
.../Connection/SGEConnect/SgeInit.spec.tsx | 8 +-
.../Connection/SGEConnect/SgeInit.tsx | 6 +-
src/components/Content/Content.tsx | 31 +-
src/components/Duel/DuelEmptyValueModal.tsx | 10 +-
src/components/Duel/DuelError.spec.tsx | 10 +-
src/components/Duel/DuelError.tsx | 12 +-
src/components/Duel/DuelOngoing.spec.tsx | 22 +-
src/components/Duel/DuelOngoing.tsx | 49 +-
src/components/Duel/DuelResultModal.spec.tsx | 13 +-
src/components/Duel/DuelResultModal.tsx | 12 +-
src/components/Duel/DuelUnlocked.spec.tsx | 20 +-
src/components/Duel/DuelUnlocked.tsx | 16 +-
src/components/Duel/DuelView.spec.tsx | 16 +-
src/components/Duel/DuelView.tsx | 6 +-
.../Ecogesture/EcogestureCard.spec.tsx | 20 +-
src/components/Ecogesture/EcogestureCard.tsx | 16 +-
.../Ecogesture/EcogestureEmptyList.spec.tsx | 8 +-
.../Ecogesture/EcogestureEmptyList.tsx | 13 +-
.../Ecogesture/EcogestureInitModal.spec.tsx | 18 +-
src/components/Ecogesture/EcogestureList.tsx | 32 +-
.../Ecogesture/EcogestureModal.spec.tsx | 18 +-
src/components/Ecogesture/EcogestureModal.tsx | 20 +-
.../Ecogesture/EcogestureReinitModal.spec.tsx | 12 +-
.../Ecogesture/EcogestureView.spec.tsx | 27 +-
src/components/Ecogesture/EcogestureView.tsx | 16 +-
.../Ecogesture/SingleEcogesture.spec.tsx | 85 ++--
.../Ecogesture/SingleEcogesture.tsx | 233 +++++-----
.../EcogestureCard.spec.tsx.snap | 434 +++++++++---------
.../EcogestureList.spec.tsx.snap | 20 +-
.../SingleEcogesture.spec.tsx.snap | 21 +-
.../Ecogesture/singleEcogesture.scss | 9 -
.../EcogestureFormEquipment.spec.tsx | 12 +-
.../EcogestureFormEquipment.tsx | 26 +-
.../EcogestureFormSingleChoice.spec.tsx | 15 +-
.../EcogestureFormView.spec.tsx | 14 +-
.../EcogestureForm/EcogestureFormView.tsx | 5 +-
.../EcogestureForm/EquipmentIcon.spec.tsx | 14 +-
.../EcogestureForm/EquipmentIcon.tsx | 6 +-
.../EcogestureForm/ecogestureFormView.scss | 12 -
.../EcogestureSelection.spec.tsx | 12 +-
.../EcogestureSelection.tsx | 6 +-
.../EcogestureSelectionDetail.spec.tsx | 24 +-
.../EcogestureSelectionDetail.tsx | 16 +-
.../EcogestureSelectionEnd.spec.tsx | 14 +-
.../EcogestureSelectionEnd.tsx | 16 +-
.../EcogestureSelectionRestart.spec.tsx | 14 +-
.../EcogestureSelectionRestart.tsx | 16 +-
.../Exploration/ExplorationError.spec.tsx | 10 +-
.../Exploration/ExplorationError.tsx | 12 +-
.../Exploration/ExplorationFinished.spec.tsx | 15 +-
.../Exploration/ExplorationFinished.tsx | 30 +-
.../Exploration/ExplorationOngoing.spec.tsx | 8 +-
.../Exploration/ExplorationOngoing.tsx | 26 +-
.../FormGlobal/FormNavigation.spec.tsx | 12 +-
src/components/FormGlobal/FormNavigation.tsx | 6 +-
src/components/GCU/GCULink.tsx | 12 +-
.../GCU/__snapshots__/GCULink.spec.tsx.snap | 9 +-
src/components/Header/CozyBar.spec.tsx | 15 +-
src/components/Header/CozyBar.tsx | 8 +-
src/components/Header/Header.spec.tsx | 9 +-
src/components/Header/Header.tsx | 19 +-
src/components/Home/ConsumptionView.spec.tsx | 5 +
src/components/Home/ConsumptionView.tsx | 8 +-
src/components/Home/FluidButton.spec.tsx | 13 +-
src/components/Home/FluidButton.tsx | 13 +-
src/components/Home/FluidButtons.spec.tsx | 9 +-
.../Konnector/KonnectorModal.spec.tsx | 13 +-
.../Konnector/KonnectorModalFooter.spec.tsx | 13 +-
.../Konnector/KonnectorModalFooter.tsx | 12 +-
.../Konnector/KonnectorViewerList.spec.tsx | 12 +-
.../Konnector/KonnectorViewerList.tsx | 19 +-
.../LegalNotice/LegalNoticeLink.tsx | 12 +-
.../LegalNoticeLink.spec.tsx.snap | 9 +-
src/components/Navbar/Navbar.tsx | 28 +-
src/components/Options/HelpLink/HelpLink.scss | 1 +
.../ProfileTypeOptions.spec.tsx | 6 +-
.../ProfileTypeOptions/ProfileTypeOptions.tsx | 30 +-
.../Options/Unsubscribe/UnSubscribe.spec.tsx | 11 +-
.../Options/Unsubscribe/UnSubscribe.tsx | 6 +-
.../ProfileType/ProfileTypeFinished.spec.tsx | 16 +-
.../ProfileType/ProfileTypeFinished.tsx | 8 +-
.../ProfileTypeFormMultiChoice.spec.tsx | 18 +-
.../ProfileTypeFormNumber.spec.tsx | 17 +-
.../ProfileTypeFormNumberSelection.spec.tsx | 17 +-
.../ProfileTypeFormSingleChoice.spec.tsx | 17 +-
.../ProfileType/ProfileTypeView.spec.tsx | 9 +-
.../Quiz/QuizCustomQuestionContent.spec.tsx | 2 +-
src/components/Quiz/QuizFinish.spec.tsx | 20 +-
src/components/Quiz/QuizFinish.tsx | 20 +-
src/components/Quiz/QuizQuestion.spec.tsx | 10 +-
src/components/Quiz/QuizQuestion.tsx | 16 +-
.../Quiz/QuizQuestionContent.spec.tsx | 20 +-
src/components/Routes/Routes.tsx | 110 +++--
src/components/Terms/TermsView.spec.tsx | 5 +
src/components/Terms/TermsView.tsx | 22 +-
src/services/ecogesture.service.ts | 4 +-
src/styles/index.scss | 6 +
src/utils/utils.ts | 8 +-
yarn.lock | 113 ++---
127 files changed, 1326 insertions(+), 1377 deletions(-)
delete mode 100644 src/components/EcogestureForm/ecogestureFormView.scss
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ec02b433c..1f1e7b0bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -79,6 +79,7 @@
"konnectors",
"lastname",
"Lugdunum",
+ "legalnotice",
"luxon",
"matomo",
"Matomo",
@@ -88,6 +89,7 @@
"MULTIFLUID",
"mutlifluid",
"Picto",
+ "profiletype",
"PROFILETYPE",
"Reinit",
"splashscreen",
diff --git a/package.json b/package.json
index 43b7cc975..932f0c84b 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
"global": "^4.4.0",
"handlebars": "^4.7.7",
"handlebars-loader": "^1.7.1",
+ "history": "^5.3.0",
"lodash": "^4.17.15",
"mjml-browser": "^4.10.2",
"null-loader": "^4.0.1",
@@ -75,7 +76,7 @@
"react": "16.14.0",
"react-dom": "16.14.0",
"react-redux": "^7.2.2",
- "react-router-dom": "5.3.3",
+ "react-router-dom": "^6.6.1",
"react-swipeable-views": "0.14.0",
"redux-devtools-extension": "^2.13.8",
"xlsx": "^0.18.5"
@@ -87,7 +88,6 @@
"@types/d3": "^6.0.0",
"@types/enzyme": "^3.10.8",
"@types/file-saver": "^2.0.5",
- "@types/history": "^4.7.5",
"@types/jest": "^29.0.0",
"@types/lodash": "^4.14.149",
"@types/luxon": "^3.0.0",
@@ -97,7 +97,7 @@
"@types/react-dom": "^16.9.8",
"@types/react-lottie": "^1.2.3",
"@types/react-redux": "^7.1.11",
- "@types/react-router-dom": "^5.1.3",
+ "@types/react-router-dom": "^5.3.3",
"@types/redux-mock-store": "^1.0.2",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx
index 5193fdc06..e660968f8 100644
--- a/src/components/Action/ActionBegin.spec.tsx
+++ b/src/components/Action/ActionBegin.spec.tsx
@@ -35,11 +35,11 @@ jest.mock('services/action.service', () => {
}
})
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
@@ -54,7 +54,7 @@ describe('ActionBegin component', () => {
profile: profileData,
},
})
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<Provider store={store}>
@@ -77,7 +77,7 @@ describe('ActionBegin component', () => {
AllEcogestureData[5],
AllEcogestureData[2],
])
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -108,7 +108,7 @@ describe('ActionBegin component', () => {
profile: profileData,
},
})
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<Provider store={store}>
@@ -133,7 +133,7 @@ describe('ActionBegin component', () => {
profile: profileData,
},
})
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<Provider store={store}>
@@ -160,7 +160,7 @@ describe('ActionBegin component', () => {
profile: profileData,
},
})
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<Provider store={store}>
diff --git a/src/components/Action/ActionBegin.tsx b/src/components/Action/ActionBegin.tsx
index ca25da039..c1c45183b 100644
--- a/src/components/Action/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin.tsx
@@ -1,17 +1,17 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import { Button } from '@material-ui/core'
+import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import ActionModal from 'components/Action/ActionModal'
+import StarsContainer from 'components/Challenge/StarsContainer'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector } from 'react-redux'
import { Ecogesture, UserChallenge } from 'models'
-import StarsContainer from 'components/Challenge/StarsContainer'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import ActionModal from 'components/Action/ActionModal'
-import './actionBegin.scss'
-import { AppStore } from 'store'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import ActionService from 'services/action.service'
-import { importIconbyId } from 'utils/utils'
-import { Button } from '@material-ui/core'
-import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import { AppStore } from 'store'
+import { importIconById } from 'utils/utils'
+import './actionBegin.scss'
interface ActionBeginProps {
action?: Ecogesture
@@ -68,7 +68,7 @@ const ActionBegin: React.FC<ActionBeginProps> = ({
useEffect(() => {
async function handleEcogestureIcon() {
if (currentAction) {
- const icon = await importIconbyId(currentAction.id, 'ecogesture')
+ const icon = await importIconById(currentAction.id, 'ecogesture')
if (icon) {
setActionIcon(icon)
} else {
diff --git a/src/components/Action/ActionCard.spec.tsx b/src/components/Action/ActionCard.spec.tsx
index 39f844c42..b91d9de04 100644
--- a/src/components/Action/ActionCard.spec.tsx
+++ b/src/components/Action/ActionCard.spec.tsx
@@ -21,11 +21,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index 6dcfbfac6..fa5299b08 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import { Ecogesture } from 'models'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { importIconbyId } from 'utils/utils'
-import './actionList.scss'
import { Button } from '@material-ui/core'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import UsageEventService from 'services/usageEvent.service'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import { useClient } from 'cozy-client'
import { UsageEventType } from 'enum/usageEvent.enum'
+import { Ecogesture } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
+import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
+import { importIconById } from 'utils/utils'
+import './actionList.scss'
interface ActionCardProps {
action: Ecogesture
@@ -53,7 +53,7 @@ const ActionCard: React.FC<ActionCardProps> = ({
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(action.id, 'ecogesture')
+ const icon = await importIconById(action.id, 'ecogesture')
if (icon) {
setActionIcon(icon)
} else {
diff --git a/src/components/Action/ActionDone.spec.tsx b/src/components/Action/ActionDone.spec.tsx
index b22aad89d..b5071b647 100644
--- a/src/components/Action/ActionDone.spec.tsx
+++ b/src/components/Action/ActionDone.spec.tsx
@@ -26,12 +26,10 @@ jest.mock('services/usageEvent.service')
const mockAddEvent = jest.fn()
UsageEventService.addEvent = mockAddEvent
-const mockHistoryGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- goBack: mockHistoryGoBack,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockupdateUserChallenge = jest.fn()
jest.mock('services/challenge.service', () => {
diff --git a/src/components/Action/ActionDone.tsx b/src/components/Action/ActionDone.tsx
index b5d5731bd..c48385348 100644
--- a/src/components/Action/ActionDone.tsx
+++ b/src/components/Action/ActionDone.tsx
@@ -1,19 +1,19 @@
-import React, { useCallback } from 'react'
-import { UserChallenge } from 'models'
import { Button } from '@material-ui/core'
+import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UsageEventType } from 'enum/usageEvent.enum'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
+import UsageEventService from 'services/usageEvent.service'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { useDispatch } from 'react-redux'
-import { useClient } from 'cozy-client'
-import { useHistory } from 'react-router-dom'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
-import './actionDone.scss'
import { toggleChallengeActionNotification } from 'store/global/global.actions'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import UsageEventService from 'services/usageEvent.service'
+import './actionDone.scss'
interface ActionDoneProps {
currentChallenge: UserChallenge
}
@@ -24,7 +24,7 @@ const ActionDone: React.FC<ActionDoneProps> = ({
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const handleEndAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
const updatedChallenge: UserChallenge =
@@ -42,8 +42,8 @@ const ActionDone: React.FC<ActionDoneProps> = ({
})
dispatch(toggleChallengeActionNotification(false))
dispatch(updateUserChallengeList(updatedChallenge))
- history.goBack()
- }, [currentChallenge, dispatch, client, history])
+ navigate(-1)
+ }, [currentChallenge, dispatch, client, navigate])
return (
<div className="action-done-container">
diff --git a/src/components/Action/ActionOnGoing.spec.tsx b/src/components/Action/ActionOnGoing.spec.tsx
index 7b2d03478..db8fec3a7 100644
--- a/src/components/Action/ActionOnGoing.spec.tsx
+++ b/src/components/Action/ActionOnGoing.spec.tsx
@@ -23,11 +23,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index 50040a437..d6bd172a6 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -21,6 +21,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
jest.mock('components/Content/Content', () => 'mock-content')
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index 4dfb6ac44..1595ec68f 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -27,12 +27,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockgetMonthlyForecast = jest.fn()
@@ -300,6 +298,6 @@ describe('AnalysisConsumption component', () => {
wrapper.update()
})
wrapper.find(Button).first().simulate('click')
- expect(mockHistoryPush).toBeCalledWith('/profileType')
+ expect(mockedNavigate).toBeCalledWith('/profileType')
})
})
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index ea850893a..daa4d07f3 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -20,7 +20,7 @@ import { PerformanceIndicator, Profile } from 'models'
import { MonthlyForecast, ProfileType } from 'models/profileType.model'
import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import ProfileTypeService from 'services/profileType.service'
import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import { AppStore } from 'store'
@@ -38,7 +38,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
analysisDate,
}: AnalysisConsumptionProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const client: Client = useClient()
const userPriceConsumption: number = aggregatedPerformanceIndicator.value || 0
const profile: Profile = useSelector(
@@ -97,7 +97,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
)
const goToForm = () => {
- history.push('/profileType')
+ navigate('/profileType')
}
useEffect(() => {
diff --git a/src/components/Analysis/AnalysisError.spec.tsx b/src/components/Analysis/AnalysisError.spec.tsx
index b612c1422..1c8fbc8f0 100644
--- a/src/components/Analysis/AnalysisError.spec.tsx
+++ b/src/components/Analysis/AnalysisError.spec.tsx
@@ -17,14 +17,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
-const mockHistoryGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- goBack: mockHistoryGoBack,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockStore = configureStore([])
diff --git a/src/components/Analysis/AnalysisErrorModal.tsx b/src/components/Analysis/AnalysisErrorModal.tsx
index 561e0e0e2..85f095056 100644
--- a/src/components/Analysis/AnalysisErrorModal.tsx
+++ b/src/components/Analysis/AnalysisErrorModal.tsx
@@ -2,19 +2,19 @@ import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import './analysisError.scss'
const AnalysisErrorModal: React.FC = () => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const goToConsumption = () => {
- history.push('/consumption')
+ navigate('/consumption')
}
const goBack = () => {
if (history.length <= 2) {
- history.push('/consumption')
- } else history.goBack()
+ navigate('/consumption')
+ } else navigate(-1)
}
return (
<Dialog
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index c80479c0b..58165f30c 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -178,11 +178,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
<Icon icon={RightArrowIcon} size={24} />
</IconButton>
</div>
- {isLoading && (
- <div className="loader-container">
- <Loader color="elec" />
- </div>
- )}
+ {isLoading && <Loader color="elec" />}
{!isLoading && (
<>
{getPowerChart()}
diff --git a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
index 1c91ccaf0..4ea1ba5de 100644
--- a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
@@ -73,9 +73,6 @@
.consomin {
min-height: 100px;
}
- .loader-container {
- text-align: center;
- }
.no_data {
text-align: center;
color: white;
diff --git a/src/components/App.tsx b/src/components/App.tsx
index cd290bbd0..5de0b8509 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,17 +1,15 @@
-import React, { useEffect } from 'react'
-import { HashRouter } from 'react-router-dom'
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-
-import Routes from 'components/Routes/Routes'
import Navbar from 'components/Navbar/Navbar'
+import WelcomeModal from 'components/Onboarding/WelcomeModal'
+import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot'
import SplashScreen from 'components/Splash/SplashScreen'
import SplashScreenError from 'components/Splash/SplashScreenError'
-import WelcomeModal from 'components/Onboarding/WelcomeModal'
-import MatomoTracker from 'utils/matomoTracker'
+import { Content, Layout, Main } from 'cozy-ui/transpiled/react/Layout'
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
import EnvironmentService from 'services/environment.service'
+import { AppStore } from 'store'
+import MatomoTracker from 'utils/matomoTracker'
interface AppProps {
tracker: MatomoTracker
@@ -34,26 +32,24 @@ export const App = ({ tracker }: AppProps) => {
}, [termsStatus.accepted, tracker, isDev])
return (
- <HashRouter {...history}>
- <Layout>
- <SplashRoot
- splashComponent={SplashScreen}
- splashErrorComponent={SplashScreenError}
- >
- {termsStatus.accepted && (
- <>
- <WelcomeModal open={!onboarding.isWelcomeSeen} />
- <Navbar />
- </>
- )}
- <Main>
- <Content className="app-content">
- <Routes termsStatus={termsStatus} />
- </Content>
- </Main>
- </SplashRoot>
- </Layout>
- </HashRouter>
+ <Layout>
+ <SplashRoot
+ splashComponent={SplashScreen}
+ splashErrorComponent={SplashScreenError}
+ >
+ {termsStatus.accepted && (
+ <>
+ <WelcomeModal open={!onboarding.isWelcomeSeen} />
+ <Navbar />
+ </>
+ )}
+ <Main>
+ <Content className="app-content">
+ <AppRoutes termsStatus={termsStatus} />
+ </Content>
+ </Main>
+ </SplashRoot>
+ </Layout>
)
}
diff --git a/src/components/Challenge/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone.spec.tsx
index aed2d7c32..e447ca39f 100644
--- a/src/components/Challenge/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone.spec.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { shallow } from 'enzyme'
import ChallengeCardDone from 'components/Challenge/ChallengeCardDone'
+import { shallow } from 'enzyme'
+import React from 'react'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -12,16 +12,22 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
const mockFormatNumberValues = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => mockImportIconbyId),
+ importIconById: jest.fn(() => mockImportIconById),
formatNumberValues: jest.fn(() => mockFormatNumberValues),
getChallengeTitleWithLineReturn: jest.fn(() => 'Challenge 1'),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('ChallengeCardDone component', () => {
it('should be rendered correctly', () => {
const component = shallow(
diff --git a/src/components/Challenge/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone.tsx
index 5ad7f626d..969e55c0f 100644
--- a/src/components/Challenge/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone.tsx
@@ -1,18 +1,18 @@
-import React, { useEffect, useState } from 'react'
-import './challengeCardDone.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Button } from '@material-ui/core'
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
import classNames from 'classnames'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeSuccess } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
import {
formatNumberValues,
getChallengeTitleWithLineReturn,
- importIconbyId,
+ importIconById,
} from 'utils/utils'
-import { UserChallenge } from 'models'
-import { UserChallengeSuccess } from 'enum/userChallenge.enum'
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useHistory } from 'react-router-dom'
-import { Button } from '@material-ui/core'
+import './challengeCardDone.scss'
interface ChallengeCardDoneProps {
userChallenge: UserChallenge
@@ -22,7 +22,7 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
userChallenge,
}: ChallengeCardDoneProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const [winIcon, setWinIcon] = useState<string>(defaultIcon)
const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
@@ -51,18 +51,18 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
}
const goDuel = async () => {
- history.push('/challenges/duel?id=' + userChallenge.id)
+ navigate('/challenges/duel?id=' + userChallenge.id)
}
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(userChallenge.id + '-1', 'duelResult')
+ const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
if (icon) {
setWinIcon(icon)
} else {
setWinIcon(defaultIcon)
}
- const icon2 = await importIconbyId(userChallenge.id + '-0', 'duelResult')
+ const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
if (icon2) {
setLossIcon(icon2)
} else {
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 586a2c371..9933fcbee 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -17,11 +17,11 @@ import { UserQuizState } from 'enum/userQuiz.enum'
import { UserChallenge } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { AppStore } from 'store'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { getChallengeTitleWithLineReturn, importIconbyId } from 'utils/utils'
+import { getChallengeTitleWithLineReturn, importIconById } from 'utils/utils'
import './challengeCardOnGoing.scss'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import StarsContainer from './StarsContainer'
@@ -35,7 +35,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const [isOneFluidUp, setIsOneFluidUp] = useState<boolean>(true)
const [challengeIcon, setChallengeIcon] = useState<string>(defaultIcon)
const [isDone, setisDone] = useState<boolean>(false)
@@ -63,7 +63,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
dispatch(updateUserChallengeList(updatedChallenge))
}
setIsLoading(false)
- history.push('/challenges/duel?id=' + userChallenge.id)
+ navigate('/challenges/duel?id=' + userChallenge.id)
} else {
setIsLoading(false)
toggleNoFluidModal()
@@ -78,22 +78,21 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
)
dispatch(updateUserChallengeList(updatedChallenge))
}
- if (userChallenge.progress.quizProgress !== 5)
- history.push('/challenges/quiz')
+ if (userChallenge.progress.quizProgress !== 5) navigate('/challenges/quiz')
}
const goExploration = () => {
if (userChallenge.progress.explorationProgress !== 5)
- history.push('/challenges/exploration')
+ navigate('/challenges/exploration')
}
const goAction = () => {
if (userChallenge.progress.actionProgress !== 5)
- history.push('/challenges/action')
+ navigate('/challenges/action')
}
useEffect(() => {
let subscribed = true
async function importIcon() {
- importIconbyId(userChallenge.id, 'challenge').then(icon => {
+ importIconById(userChallenge.id, 'challenge').then(icon => {
if (subscribed) {
icon ? setChallengeIcon(icon) : setChallengeIcon(defaultChallengeIcon)
}
diff --git a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
index b455ad417..3a8dcbb18 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
@@ -26,10 +26,10 @@ jest.mock('services/challenge.service', () => {
}
})
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => mockImportIconbyId),
+ importIconById: jest.fn(() => mockImportIconById),
getChallengeTitleWithLineReturn: jest.fn(() => 'Challenge 1'),
}
})
diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx
index eaf5718d1..60603710c 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.tsx
@@ -1,20 +1,20 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import Button from '@material-ui/core/Button'
+import defaultIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidState } from 'enum/fluid.enum'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import ChallengeService from 'services/challenge.service'
+import UsageEventService from 'services/usageEvent.service'
+import { AppStore } from 'store'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { getChallengeTitleWithLineReturn, importIconById } from 'utils/utils'
import './challengeCardUnlocked.scss'
-import { UserChallenge } from 'models'
-import ChallengeService from 'services/challenge.service'
-import Button from '@material-ui/core/Button'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
-import { AppStore } from 'store'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import defaultIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
-import { getChallengeTitleWithLineReturn, importIconbyId } from 'utils/utils'
-import UsageEventService from 'services/usageEvent.service'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import { FluidState } from 'enum/fluid.enum'
interface ChallengeCardUnlockedProps {
userChallenge: UserChallenge
@@ -70,7 +70,7 @@ const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(userChallenge.id, 'challenge')
+ const icon = await importIconById(userChallenge.id, 'challenge')
if (icon) {
setChallengeIcon(icon)
}
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
index abaea68bc..c916c501d 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
@@ -1,12 +1,12 @@
/* eslint-disable react/display-name */
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
+import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../../tests/__mocks__/globalStateData.mock'
-import { Provider } from 'react-redux'
import ErrorPage from './ErrorPage'
-import { Button } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -17,12 +17,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
jest.mock('components/Header/Header', () => () => <div id="Header" />)
@@ -60,6 +58,6 @@ describe('ErrorPage component', () => {
</Provider>
)
wrapper.find(Button).simulate('click')
- expect(mockHistoryPush).toHaveBeenCalledWith('/ecogestures')
+ expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures')
})
})
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
index 58341fef5..4142f1c9b 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
@@ -6,7 +6,7 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useCallback, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import './errorPage.scss'
interface ErrorPageProps {
@@ -18,7 +18,7 @@ const ErrorPage: React.FC<ErrorPageProps> = ({
text,
returnPage,
}: ErrorPageProps) => {
- const history = useHistory()
+ const navigate = useNavigate()
const { t } = useI18n()
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -26,8 +26,8 @@ const ErrorPage: React.FC<ErrorPageProps> = ({
setHeaderHeight(height)
}
const handleClick = useCallback(() => {
- history.push(`/${returnPage}`)
- }, [history, returnPage])
+ navigate(`/${returnPage}`)
+ }, [navigate, returnPage])
return (
<>
<CozyBar titleKey={'error_page.main'} />
diff --git a/src/components/Connection/Connection.spec.tsx b/src/components/Connection/Connection.spec.tsx
index 20cb2ada3..d339c9b71 100644
--- a/src/components/Connection/Connection.spec.tsx
+++ b/src/components/Connection/Connection.spec.tsx
@@ -29,6 +29,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
const mockStore = configureStore([])
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
diff --git a/src/components/Connection/ExpiredConsentModal.spec.tsx b/src/components/Connection/ExpiredConsentModal.spec.tsx
index 4dd3fb845..74ba58c51 100644
--- a/src/components/Connection/ExpiredConsentModal.spec.tsx
+++ b/src/components/Connection/ExpiredConsentModal.spec.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
+import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import ExpiredConsentModal from './ExpiredConsentModal'
-import { FluidType } from 'enum/fluid.enum'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import React from 'react'
+import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import { Button } from '@material-ui/core'
-import * as reactRedux from 'react-redux'
import { fluidStatusConnectedData } from '../../../tests/__mocks__/fluidStatusData.mock'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import ExpiredConsentModal from './ExpiredConsentModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -19,12 +19,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockToggleModal = jest.fn()
const mockHandleCloseClick = jest.fn()
@@ -37,7 +35,7 @@ describe('ExpiredConsentModal component', () => {
},
})
beforeEach(() => {
- mockHistoryPush.mockReset()
+ mockedNavigate.mockReset()
})
it('should be rendered correctly', () => {
const component = mount(
@@ -68,7 +66,7 @@ describe('ExpiredConsentModal component', () => {
)
component.find(Button).at(1).simulate('click')
expect(useDispatchSpy).toHaveBeenCalledTimes(1)
- expect(mockHistoryPush).toHaveBeenCalledTimes(1)
+ expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
it('should launch the update consent process for Enedis', () => {
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
@@ -87,7 +85,7 @@ describe('ExpiredConsentModal component', () => {
)
component.find(Button).at(1).simulate('click')
expect(useDispatchSpy).toHaveBeenCalledTimes(2)
- expect(mockHistoryPush).toHaveBeenCalledTimes(1)
+ expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
it('should click on close modal', () => {
const component = mount(
diff --git a/src/components/Connection/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal.tsx
index 96dd6a33b..792c8301f 100644
--- a/src/components/Connection/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal.tsx
@@ -1,21 +1,21 @@
-import React, { useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
import GrdfIcon from 'assets/icons/ico/consent-outdated-grdf.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import { Button, IconButton } from '@material-ui/core'
import { FluidType } from 'enum/fluid.enum'
-import './expiredConsentModal.scss'
-import { useHistory } from 'react-router-dom'
+import { AccountSgeData } from 'models'
+import React, { useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { AppStore } from 'store'
import {
setShouldRefreshConsent,
updateSgeStore,
} from 'store/global/global.actions'
-import { AppStore } from 'store'
-import { AccountSgeData } from 'models'
+import './expiredConsentModal.scss'
interface ExpiredConsentModalProps {
open: boolean
@@ -31,7 +31,7 @@ const ExpiredConsentModal: React.FC<ExpiredConsentModalProps> = ({
toggleModal,
}: ExpiredConsentModalProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const dispatch = useDispatch()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
@@ -57,8 +57,8 @@ const ExpiredConsentModal: React.FC<ExpiredConsentModalProps> = ({
dispatch(setShouldRefreshConsent(true))
}
toggleModal()
- history.push(`/consumption/${FluidType[fluidType].toLocaleLowerCase()}`)
- }, [dispatch, fluidStatus, fluidType, history, toggleModal])
+ navigate(`/consumption/${FluidType[fluidType].toLocaleLowerCase()}`)
+ }, [dispatch, fluidStatus, fluidType, navigate, toggleModal])
return (
<Dialog
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
index 5f768c23a..cc0478b20 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import { SgeStep } from 'enum/sgeStep.enum'
import { mount } from 'enzyme'
-import configureStore from 'redux-mock-store'
+import toJson from 'enzyme-to-json'
+import React from 'react'
+import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../../tests/__mocks__/globalStateData.mock'
-import toJson from 'enzyme-to-json'
import SgeConnectView from './SgeConnectView'
-import * as reactRedux from 'react-redux'
-import { SgeStep } from 'enum/sgeStep.enum'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -17,6 +17,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
jest.mock('components/Content/Content', () => 'mock-content')
jest.mock('components/FormGlobal/FormProgress', () => 'mock-formprogress')
diff --git a/src/components/Connection/SGEConnect/SgeInit.spec.tsx b/src/components/Connection/SGEConnect/SgeInit.spec.tsx
index 8755cca5b..dc745f6f3 100644
--- a/src/components/Connection/SGEConnect/SgeInit.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.spec.tsx
@@ -22,12 +22,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockConnect = jest.fn()
@@ -64,7 +62,7 @@ describe('SgeInit component', () => {
</Provider>
)
wrapper.find(Button).first().simulate('click')
- expect(mockHistoryPush).toHaveBeenCalled()
+ expect(mockedNavigate).toHaveBeenCalled()
})
it('should launch account and trigger creation process', async () => {
const store = mockStore({
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index a2d3b9d3f..259324ac2 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -6,7 +6,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { Account, FluidStatus } from 'models'
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import {
setShouldRefreshConsent,
@@ -19,7 +19,7 @@ interface SgeInitProps {
const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
const account: Account | null = fluidStatus.connection.account
const { sgeConnect } = useSelector((state: AppStore) => state.ecolyo.global)
@@ -58,7 +58,7 @@ const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => {
<Button
aria-label={t(`auth.${konnectorSlug}.accessibility.connect`)}
onClick={() => {
- history.push('/sge-connect')
+ navigate('/sge-connect')
}}
classes={{
root: 'btn-highlight',
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index f10cb32c1..3f7e11a9a 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,12 +1,11 @@
+import FeedbackModal from 'components/Feedback/FeedbackModal'
+import { ScreenType } from 'enum/screen.enum'
import React, { useCallback, useEffect } from 'react'
-import './content.scss'
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
import { changeScreenType } from 'store/global/global.actions'
import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { ScreenType } from 'enum/screen.enum'
-import FeedbackModal from 'components/Feedback/FeedbackModal'
-import { useHistory } from 'react-router-dom'
+import './content.scss'
interface ContentProps {
children?: React.ReactNode
height?: number
@@ -19,7 +18,6 @@ const Content: React.FC<ContentProps> = ({
background = 'inherit',
}: ContentProps) => {
const dispatch = useDispatch()
- const history = useHistory()
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const { isFeedbacksOpen } = useSelector(
(state: AppStore) => state.ecolyo.modal
@@ -32,25 +30,10 @@ const Content: React.FC<ContentProps> = ({
dispatch(updateModalIsFeedbacksOpen(false))
}, [dispatch])
- // Scroll handling
- const app = document.querySelector('.app-content')
-
- /**
- * Handle Desktop scroll
- */
- const handleWindowScroll = useCallback(() => {
- app?.scrollTo(0, 0)
- window.scrollTo(0, 0)
- }, [app])
-
- // Set listners for scroll
+ // Set listeners for scroll
useEffect(() => {
- const listner = history.listen(handleWindowScroll)
- return () => {
- // remove listner subscription
- listner()
- }
- }, [handleWindowScroll, history])
+ window.scrollTo(0, 0)
+ }, [])
useEffect(() => {
function handleResize() {
diff --git a/src/components/Duel/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal.tsx
index f960567e1..373de8b10 100644
--- a/src/components/Duel/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal.tsx
@@ -1,13 +1,13 @@
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useEffect, useState } from 'react'
import './duelEmptyValueModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Dialog from '@material-ui/core/Dialog'
import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import Icon from 'cozy-ui/transpiled/react/Icon'
import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { importIconbyId } from 'utils/utils'
+import { importIconById } from 'utils/utils'
interface DuelEmptyValueModalProps {
open: boolean
@@ -22,7 +22,7 @@ const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId('emptyValue', 'duel')
+ const icon = await importIconById('emptyValue', 'duel')
if (icon) {
setEmptyIcon(icon)
} else {
diff --git a/src/components/Duel/DuelError.spec.tsx b/src/components/Duel/DuelError.spec.tsx
index 7955e98c2..1e7314f24 100644
--- a/src/components/Duel/DuelError.spec.tsx
+++ b/src/components/Duel/DuelError.spec.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { shallow } from 'enzyme'
import DuelError from 'components/Duel/DuelError'
+import { shallow } from 'enzyme'
+import React from 'react'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -12,6 +12,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('DuelError component', () => {
it('should be rendered correctly', () => {
const component = shallow(<DuelError />).getElement()
diff --git a/src/components/Duel/DuelError.tsx b/src/components/Duel/DuelError.tsx
index d14ecfb06..80e9e5945 100644
--- a/src/components/Duel/DuelError.tsx
+++ b/src/components/Duel/DuelError.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback } from 'react'
+import Button from '@material-ui/core/Button'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useHistory } from 'react-router-dom'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
import './duelError.scss'
-import Button from '@material-ui/core/Button'
const DuelError: React.FC = () => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const goBack = useCallback(() => {
- history.goBack()
- }, [history])
+ navigate(-1)
+ }, [navigate])
return (
<div className="duel-error-container">
diff --git a/src/components/Duel/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing.spec.tsx
index acaea2598..8202525bd 100644
--- a/src/components/Duel/DuelOngoing.spec.tsx
+++ b/src/components/Duel/DuelOngoing.spec.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import DuelOngoing from 'components/Duel/DuelOngoing'
+import { UserChallengeState } from 'enum/userChallenge.enum'
import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
+import { DateTime } from 'luxon'
+import { UserChallenge } from 'models'
+import React from 'react'
import { act } from 'react-dom/test-utils'
+import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import DuelOngoing from 'components/Duel/DuelOngoing'
-import { UserChallenge } from 'models'
-import { DateTime } from 'luxon'
-import { UserChallengeState } from 'enum/userChallenge.enum'
+import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import DuelResultModal from './DuelResultModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -36,16 +36,16 @@ jest.mock('services/challenge.service', () => {
const mockHistoryPush = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryPush,
}),
}))
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
const mockFormatNumberValues = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
formatNumberValues: jest.fn(() => {
return mockFormatNumberValues
diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index 171d0d946..9e6646353 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -1,9 +1,24 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useHistory } from 'react-router-dom'
-import './duelOngoing.scss'
+import CaptionAverageIcon from 'assets/icons/visu/duel/captionAverage.svg'
+import CaptionConsumptionIcon from 'assets/icons/visu/duel/captionConsumption.svg'
+import CaptionIncomingIcon from 'assets/icons/visu/duel/captionIncoming.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import DuelChart from 'components/Duel/DuelChart'
+import DuelResultModal from 'components/Duel/DuelResultModal'
+import LastDuelModal from 'components/Duel/lastDuelModal'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import {
+ UserChallengeSuccess,
+ UserChallengeUpdateFlag,
+} from 'enum/userChallenge.enum'
+import { UserDuelState } from 'enum/userDuel.enum'
+import { Dataload, UserChallenge, UserDuel } from 'models'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import ChallengeService from 'services/challenge.service'
+import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import {
unlockNextUserChallenge,
@@ -11,23 +26,7 @@ import {
} from 'store/challenge/challenge.actions'
import { toggleChallengeDuelNotification } from 'store/global/global.actions'
import { formatNumberValues } from 'utils/utils'
-
-import { UserDuel, UserChallenge, Dataload } from 'models'
-import {
- UserChallengeSuccess,
- UserChallengeUpdateFlag,
-} from 'enum/userChallenge.enum'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import CaptionAverageIcon from 'assets/icons/visu/duel/captionAverage.svg'
-import CaptionConsumptionIcon from 'assets/icons/visu/duel/captionConsumption.svg'
-import CaptionIncomingIcon from 'assets/icons/visu/duel/captionIncoming.svg'
-import ChallengeService from 'services/challenge.service'
-import DuelChart from 'components/Duel/DuelChart'
-import DuelResultModal from 'components/Duel/DuelResultModal'
-import LastDuelModal from 'components/Duel/lastDuelModal'
-import UsageEventService from 'services/usageEvent.service'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import { UserDuelState } from 'enum/userDuel.enum'
+import './duelOngoing.scss'
interface DuelOngoingProps {
userChallenge: UserChallenge
@@ -44,7 +43,7 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
(state: AppStore) => state.ecolyo.challenge
)
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const [resultModal, setResultModal] = useState<boolean>(false)
const [winChallenge, setWinChallenge] = useState<boolean>(false)
const [isLastDuel, setIsLastDuel] = useState<boolean>(false)
@@ -96,7 +95,7 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
) {
setIsLastDuel(true)
} else {
- history.push('/challenges')
+ navigate('/challenges')
}
}, [
client,
@@ -104,12 +103,12 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
winChallenge,
dispatch,
userChallengeList,
- history,
+ navigate,
])
const setLastResult = useCallback(async () => {
- history.push('/challenges')
- }, [history])
+ navigate('/challenges')
+ }, [navigate])
useEffect(() => {
function handleResize() {
diff --git a/src/components/Duel/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal.spec.tsx
index 7afeda42d..543839aff 100644
--- a/src/components/Duel/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal.spec.tsx
@@ -1,12 +1,11 @@
import { mount } from 'enzyme'
import React from 'react'
+import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-
-import { act } from 'react-dom/test-utils'
import DuelResultModal from './DuelResultModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -18,12 +17,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
const mockFormatNumberValues = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
formatNumberValues: jest.fn(() => {
return mockFormatNumberValues
@@ -41,7 +40,7 @@ describe('DuelResultModal component', () => {
profile: profileData,
},
})
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<Provider store={store}>
<DuelResultModal
@@ -66,7 +65,7 @@ describe('DuelResultModal component', () => {
profile: profileData,
},
})
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<Provider store={store}>
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
index 3b0ea595c..b1b1d2808 100644
--- a/src/components/Duel/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
-import './duelResultModal.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { formatNumberValues, importIconbyId } from 'utils/utils'
import { UserChallenge } from 'models/challenge.model'
+import React, { useEffect, useState } from 'react'
+import { formatNumberValues, importIconById } from 'utils/utils'
+import './duelResultModal.scss'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
interface DuelResultModalProps {
open: boolean
@@ -31,13 +31,13 @@ const DuelResultModal: React.FC<DuelResultModalProps> = ({
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(userChallenge.id + '-1', 'duelResult')
+ const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
if (icon) {
setWinIcon(icon)
} else {
setWinIcon(defaultIcon)
}
- const icon2 = await importIconbyId(userChallenge.id + '-0', 'duelResult')
+ const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
if (icon2) {
setLossIcon(icon2)
} else {
diff --git a/src/components/Duel/DuelUnlocked.spec.tsx b/src/components/Duel/DuelUnlocked.spec.tsx
index 74b23a054..cbc81c630 100644
--- a/src/components/Duel/DuelUnlocked.spec.tsx
+++ b/src/components/Duel/DuelUnlocked.spec.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import Button from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import DuelUnlocked from 'components/Duel/DuelUnlocked'
+import { FluidType } from 'enum/fluid.enum'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import DuelUnlocked from 'components/Duel/DuelUnlocked'
+import { formatNumberValues } from 'utils/utils'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import { formatNumberValues } from 'utils/utils'
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { FluidType } from 'enum/fluid.enum'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -20,12 +20,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
const mockFormatNumberValues = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
formatNumberValues: jest.fn(() => {
return mockFormatNumberValues
diff --git a/src/components/Duel/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked.tsx
index c542baeb0..328d791c8 100644
--- a/src/components/Duel/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked.tsx
@@ -1,19 +1,19 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import './duelUnlocked.scss'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch } from 'react-redux'
import { UserChallenge } from 'models'
-import { setChallengeConsumption } from 'store/challenge/challenge.actions'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
import ChallengeService from 'services/challenge.service'
-import { formatNumberValues, importIconbyId } from 'utils/utils'
+import { setChallengeConsumption } from 'store/challenge/challenge.actions'
+import { formatNumberValues, importIconById } from 'utils/utils'
+import './duelUnlocked.scss'
+import Button from '@material-ui/core/Button'
import defaultDuelIcon from 'assets/icons/visu/challenge/CHALLENGE0001.svg'
import defaultIcon from 'assets/icons/visu/duel/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import Button from '@material-ui/core/Button'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { UsageEventType } from 'enum/usageEvent.enum'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import UsageEventService from 'services/usageEvent.service'
interface DuelUnlockedProps {
@@ -55,7 +55,7 @@ const DuelUnlocked: React.FC<DuelUnlockedProps> = ({
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(userChallenge.id, 'challenge')
+ const icon = await importIconById(userChallenge.id, 'challenge')
if (icon) {
setDuelIcon(icon)
} else {
diff --git a/src/components/Duel/DuelView.spec.tsx b/src/components/Duel/DuelView.spec.tsx
index da088b854..4f079d5f2 100644
--- a/src/components/Duel/DuelView.spec.tsx
+++ b/src/components/Duel/DuelView.spec.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import * as reactRedux from 'react-redux'
import DuelView from 'components/Duel/DuelView'
import { UserChallengeState } from 'enum/userChallenge.enum'
+import { UserDuelState } from 'enum/userDuel.enum'
+import { shallow } from 'enzyme'
+import React from 'react'
+import * as reactRedux from 'react-redux'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import DuelError from './DuelError'
-import DuelUnlocked from './DuelUnlocked'
import DuelOngoing from './DuelOngoing'
-import { UserDuelState } from 'enum/userDuel.enum'
+import DuelUnlocked from './DuelUnlocked'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
@@ -16,14 +16,12 @@ jest.mock('components/Content/Content', () => 'mock-content')
const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
-const mockHistoryGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
useLocation: () => ({
search: '?id=CHALLENGE0002',
}),
- useHistory: () => ({
- goBack: mockHistoryGoBack,
- }),
+ useNavigate: () => mockedNavigate,
}))
describe('DuelView component', () => {
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index 54edb152b..d96cc56ff 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -8,7 +8,7 @@ import { UserDuelState } from 'enum/userDuel.enum'
import { UserChallenge } from 'models'
import React, { useCallback, useState } from 'react'
import { useSelector } from 'react-redux'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import DuelEmptyValueModal from './DuelEmptyValueModal'
import DuelOngoing from './DuelOngoing'
@@ -23,12 +23,12 @@ const DuelView: React.FC = () => {
challenge => challenge.id === id
)
- const history = useHistory()
+ const navigate = useNavigate()
const defineHeaderHeight = useCallback((height: number) => {
setHeaderHeight(height)
}, [])
const goBackToChallenge = () => {
- history.push('/challenges')
+ navigate('/challenges')
}
const renderDuel = (challenge: UserChallenge) => {
switch (challenge.duel.state) {
diff --git a/src/components/Ecogesture/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard.spec.tsx
index 2aca94f0f..89d866f43 100644
--- a/src/components/Ecogesture/EcogestureCard.spec.tsx
+++ b/src/components/Ecogesture/EcogestureCard.spec.tsx
@@ -1,13 +1,13 @@
/* eslint-disable react/display-name */
-import React from 'react'
-import { mount } from 'enzyme'
import EcogestureCard from 'components/Ecogesture/EcogestureCard'
-import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import configureStore from 'redux-mock-store'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
+import configureStore from 'redux-mock-store'
+import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -22,11 +22,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
jest.mock('components/CommonKit/Icon/StyledIcon', () => () => (
<div id="StyledIcon" />
))
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
@@ -40,7 +40,7 @@ describe('EcogestureCard component', () => {
global: globalStateData,
},
})
- mockImportIconbyId.mockReturnValueOnce('')
+ mockImportIconById.mockReturnValueOnce('')
const wrapper = mount(
<Provider store={store}>
<BrowserRouter>
@@ -58,7 +58,7 @@ describe('EcogestureCard component', () => {
global: globalStateData,
},
})
- mockImportIconbyId.mockReturnValue(undefined)
+ mockImportIconById.mockReturnValue(undefined)
const wrapper = mount(
<Provider store={store}>
<BrowserRouter>
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index da0e18a3e..d0c502e2c 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react'
-import { Ecogesture } from 'models'
+import { Link } from '@material-ui/core/'
+import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { importIconbyId } from 'utils/utils'
+import { Ecogesture } from 'models'
+import React, { useEffect, useState } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import { importIconById } from 'utils/utils'
import './ecogestureCard.scss'
import EfficientyRating from './EfficientyRating'
-import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import { Link as RouterLink } from 'react-router-dom'
-import { Link } from '@material-ui/core/'
interface EcogestureCardProps {
ecogesture: Ecogesture
@@ -21,7 +21,7 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(ecogesture.id, 'ecogesture')
+ const icon = await importIconById(ecogesture.id, 'ecogesture')
if (icon) {
setEcogestureIcon(icon)
} else {
@@ -37,8 +37,8 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
<Link
to={{
pathname: `/ecogesture/${ecogesture.id}`,
- state: { selectionCompleted },
}}
+ state={{ selectionCompleted }}
component={RouterLink}
className="ecogesture-list-item"
>
diff --git a/src/components/Ecogesture/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList.spec.tsx
index 01d6a11cd..09bfb0cc9 100644
--- a/src/components/Ecogesture/EcogestureEmptyList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList.spec.tsx
@@ -17,12 +17,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockStore = configureStore([])
const mockChangeTab = jest.fn()
@@ -81,7 +79,7 @@ describe('EcogestureEmptyList component', () => {
</Provider>
)
wrapper.find(Button).at(1).simulate('click')
- expect(mockHistoryPush).toHaveBeenCalledWith('/ecogesture-form')
+ expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-form')
})
it('should render doing text with empty list on completed selection', () => {
const store = mockStore({
diff --git a/src/components/Ecogesture/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList.tsx
index 5c78275e6..dfeb15139 100644
--- a/src/components/Ecogesture/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import doingIcon from 'assets/icons/ico/doing-enabled.svg'
import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
-
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
import './ecogestureEmptyList.scss'
-import { useHistory } from 'react-router-dom'
interface EcogestureEmptyListProps {
setTab: React.Dispatch<React.SetStateAction<number>>
@@ -21,7 +20,7 @@ const EcogestureEmptyList: React.FC<EcogestureEmptyListProps> = ({
handleReinitClick,
}: EcogestureEmptyListProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
return (
<div className="ec-empty-container">
<div className="ec-empty-content">
@@ -69,7 +68,7 @@ const EcogestureEmptyList: React.FC<EcogestureEmptyListProps> = ({
<Button
aria-label={t('ecogesture.emptyList.btn2')}
onClick={() => {
- history.push('/ecogesture-form')
+ navigate('/ecogesture-form')
}}
classes={{
root: 'btn-highlight btn2',
diff --git a/src/components/Ecogesture/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal.spec.tsx
index ed59dc9cb..b6f92fd6d 100644
--- a/src/components/Ecogesture/EcogestureInitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal.spec.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
+import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import { Provider } from 'react-redux'
-import EcogestureInitModal from './EcogestureInitModal'
-import { Button } from '@material-ui/core'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { mockInitialProfileState } from '../../../tests/__mocks__/store'
+import EcogestureInitModal from './EcogestureInitModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -18,18 +18,18 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
const mockHistoryPush = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryPush,
}),
}))
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index cec76aff4..49e07606e 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -1,17 +1,15 @@
-import React, { useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useHistory } from 'react-router-dom'
-import { Ecogesture } from 'models'
-
-import { Menu, MenuItem, ListItemIcon } from '@material-ui/core/'
-
-import SortIcon from 'assets/icons/ico/sort.svg'
+import { ListItemIcon, Menu, MenuItem } from '@material-ui/core/'
+import Button from '@material-ui/core/Button'
import CheckIcon from 'assets/icons/ico/check.svg'
-import EcogestureCard from 'components/Ecogesture/EcogestureCard'
+import SortIcon from 'assets/icons/ico/sort.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import Button from '@material-ui/core/Button'
-import './ecogestureList.scss'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { EcogestureStatus, Usage } from 'enum/ecogesture.enum'
+import { Ecogesture } from 'models'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './ecogestureList.scss'
interface EcogestureListProps {
list: Ecogesture[]
@@ -31,13 +29,13 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
handleReinitClick,
}: EcogestureListProps) => {
const { t } = useI18n()
- const history = useHistory()
- const [activeFilter, setactiveFilter] = useState<string>(Usage[Usage.ALL])
- const [openDropDown, setopenDropDown] = useState<boolean>(false)
+ const navigate = useNavigate()
+ const [activeFilter, setActiveFilter] = useState<string>(Usage[Usage.ALL])
+ const [openDropDown, setOpenDropDown] = useState<boolean>(false)
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
const toggleDropDown = () => {
- setopenDropDown(prev => !prev)
+ setOpenDropDown(prev => !prev)
}
const toggleMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -45,7 +43,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
}
const closeMenu = (usage?: string) => {
- usage && setactiveFilter(usage)
+ usage && setActiveFilter(usage)
setAnchorEl(null)
}
@@ -93,7 +91,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
root: 'btn-highlight',
label: 'text-16-bold',
}}
- onClick={() => history.push('/ecogesture-selection')}
+ onClick={() => navigate('/ecogesture-selection')}
>
{t('ecogesture.button_selection')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal.spec.tsx
index 561d8020c..778b78ada 100644
--- a/src/components/Ecogesture/EcogestureModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureModal.spec.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import { mount } from 'enzyme'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
-import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import { mount } from 'enzyme'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import { Provider } from 'react-redux'
-import { act } from 'react-dom/test-utils'
+import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -17,11 +17,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index d7b06ff98..e6abd217f 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -1,23 +1,23 @@
-import React, { useState, useEffect } from 'react'
-import './ecogestureModal.scss'
import classNames from 'classnames'
+import useExploration from 'components/Hooks/useExploration'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { AppStore } from 'store'
+import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
import { getPicto } from 'utils/picto'
-import useExploration from 'components/Hooks/useExploration'
-import { importIconbyId } from 'utils/utils'
+import { importIconById } from 'utils/utils'
+import './ecogestureModal.scss'
import { Ecogesture } from 'models'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import IconButton from '@material-ui/core/IconButton'
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import EfficientyRating from './EfficientyRating'
import CloseIcon from 'assets/icons/ico/close.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import EfficientyRating from './EfficientyRating'
interface EcogestureModalProps {
open: boolean
@@ -47,7 +47,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
}
useEffect(() => {
async function handleEcogestureIcon() {
- const icon = await importIconbyId(ecogesture.id, 'ecogesture')
+ const icon = await importIconById(ecogesture.id, 'ecogesture')
if (icon) {
setEcogestureIcon(icon)
} else {
diff --git a/src/components/Ecogesture/EcogestureReinitModal.spec.tsx b/src/components/Ecogesture/EcogestureReinitModal.spec.tsx
index 2cc0a86e1..8dce007bf 100644
--- a/src/components/Ecogesture/EcogestureReinitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal.spec.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
+import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import { Provider } from 'react-redux'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import EcogestureReinitModal from './EcogestureReinitModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -16,11 +16,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
diff --git a/src/components/Ecogesture/EcogestureView.spec.tsx b/src/components/Ecogesture/EcogestureView.spec.tsx
index b62290252..8a25aa6a6 100644
--- a/src/components/Ecogesture/EcogestureView.spec.tsx
+++ b/src/components/Ecogesture/EcogestureView.spec.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
+import { IconButton, Tab } from '@material-ui/core'
+import EcogestureView from 'components/Ecogesture/EcogestureView'
+import { Season } from 'enum/ecogesture.enum'
import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
+import toJson from 'enzyme-to-json'
+import React from 'react'
import * as reactRedux from 'react-redux'
+import { Provider } from 'react-redux'
+import * as profileActions from 'store/profile/profile.actions'
+import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import EcogestureView from 'components/Ecogesture/EcogestureView'
-import { IconButton, Tab } from '@material-ui/core'
-import toJson from 'enzyme-to-json'
-import EcogestureInitModal from './EcogestureInitModal'
-import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
-import { Season } from 'enum/ecogesture.enum'
-import EcogestureEmptyList from './EcogestureEmptyList'
-import * as profileActions from 'store/profile/profile.actions'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
+import EcogestureEmptyList from './EcogestureEmptyList'
+import EcogestureInitModal from './EcogestureInitModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -59,8 +59,7 @@ jest.mock('utils/utils', () => {
}
})
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
-
-const mockHistoryGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: () => {
@@ -68,9 +67,7 @@ jest.mock('react-router-dom', () => ({
search: '',
}
},
- useHistory: () => ({
- push: mockHistoryGoBack,
- }),
+ useNavigate: () => mockedNavigate,
}))
describe('EcogestureView component', () => {
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index e167d49ac..412756216 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -12,7 +12,7 @@ import { Ecogesture } from 'models'
import { ProfileEcogesture } from 'models/profileEcogesture.model'
import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
import { AppStore } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
@@ -65,7 +65,7 @@ const EcogestureView: React.FC = () => {
const [tabValue, setTabValue] = useState<EcogestureStatus>(
tab ? parseInt(tab) : EcogestureStatus.OBJECTIVE
)
- const history = useHistory()
+ const navigate = useNavigate()
const [isLoaded, setIsLoaded] = useState<boolean>(false)
const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
@@ -88,8 +88,8 @@ const EcogestureView: React.FC = () => {
const handleLaunchForm = useCallback(async () => {
dispatch(updateProfile({ haveSeenEcogestureModal: true }))
setOpenEcogestureInitModal(false)
- history.push('/ecogesture-form?modal=false')
- }, [dispatch, history])
+ navigate('/ecogesture-form?modal=false')
+ }, [dispatch, navigate])
const handleCloseEcogestureInitModal = useCallback(async () => {
dispatch(updateProfile({ haveSeenEcogestureModal: true }))
@@ -104,9 +104,9 @@ const EcogestureView: React.FC = () => {
if (reset) {
setOpenEcogestureReinitModal(false)
setIsLoaded(true)
- history.push('/ecogesture-form?modal=true')
+ navigate('/ecogesture-form?modal=true')
}
- }, [client, history])
+ }, [client, navigate])
const handleCloseEcogestureReinitModal = useCallback(() => {
setOpenEcogestureReinitModal(false)
@@ -117,10 +117,10 @@ const EcogestureView: React.FC = () => {
event.preventDefault()
const params = new URLSearchParams()
params.append('tab', newValue.toString())
- history.push({ search: params.toString() })
+ navigate({ search: params.toString() })
setTabValue(newValue)
},
- [history]
+ [navigate]
)
const tabProps = useCallback((index: number) => {
diff --git a/src/components/Ecogesture/SingleEcogesture.spec.tsx b/src/components/Ecogesture/SingleEcogesture.spec.tsx
index bf710ac4a..ce940c2a2 100644
--- a/src/components/Ecogesture/SingleEcogesture.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.spec.tsx
@@ -1,12 +1,12 @@
/* eslint-disable react/display-name */
-import React from 'react'
-import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
import SingleEcogesture from 'components/Ecogesture/SingleEcogesture'
+import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
-import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
@@ -19,10 +19,21 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockedNavigate = jest.fn()
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+ useParams: () =>
+ jest.fn().mockReturnValue({ ecogestureID: 'ECOGESTURE0001' }),
+ useLocation: jest.fn().mockReturnValue({
+ state: { selectionCompleted: true },
+ }),
+}))
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: () => mockImportIconbyId,
+ importIconById: () => mockImportIconById,
}
})
@@ -37,26 +48,19 @@ jest.mock('components/Content/Content', () => (props: any) => (
<div id="content">{props.children}</div>
))
-const mockgetEcogesturesByIds = jest.fn()
-const mockupdateEcogesture = jest.fn()
+const mockGetEcogesturesByIds = jest.fn()
+const mockUpdateEcogesture = jest.fn()
jest.mock('services/ecogesture.service', () => {
return jest.fn(() => {
return {
- getEcogesturesByIds: mockgetEcogesturesByIds,
- updateEcogesture: mockupdateEcogesture,
+ getEcogesturesByIds: mockGetEcogesturesByIds,
+ updateEcogesture: mockUpdateEcogesture,
}
})
})
const mockStore = configureStore([])
-jest.mock('react-router-dom', () => ({
- useLocation: jest.fn().mockReturnValue({
- state: { selectionCompleted: true },
- }),
- useHistory: () => jest.fn(),
-}))
-
describe('SingleEcogesture component', () => {
it('should be rendered correctly', async () => {
const store = mockStore({
@@ -66,14 +70,10 @@ describe('SingleEcogesture component', () => {
},
})
- mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+ mockGetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
const wrapper = mount(
<Provider store={store}>
- <SingleEcogesture
- match={{
- params: { id: 'ECOGESTURE0001' },
- }}
- />
+ <SingleEcogesture />
</Provider>
)
await waitForComponentToPaint(wrapper)
@@ -88,24 +88,19 @@ describe('SingleEcogesture component', () => {
},
})
- mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
- mockImportIconbyId.mockReturnValue('')
+ mockGetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+ mockImportIconById.mockReturnValue('')
const updatedEcogesture = { ...ecogesturesData[0], doing: true }
- mockupdateEcogesture.mockResolvedValueOnce(updatedEcogesture)
+ mockUpdateEcogesture.mockResolvedValueOnce(updatedEcogesture)
const wrapper = mount(
<Provider store={store}>
- <SingleEcogesture
- match={{
- params: { id: 'ECOGESTURE0001' },
- }}
- />
+ <SingleEcogesture />
</Provider>
)
await waitForComponentToPaint(wrapper)
wrapper.find('.doing-btn').first().simulate('click')
await waitForComponentToPaint(wrapper)
-
- expect(mockupdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
+ expect(mockUpdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
})
it('should change objective status', async () => {
const store = mockStore({
@@ -115,24 +110,20 @@ describe('SingleEcogesture component', () => {
},
})
- mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
- mockImportIconbyId.mockReturnValue('icontest')
+ mockGetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+ mockImportIconById.mockReturnValue('icontest')
const updatedEcogesture = { ...ecogesturesData[0], objective: true }
- mockupdateEcogesture.mockResolvedValueOnce(updatedEcogesture)
+ mockUpdateEcogesture.mockResolvedValueOnce(updatedEcogesture)
const wrapper = mount(
<Provider store={store}>
- <SingleEcogesture
- match={{
- params: { id: 'ECOGESTURE0001' },
- }}
- />
+ <SingleEcogesture />
</Provider>
)
await waitForComponentToPaint(wrapper)
wrapper.find('.objective-btn').first().simulate('click')
await waitForComponentToPaint(wrapper)
- expect(mockupdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
+ expect(mockUpdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
})
it('should toggle more details', async () => {
const store = mockStore({
@@ -142,16 +133,12 @@ describe('SingleEcogesture component', () => {
},
})
- mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
- mockImportIconbyId.mockReturnValue(undefined)
+ mockGetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+ mockImportIconById.mockReturnValue(undefined)
const wrapper = mount(
<Provider store={store}>
- <SingleEcogesture
- match={{
- params: { id: 'ECOGESTURE0001' },
- }}
- />
+ <SingleEcogesture />
</Provider>
)
await waitForComponentToPaint(wrapper)
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index a84c41f07..5368d0dca 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -15,35 +15,34 @@ import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import { Location } from 'history'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
-import { useHistory, useLocation } from 'react-router-dom'
+import { Location, useLocation, useNavigate, useParams } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
import { AppStore } from 'store'
-import { importIconbyId } from 'utils/utils'
+import { importIconById } from 'utils/utils'
import EfficientyRating from './EfficientyRating'
import './singleEcogesture.scss'
-interface SingleEcogestureProps {
- match: { params: { id: string } }
+interface EcogestureLocation extends Location {
+ state: {
+ selectionCompleted: boolean
+ }
}
-const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
- match,
-}: SingleEcogestureProps) => {
+const SingleEcogesture: React.FC = () => {
const { t } = useI18n()
const client = useClient()
- const history = useHistory()
- const location: Location<any> = useLocation<any>()
+ const navigate = useNavigate()
+ const location: EcogestureLocation = useLocation()
const [ecogesture, setEcogesture] = useState<Ecogesture>()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
const [isMoreDetail, setIsMoreDetail] = useState<boolean>(false)
const [isDoing, setIsDoing] = useState<boolean>(false)
const [isObjective, setIsObjective] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(true)
- const ecogestureID: string = match.params.id
+ const { ecogestureID } = useParams<{ ecogestureID: string }>()
const selectionCompleted = location?.state?.selectionCompleted
const ecogestureService = useMemo(
@@ -90,24 +89,19 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
useEffect(() => {
let subscribed = true
async function getSingleEcogesture() {
- const data = await ecogestureService.getEcogesturesByIds([ecogestureID])
+ const data = await ecogestureService.getEcogesturesByIds([
+ ecogestureID || '',
+ ])
if (subscribed) {
- if (data && data[0]) {
+ if (data?.[0]) {
setEcogesture(data[0])
//Prevent case this key doesn't exist in doctype
- setIsObjective(data[0].objective ? true : false)
- setIsDoing(data[0].doing ? true : false)
- const icon = await importIconbyId(data[0].id, 'ecogesture')
+ setIsObjective(data[0].objective)
+ setIsDoing(data[0].doing)
+ const icon = await importIconById(data[0].id, 'ecogesture')
if (subscribed) {
- if (icon) {
- setEcogestureIcon(icon)
- } else {
- setEcogestureIcon(defaultIcon)
- }
- if (
- currentChallenge &&
- currentChallenge.exploration.ecogesture_id === data[0]._id
- ) {
+ setEcogestureIcon(icon || defaultIcon)
+ if (currentChallenge?.exploration.ecogesture_id === data[0]._id) {
setValidExploration(currentChallenge.exploration.id)
}
}
@@ -131,107 +125,112 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
if (isLoading) {
return (
<Content height={headerHeight}>
- <div className="se-loader-container">
- <Loader />
- </div>
+ <Loader />
</Content>
)
}
- return ecogesture ? (
- <>
- <CozyBar
- titleKey={'common.title_ecogesture'}
- displayBackArrow={true}
- backFunction={() => history.push('/ecogestures')}
- />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_ecogesture'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- <div className="single-ecogesture">
- <div className="icon-container">
- {ecogestureIcon && (
- <StyledIcon
- className="icon-big"
- icon={ecogestureIcon}
- size={220}
- />
- )}
- </div>
- <div className="details">
- <div className="text-22 title">{ecogesture.shortName}</div>
- <div className="efficiency">
- <span className="text text-14-normal">
- {t('ecogesture_modal.efficiency')}
- </span>
- <EfficientyRating result={Math.round(ecogesture.efficiency)} />
- </div>
- </div>
- <div className="styled-container">
- <div className="long-name text-18-bold">{ecogesture.longName}</div>
- <div
- className={classNames('description text-16-normal-150', {
- ['block']: isMoreDetail === true,
- })}
- >
- {ecogesture.longDescription}
+ if (ecogesture) {
+ return (
+ <>
+ <CozyBar
+ titleKey={t('common.title_ecogesture')}
+ displayBackArrow={true}
+ backFunction={() => navigate('/ecogestures')}
+ />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={t('common.title_ecogesture')}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ <div className="single-ecogesture">
+ <div className="icon-container">
+ {ecogestureIcon && (
+ <StyledIcon
+ className="icon-big"
+ icon={ecogestureIcon}
+ size={220}
+ />
+ )}
</div>
- <div
- className="toggle-text text-15-normal"
- onClick={toggleMoreDetail}
- >
- {isMoreDetail
- ? t('ecogesture_modal.show_less')
- : t('ecogesture_modal.show_more')}
+ <div className="details">
+ <div className="text-22 title">{ecogesture.shortName}</div>
+ <div className="efficiency">
+ <span className="text text-14-normal">
+ {t('ecogesture_modal.efficiency')}
+ </span>
+ <EfficientyRating result={Math.round(ecogesture.efficiency)} />
+ </div>
</div>
- </div>
- {selectionCompleted && (
- <div className="buttons-selection">
- <IconButton
- aria-label={t('ecogesture.objective')}
- onClick={toggleObjective}
- classes={{
- root: `btn-secondary-negative objective-btn ${
- isObjective && 'active'
- }`,
- label: 'text-15-normal',
- }}
+ <div className="styled-container">
+ <div className="long-name text-18-bold">
+ {ecogesture.longName}
+ </div>
+ <div
+ className="toggle-text text-15-normal"
+ onClick={toggleMoreDetail}
+ role="button"
>
- <Icon
- className="status-icon"
- icon={
- isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
- }
- size={40}
- />
- <span>{t('ecogesture.objective')}</span>
- </IconButton>
- <IconButton
- aria-label={t('ecogesture.doing')}
- onClick={toggleDoing}
- classes={{
- root: `btn-secondary-negative doing-btn ${
- isDoing && 'active'
- }`,
- label: 'text-15-normal',
- }}
+ {isMoreDetail
+ ? t('ecogesture_modal.show_less')
+ : t('ecogesture_modal.show_more')}
+ </div>
+ <div
+ className={classNames('description text-16-normal-150', {
+ ['block']: isMoreDetail === true,
+ })}
>
- <Icon
- className="status-icon"
- icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
- size={40}
- />
- <span>{t('ecogesture.doing')}</span>
- </IconButton>
+ {ecogesture.longDescription}
+ </div>
</div>
- )}
- </div>
- </Content>
- </>
- ) : (
+ {selectionCompleted && (
+ <div className="buttons-selection">
+ <IconButton
+ aria-label={t('ecogesture.objective')}
+ onClick={toggleObjective}
+ classes={{
+ root: `btn-secondary-negative objective-btn ${
+ isObjective && 'active'
+ }`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={
+ isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
+ }
+ size={40}
+ />
+ <span>{t('ecogesture.objective')}</span>
+ </IconButton>
+ <IconButton
+ aria-label={t('ecogesture.doing')}
+ onClick={toggleDoing}
+ classes={{
+ root: `btn-secondary-negative doing-btn ${
+ isDoing && 'active'
+ }`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+ size={40}
+ />
+ <span>{t('ecogesture.doing')}</span>
+ </IconButton>
+ </div>
+ )}
+ </div>
+ </Content>
+ </>
+ )
+ }
+
+ return (
<ErrorPage
text={t('error_page.no_ecogesture')}
returnPage={'ecogestures'}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
index 2048000ad..255097ff6 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -15,21 +15,29 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
>
<BrowserRouter>
<Router
- history={
+ location={
+ Object {
+ "hash": "",
+ "key": "default",
+ "pathname": "/",
+ "search": "",
+ "state": null,
+ }
+ }
+ navigationType="POP"
+ navigator={
Object {
"action": "POP",
- "block": [Function],
"createHref": [Function],
+ "encodeLocation": [Function],
"go": [Function],
- "goBack": [Function],
- "goForward": [Function],
- "length": 1,
"listen": [Function],
"location": Object {
"hash": "",
+ "key": "default",
"pathname": "/",
"search": "",
- "state": undefined,
+ "state": null,
},
"push": [Function],
"replace": [Function],
@@ -77,22 +85,17 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
- "propTypes": Object {
- "innerRef": [Function],
- "onClick": [Function],
- "replace": [Function],
- "target": [Function],
- "to": [Function],
- },
"render": [Function],
}
}
+ state={
+ Object {
+ "selectionCompleted": undefined,
+ }
+ }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
- "state": Object {
- "selectionCompleted": undefined,
- },
}
}
>
@@ -112,22 +115,17 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
- "propTypes": Object {
- "innerRef": [Function],
- "onClick": [Function],
- "replace": [Function],
- "target": [Function],
- "to": [Function],
- },
"render": [Function],
}
}
+ state={
+ Object {
+ "selectionCompleted": undefined,
+ }
+ }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
- "state": Object {
- "selectionCompleted": undefined,
- },
}
}
>
@@ -138,24 +136,19 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
- "propTypes": Object {
- "innerRef": [Function],
- "onClick": [Function],
- "replace": [Function],
- "target": [Function],
- "to": [Function],
- },
"render": [Function],
}
}
onBlur={[Function]}
onFocus={[Function]}
+ state={
+ Object {
+ "selectionCompleted": undefined,
+ }
+ }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
- "state": Object {
- "selectionCompleted": undefined,
- },
}
}
variant="inherit"
@@ -201,24 +194,19 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
- "propTypes": Object {
- "innerRef": [Function],
- "onClick": [Function],
- "replace": [Function],
- "target": [Function],
- "to": [Function],
- },
"render": [Function],
}
}
onBlur={[Function]}
onFocus={[Function]}
+ state={
+ Object {
+ "selectionCompleted": undefined,
+ }
+ }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
- "state": Object {
- "selectionCompleted": undefined,
- },
}
}
variant="inherit"
@@ -227,229 +215,223 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
onBlur={[Function]}
onFocus={[Function]}
+ state={
+ Object {
+ "selectionCompleted": undefined,
+ }
+ }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
- "state": Object {
- "selectionCompleted": undefined,
- },
}
}
>
- <LinkAnchor
+ <a
className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
href="/ecogesture/ECOGESTURE001"
- navigate={[Function]}
onBlur={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
>
- <a
- className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
- href="/ecogesture/ECOGESTURE001"
- onBlur={[Function]}
- onClick={[Function]}
- onFocus={[Function]}
- >
- <StyledEcogestureCard>
- <WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- <WithStyles(ForwardRef(CardActionArea))
+ <StyledEcogestureCard>
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ <WithStyles(ForwardRef(CardActionArea))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ >
+ <ForwardRef(CardActionArea)
classes={
Object {
- "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
}
}
>
- <ForwardRef(CardActionArea)
- classes={
- Object {
- "focusHighlight": "MuiCardActionArea-focusHighlight",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ focusVisibleClassName="Mui-focusVisible"
>
- <WithStyles(ForwardRef(ButtonBase))
+ <ForwardRef(ButtonBase)
className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
focusVisibleClassName="Mui-focusVisible"
>
- <ForwardRef(ButtonBase)
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- focusVisibleClassName="Mui-focusVisible"
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ disabled={false}
+ onBlur={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
>
- <button
- className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
- disabled={false}
- onBlur={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <WithStyles(WithStyles(ForwardRef(CardContent)))>
- <WithStyles(ForwardRef(CardContent))
+ <WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <WithStyles(ForwardRef(CardContent))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <ForwardRef(CardContent)
classes={
Object {
- "root": "WithStyles(ForwardRef(CardContent))-root-2",
+ "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
}
}
>
- <ForwardRef(CardContent)
- classes={
- Object {
- "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
+ <div
+ className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<div
- className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ className="ec"
>
<div
- className="ec"
+ className="ec-content "
>
<div
- className="ec-content "
+ className="ec-content-icon"
>
- <div
- className="ec-content-icon"
- >
- <Component
- className="Icon"
- icon=""
- size={50}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- </div>
- <div
- className="ec-content-short-name text-15-bold"
+ <Component
+ className="Icon"
+ icon=""
+ size={50}
>
- Bonhomme de neige
- </div>
- <div
- className="ec-content-efficiency"
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ </div>
+ <div
+ className="ec-content-short-name text-15-bold"
+ >
+ Bonhomme de neige
+ </div>
+ <div
+ className="ec-content-efficiency"
+ >
+ <EfficientyRating
+ result={4}
>
- <EfficientyRating
- result={4}
+ <div
+ className="thunder"
>
- <div
- className="thunder"
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="0"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="1"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="2"
+ size={15}
>
- <Component
- className="star"
- icon="test-file-stub"
- key="0"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="1"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="2"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="3"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="4"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- </div>
- </EfficientyRating>
- </div>
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="3"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="4"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ </div>
+ </EfficientyRating>
</div>
</div>
</div>
- </ForwardRef(CardContent)>
- </WithStyles(ForwardRef(CardContent))>
- </WithStyles(WithStyles(ForwardRef(CardContent)))>
- <span
- className="MuiCardActionArea-focusHighlight"
- />
- <WithStyles(memo)
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
}
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
>
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(CardActionArea)>
- </WithStyles(ForwardRef(CardActionArea))>
- </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- </StyledEcogestureCard>
- </a>
- </LinkAnchor>
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledEcogestureCard>
+ </a>
</Link>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
index d8031cfef..2e84f2bcb 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
@@ -15,21 +15,29 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
>
<BrowserRouter>
<Router
- history={
+ location={
+ Object {
+ "hash": "",
+ "key": "default",
+ "pathname": "/",
+ "search": "",
+ "state": null,
+ }
+ }
+ navigationType="POP"
+ navigator={
Object {
"action": "POP",
- "block": [Function],
"createHref": [Function],
+ "encodeLocation": [Function],
"go": [Function],
- "goBack": [Function],
- "goForward": [Function],
- "length": 1,
"listen": [Function],
"location": Object {
"hash": "",
+ "key": "default",
"pathname": "/",
"search": "",
- "state": undefined,
+ "state": null,
},
"push": [Function],
"replace": [Function],
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
index aa643f350..075ec115c 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
@@ -13,15 +13,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
}
}
>
- <SingleEcogesture
- match={
- Object {
- "params": Object {
- "id": "ECOGESTURE0001",
- },
- }
- }
- >
+ <SingleEcogesture>
<Component
backFunction={[Function]}
displayBackArrow={true}
@@ -85,17 +77,18 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
- <div
- className="description text-16-normal-150"
- >
- On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
- </div>
<div
className="toggle-text text-15-normal"
onClick={[Function]}
+ role="button"
>
ecogesture_modal.show_more
</div>
+ <div
+ className="description text-16-normal-150"
+ >
+ On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+ </div>
</div>
<div
className="buttons-selection"
diff --git a/src/components/Ecogesture/singleEcogesture.scss b/src/components/Ecogesture/singleEcogesture.scss
index f6707548e..b786284ef 100644
--- a/src/components/Ecogesture/singleEcogesture.scss
+++ b/src/components/Ecogesture/singleEcogesture.scss
@@ -1,15 +1,6 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-.se-loader-container {
- min-height: inherit;
- display: flex;
- justify-content: center;
- align-items: center;
- @media all and(min-width: $width-tablet) {
- min-height: 80vh;
- }
-}
.single-ecogesture {
color: $grey-bright;
display: flex;
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx
index c98ae7093..714c6ee62 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
-import * as reactRedux from 'react-redux'
import toJson from 'enzyme-to-json'
+import React from 'react'
+import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import EcogestureFormEquipment from './EcogestureFormEquipment'
import { mockProfileEcogesture } from '../../../tests/__mocks__/profileEcogesture.mock'
-import { Button } from '@material-ui/core'
import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
+import EcogestureFormEquipment from './EcogestureFormEquipment'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -28,7 +28,7 @@ const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
const mockHistoryPush = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryPush,
}),
}))
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment.tsx
index 4a53fc968..654b26d15 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment.tsx
@@ -1,21 +1,21 @@
-import React, { useCallback, useState } from 'react'
+import FormNavigation from 'components/FormGlobal/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import FormNavigation from 'components/FormGlobal/FormNavigation'
+import { EquipmentType } from 'enum/ecogesture.enum'
import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
import { ProfileEcogesture } from 'models/profileEcogesture.model'
-import { EquipmentType } from 'enum/ecogesture.enum'
-import EquipmentIcon from './EquipmentIcon'
-import './ecogestureFormEquipment.scss'
+import React, { useCallback, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
import {
newProfileEcogestureEntry,
updateProfileEcogesture,
} from 'store/profileEcogesture/profileEcogesture.actions'
-import { useDispatch, useSelector } from 'react-redux'
-import { updateProfile } from 'store/profile/profile.actions'
-import { useHistory } from 'react-router-dom'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
-import { AppStore } from 'store'
+import './ecogestureFormEquipment.scss'
+import EquipmentIcon from './EquipmentIcon'
interface EcogestureFormEquipmentProps {
profileEcogesture: ProfileEcogesture
@@ -32,7 +32,7 @@ const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
}: EcogestureFormEquipmentProps) => {
const { t } = useI18n()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const { isProfileEcogestureCompleted } = useSelector(
(state: AppStore) => state.ecolyo.profile
)
@@ -53,9 +53,9 @@ const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
} else {
dispatch(newProfileEcogestureEntry(profileEcogesture))
dispatch(updateProfile({ isProfileEcogestureCompleted: true }))
- history.push('/ecogesture-selection')
+ navigate('/ecogesture-selection')
}
- }, [profileEcogesture, setNextStep, answer, dispatch, history])
+ }, [profileEcogesture, setNextStep, answer, dispatch, navigate])
const isChecked = useCallback(
(value: string): boolean => {
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx
index f86f26f4d..daddf3c16 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx
@@ -1,20 +1,20 @@
/* eslint-disable react/display-name */
-import React from 'react'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import React from 'react'
import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import toJson from 'enzyme-to-json'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
+import { Button } from '@material-ui/core'
import {
mockEcogestureAnswer,
mockProfileEcogesture,
} from '../../../tests/__mocks__/profileEcogesture.mock'
-import { Button } from '@material-ui/core'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
+import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -25,6 +25,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
jest.mock(
'components/EcogestureForm/EcogestureLaunchFormModal',
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index 0a86e6bb3..9e98552b9 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -1,17 +1,16 @@
/* eslint-disable react/display-name */
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import { Profile } from 'models'
+import React from 'react'
import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import toJson from 'enzyme-to-json'
-
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import EcogestureFormView from './EcogestureFormView'
-import { Profile } from 'models'
-import { Button } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -30,15 +29,17 @@ jest.mock(
() => 'mock-ecogesturelaunchmodal'
)
jest.mock('components/Content/Content', () => 'mock-content')
-
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
useLocation: () => {
return {
search: '',
}
},
}))
+
describe('EcogestureFormView component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let store: any
@@ -101,7 +102,6 @@ describe('EcogestureFormView component', () => {
await waitForComponentToPaint(wrapper)
wrapper.find('input').first().simulate('change')
await waitForComponentToPaint(wrapper)
- console.log(wrapper.debug())
wrapper.find(Button).at(1).simulate('click')
await waitForComponentToPaint(wrapper)
//then go back
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index d16070733..c052ddf9a 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -20,7 +20,6 @@ import { useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'
import ProfileEcogestureFormService from 'services/profileEcogestureForm.service'
import { AppStore } from 'store'
-import './ecogestureFormView.scss'
const EcogestureFormView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -90,9 +89,7 @@ const EcogestureFormView: React.FC = () => {
if (isLoading) {
return (
<Content height={headerHeight}>
- <div className="se-loader-container">
- <Loader />
- </div>
+ <Loader />
</Content>
)
}
diff --git a/src/components/EcogestureForm/EquipmentIcon.spec.tsx b/src/components/EcogestureForm/EquipmentIcon.spec.tsx
index 701193a4d..ffb0703be 100644
--- a/src/components/EcogestureForm/EquipmentIcon.spec.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon.spec.tsx
@@ -1,10 +1,10 @@
/* eslint-disable react/display-name */
-import React from 'react'
+import { EquipmentType } from 'enum/ecogesture.enum'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import EquipmentIcon from './EquipmentIcon'
-import { EquipmentType } from 'enum/ecogesture.enum'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -15,17 +15,17 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
describe('EcogestureFormSingleChoice component', () => {
it('should be rendered correctly', async () => {
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<EquipmentIcon equipment={EquipmentType.BOILER} isChecked={false} />
)
@@ -33,7 +33,7 @@ describe('EcogestureFormSingleChoice component', () => {
expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render checked icon', async () => {
- mockImportIconbyId.mockReturnValue('')
+ mockImportIconById.mockReturnValue('')
const wrapper = mount(
<EquipmentIcon equipment={EquipmentType.BOILER} isChecked={true} />
)
diff --git a/src/components/EcogestureForm/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon.tsx
index 6792b4cc9..64d3407a8 100644
--- a/src/components/EcogestureForm/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { importIconbyId } from 'utils/utils'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import React, { useEffect, useState } from 'react'
+import { importIconById } from 'utils/utils'
interface EquipmentIconProps {
equipment: string
@@ -18,7 +18,7 @@ const EquipmentIcon: React.FC<EquipmentIconProps> = ({
useEffect(() => {
let subscribed = true
async function getIcon() {
- const svg = await importIconbyId(equipment, 'equipments')
+ const svg = await importIconById(equipment, 'equipments')
if (subscribed && svg) {
setIcon(svg)
}
diff --git a/src/components/EcogestureForm/ecogestureFormView.scss b/src/components/EcogestureForm/ecogestureFormView.scss
deleted file mode 100644
index c63af75be..000000000
--- a/src/components/EcogestureForm/ecogestureFormView.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.se-loader-container {
- min-height: inherit;
- display: flex;
- justify-content: center;
- align-items: center;
- @media all and(min-width: $width-tablet) {
- min-height: 80vh;
- }
-}
diff --git a/src/components/EcogestureSelection/EcogestureSelection.spec.tsx b/src/components/EcogestureSelection/EcogestureSelection.spec.tsx
index b35f91684..e11981ae1 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.spec.tsx
@@ -1,16 +1,16 @@
/* eslint-disable react/display-name */
-import React from 'react'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import React from 'react'
import { Provider } from 'react-redux'
+import mockClient from '../../../tests/__mocks__/client'
+import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import EcogestureSelection from './EcogestureSelection'
-import toJson from 'enzyme-to-json'
-import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
-import mockClient from '../../../tests/__mocks__/client'
+import EcogestureSelection from './EcogestureSelection'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -36,7 +36,7 @@ jest.mock('react-router-dom', () => ({
search: '',
}
},
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryGoBack,
}),
}))
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index e65190a65..c9e3e7114 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -12,7 +12,7 @@ import { Ecogesture } from 'models'
import { ProfileEcogesture } from 'models/profileEcogesture.model'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
import { AppStore } from 'store'
import './ecogestureSelection.scss'
@@ -20,7 +20,7 @@ import './ecogestureSelection.scss'
const EcogestureSelection: React.FC = () => {
const { t } = useI18n()
const client = useClient()
- const history = useHistory()
+ const navigate = useNavigate()
const [isLoading, setIsLoading] = useState(true)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [indexEcogesture, setIndexEcogesture] = useState<number>(0)
@@ -127,7 +127,7 @@ const EcogestureSelection: React.FC = () => {
<CozyBar
titleKey={'common.title_ecogestures_choice'}
displayBackArrow={true}
- backFunction={() => history.push('/ecogestures')}
+ backFunction={() => navigate('/ecogestures')}
/>
<Header
setHeaderHeight={defineHeaderHeight}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.spec.tsx
index 5b8e36a20..927ce93f4 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail.spec.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import { Button } from '@material-ui/core'
-import EcogestureSelectionDetail from './EcogestureSelectionDetail'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
+import React from 'react'
import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
+import EcogestureSelectionDetail from './EcogestureSelectionDetail'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -15,11 +15,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockImportIconbyId = jest.fn()
+const mockImportIconById = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
+ importIconById: jest.fn(() => {
+ return mockImportIconById
}),
}
})
@@ -27,12 +27,12 @@ const mockValidate = jest.fn()
describe('EcogestureSelectionDetail component', () => {
beforeEach(() => {
- mockImportIconbyId.mockClear()
+ mockImportIconById.mockClear()
mockValidate.mockClear()
})
it('should be rendered correctly', async () => {
- mockImportIconbyId.mockReturnValueOnce('testIcon')
+ mockImportIconById.mockReturnValueOnce('testIcon')
const wrapper = mount(
<EcogestureSelectionDetail
ecogesture={ecogesturesData[0]}
@@ -45,7 +45,7 @@ describe('EcogestureSelectionDetail component', () => {
})
it('should call validate with objective to true', async () => {
- mockImportIconbyId.mockReturnValueOnce('testIcon')
+ mockImportIconById.mockReturnValueOnce('testIcon')
const wrapper = mount(
<EcogestureSelectionDetail
ecogesture={ecogesturesData[0]}
@@ -59,7 +59,7 @@ describe('EcogestureSelectionDetail component', () => {
})
it('should call validate with doing to true', async () => {
- mockImportIconbyId.mockReturnValueOnce('testIcon')
+ mockImportIconById.mockReturnValueOnce('testIcon')
const wrapper = mount(
<EcogestureSelectionDetail
ecogesture={ecogesturesData[0]}
@@ -73,7 +73,7 @@ describe('EcogestureSelectionDetail component', () => {
})
it('should call validate with objective and doing to false', async () => {
- mockImportIconbyId.mockReturnValueOnce('testIcon')
+ mockImportIconById.mockReturnValueOnce('testIcon')
const wrapper = mount(
<EcogestureSelectionDetail
ecogesture={ecogesturesData[0]}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
index 4ea75639e..9e6133e4d 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react'
-import './ecogestureSelectionDetail.scss'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { Button } from '@material-ui/core'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { Ecogesture } from 'models'
-import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
import doingIcon from 'assets/icons/ico/doing-enabled.svg'
+import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
import skipIcon from 'assets/icons/ico/skip-enabled.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import { importIconbyId } from 'utils/utils'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Ecogesture } from 'models'
+import React, { useEffect, useState } from 'react'
+import { importIconById } from 'utils/utils'
+import './ecogestureSelectionDetail.scss'
interface EcogestureSelectionDetailProps {
ecogesture: Ecogesture
@@ -27,7 +27,7 @@ const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
useEffect(() => {
let subscribed = true
async function getIcon() {
- const _icon = await importIconbyId(ecogesture.id, 'ecogesture')
+ const _icon = await importIconById(ecogesture.id, 'ecogesture')
if (subscribed) {
if (_icon) {
setEcogestureIcon(_icon)
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd.spec.tsx
index 75cd2b7b0..ee657cb0b 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd.spec.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
import EcogestureSelectionEnd from './EcogestureSelectionEnd'
-import { Button } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -13,17 +13,15 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
describe('EcogestureSelectionEnd component', () => {
beforeEach(() => {
- mockHistoryPush.mockClear()
+ mockedNavigate.mockClear()
})
it('should be rendered correctly', () => {
@@ -34,6 +32,6 @@ describe('EcogestureSelectionEnd component', () => {
it('should close modal and update profile', () => {
const wrapper = mount(<EcogestureSelectionEnd />)
wrapper.find(Button).simulate('click')
- expect(mockHistoryPush).toHaveBeenCalledWith('/ecogestures?tab=0')
+ expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures?tab=0')
})
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
index 5bfd2f9b8..3e35b4ef1 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
@@ -1,18 +1,18 @@
-import React, { useCallback } from 'react'
-import './ecogestureSelectionEnd.scss'
-import { useHistory } from 'react-router-dom'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import icon from 'assets/icons/visu/profileType/finish.svg'
import { Button } from '@material-ui/core'
+import icon from 'assets/icons/visu/profileType/finish.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './ecogestureSelectionEnd.scss'
const EcogestureSelectionEnd: React.FC = () => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const goToObjectives = useCallback(() => {
- history.push('/ecogestures?tab=0')
- }, [history])
+ navigate('/ecogestures?tab=0')
+ }, [navigate])
return (
<div className="eg-selection-end-container">
<div className="content">
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart.spec.tsx
index 3f1835b68..d13a55a6d 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart.spec.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
import EcogestureSelectionRestart from './EcogestureSelectionRestart'
-import { Button } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -13,18 +13,16 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockRestart = jest.fn()
describe('EcogestureSelectionRestart component', () => {
beforeEach(() => {
- mockHistoryPush.mockClear()
+ mockedNavigate.mockClear()
mockRestart.mockClear()
})
@@ -40,7 +38,7 @@ describe('EcogestureSelectionRestart component', () => {
<EcogestureSelectionRestart listLength={10} restart={mockRestart} />
)
wrapper.find(Button).at(0).simulate('click')
- expect(mockHistoryPush).toHaveBeenCalledWith('/ecogestures?tab=0')
+ expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures?tab=0')
})
it('should call the restart when user click on the button', () => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
index d5178c08d..d871c0927 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback } from 'react'
-import './ecogestureSelectionRestart.scss'
-import { useHistory } from 'react-router-dom'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import icon from 'assets/icons/visu/ecogesture/ECOGESTURE0001.svg'
import { Button } from '@material-ui/core'
+import icon from 'assets/icons/visu/ecogesture/ECOGESTURE0001.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './ecogestureSelectionRestart.scss'
interface EcogestureSelectionRestartProps {
listLength: number
@@ -16,11 +16,11 @@ const EcogestureSelectionRestart: React.FC<EcogestureSelectionRestartProps> = ({
restart,
}: EcogestureSelectionRestartProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const goToObjectives = useCallback(() => {
- history.push('/ecogestures?tab=0')
- }, [history])
+ navigate('/ecogestures?tab=0')
+ }, [navigate])
return (
<div className="eg-selection-restart-container">
diff --git a/src/components/Exploration/ExplorationError.spec.tsx b/src/components/Exploration/ExplorationError.spec.tsx
index 139e356c4..b3f676a96 100644
--- a/src/components/Exploration/ExplorationError.spec.tsx
+++ b/src/components/Exploration/ExplorationError.spec.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { shallow } from 'enzyme'
import ExplorationError from 'components/Exploration/ExplorationError'
+import { shallow } from 'enzyme'
+import React from 'react'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -12,6 +12,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('ExplorationError component', () => {
it('should be rendered correctly', () => {
const component = shallow(<ExplorationError />).getElement
diff --git a/src/components/Exploration/ExplorationError.tsx b/src/components/Exploration/ExplorationError.tsx
index 06b1a036d..f1300a16c 100644
--- a/src/components/Exploration/ExplorationError.tsx
+++ b/src/components/Exploration/ExplorationError.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback } from 'react'
+import Button from '@material-ui/core/Button'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useHistory } from 'react-router-dom'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
import './explorationError.scss'
-import Button from '@material-ui/core/Button'
const ExplorationError: React.FC = () => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const goBack = useCallback(() => {
- history.goBack()
- }, [history])
+ navigate(-1)
+ }, [navigate])
return (
<div className="exploration-error-container">
diff --git a/src/components/Exploration/ExplorationFinished.spec.tsx b/src/components/Exploration/ExplorationFinished.spec.tsx
index 76557e2c0..177d4adfe 100644
--- a/src/components/Exploration/ExplorationFinished.spec.tsx
+++ b/src/components/Exploration/ExplorationFinished.spec.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import Button from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import ExplorationFinished from './ExplorationFinished'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import ExplorationFinished from './ExplorationFinished'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -17,13 +17,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-
-const mockHistoryGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- goBack: mockHistoryGoBack,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockStore = configureStore([])
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
index 748b7af8f..78256d909 100644
--- a/src/components/Exploration/ExplorationFinished.tsx
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -1,20 +1,20 @@
-import React, { useCallback } from 'react'
-import './explorationFinished.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import starResult from 'assets/icons/visu/quiz/starResult.svg'
import Button from '@material-ui/core/Button'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { UserChallenge } from 'models'
-import { useHistory } from 'react-router-dom'
-import { UserExplorationState } from 'enum/userExploration.enum'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import ChallengeService from 'services/challenge.service'
import { Client, useClient } from 'cozy-client'
-import { useDispatch } from 'react-redux'
-import { toggleChallengeExplorationNotification } from 'store/global/global.actions'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UsageEventType } from 'enum/usageEvent.enum'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserExplorationState } from 'enum/userExploration.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { toggleChallengeExplorationNotification } from 'store/global/global.actions'
+import './explorationFinished.scss'
interface ExplorationFinishedProps {
userChallenge: UserChallenge
@@ -26,7 +26,7 @@ const ExplorationFinished: React.FC<ExplorationFinishedProps> = ({
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const checkNotificationToEnd = useCallback(async () => {
const challengeService = new ChallengeService(client)
@@ -48,8 +48,8 @@ const ExplorationFinished: React.FC<ExplorationFinishedProps> = ({
const goBack = useCallback(async () => {
await checkNotificationToEnd()
- history.goBack()
- }, [history, checkNotificationToEnd])
+ navigate(-1)
+ }, [navigate, checkNotificationToEnd])
return (
<div className="exploration-card">
diff --git a/src/components/Exploration/ExplorationOngoing.spec.tsx b/src/components/Exploration/ExplorationOngoing.spec.tsx
index 5a5405363..55852f19d 100644
--- a/src/components/Exploration/ExplorationOngoing.spec.tsx
+++ b/src/components/Exploration/ExplorationOngoing.spec.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import ExplorationOngoing from 'components/Exploration/ExplorationOngoing'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import ExplorationOngoing from 'components/Exploration/ExplorationOngoing'
+import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -31,7 +31,7 @@ jest.mock('services/challenge.service', () => {
const mockHistoryPush = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryPush,
}),
}))
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 6c8ab6bcc..9bb2aaf23 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -1,24 +1,24 @@
-import React, { useCallback } from 'react'
-import { useHistory } from 'react-router-dom'
-import './explorationOngoing.scss'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
+import './explorationOngoing.scss'
-import { UserChallenge } from 'models'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import Button from '@material-ui/core/Button'
+import explorationIcon from 'assets/icons/visu/exploration/shield.svg'
import StarsContainer from 'components/Challenge/StarsContainer'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import {
UserExplorationState,
UserExplorationType,
} from 'enum/userExploration.enum'
+import { UserChallenge } from 'models'
+import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import explorationIcon from 'assets/icons/visu/exploration/shield.svg'
import UsageEventService from 'services/usageEvent.service'
-import { UsageEventType } from 'enum/usageEvent.enum'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
interface ExplorationOngoingProps {
userChallenge: UserChallenge
@@ -30,10 +30,10 @@ const ExplorationOngoing: React.FC<ExplorationOngoingProps> = ({
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const goBack = useCallback(() => {
- history.goBack()
- }, [history])
+ navigate(-1)
+ }, [navigate])
const startExploration = async () => {
if (userChallenge.exploration.state !== UserExplorationState.ONGOING) {
const challengeService = new ChallengeService(client)
@@ -43,7 +43,7 @@ const ExplorationOngoing: React.FC<ExplorationOngoingProps> = ({
)
dispatch(updateUserChallengeList(updatedChallenge))
}
- history.push('/challenges')
+ navigate('/challenges')
}
const validExploration = async () => {
@@ -59,7 +59,7 @@ const ExplorationOngoing: React.FC<ExplorationOngoingProps> = ({
startDate: userChallenge.exploration.date,
})
dispatch(updateUserChallengeList(updatedChallenge))
- history.push('/challenges')
+ navigate('/challenges')
}
const renderButton = () => {
switch (userChallenge.exploration.type) {
diff --git a/src/components/FormGlobal/FormNavigation.spec.tsx b/src/components/FormGlobal/FormNavigation.spec.tsx
index a3357ea67..0da82c679 100644
--- a/src/components/FormGlobal/FormNavigation.spec.tsx
+++ b/src/components/FormGlobal/FormNavigation.spec.tsx
@@ -1,13 +1,13 @@
+import Button from '@material-ui/core/Button'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
-import Button from '@material-ui/core/Button'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
import FormNavigation from './FormNavigation'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -19,6 +19,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('FormNavigation component', () => {
let store: any
beforeEach(() => {
diff --git a/src/components/FormGlobal/FormNavigation.tsx b/src/components/FormGlobal/FormNavigation.tsx
index 8a8bbf29b..c720d5bb6 100644
--- a/src/components/FormGlobal/FormNavigation.tsx
+++ b/src/components/FormGlobal/FormNavigation.tsx
@@ -6,7 +6,7 @@ import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
import { ProfileTypeStepForm } from 'enum/profileType.enum'
import { SgeStep } from 'enum/sgeStep.enum'
import React, { useCallback } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
interface FormNavigationProps {
step: ProfileTypeStepForm | EcogestureStepForm | SgeStep
@@ -30,7 +30,7 @@ const FormNavigation: React.FC<FormNavigationProps> = ({
isLoading,
}: FormNavigationProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const handlePreviousClick = () => {
handlePrevious()
}
@@ -38,7 +38,7 @@ const FormNavigation: React.FC<FormNavigationProps> = ({
handleNext()
//handle go back to connect for SGE
if (isLastConnectStep) {
- history.push('/consumption/electricity')
+ navigate('/consumption/electricity')
}
}
diff --git a/src/components/GCU/GCULink.tsx b/src/components/GCU/GCULink.tsx
index d3bdd037f..f1ce6a8c5 100644
--- a/src/components/GCU/GCULink.tsx
+++ b/src/components/GCU/GCULink.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import './gcuLink.scss'
import Link from '@material-ui/core/Link'
-import { Link as RouterLink } from 'react-router-dom'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import './gcuLink.scss'
const GCULink: React.FC = () => {
const { t } = useI18n()
@@ -14,7 +14,7 @@ const GCULink: React.FC = () => {
<Link
className="gcu-link-card-link"
component={RouterLink}
- to="options/gcu"
+ to="/options/gcu"
>
<div className="card optionCard">
<div className="gcu-link-card">
diff --git a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
index da5e1b8ff..47e9dce26 100644
--- a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -18,17 +18,10 @@ exports[`LegalNoticeLink component should be rendered correctly 1`] = `
Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
- "propTypes": Object {
- "innerRef": [Function],
- "onClick": [Function],
- "replace": [Function],
- "target": [Function],
- "to": [Function],
- },
"render": [Function],
}
}
- to="options/legalnotice"
+ to="/options/legalnotice"
>
<div
className="card optionCard"
diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx
index 16c35eb66..23cddd577 100644
--- a/src/components/Header/CozyBar.spec.tsx
+++ b/src/components/Header/CozyBar.spec.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import CozyBar from 'components/Header/CozyBar'
+import { ScreenType } from 'enum/screen.enum'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import CozyBar from 'components/Header/CozyBar'
import * as ModalAction from 'store/modal/modal.actions'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { modalStateData } from '../../../tests/__mocks__/modalStateData.mock'
-import { ScreenType } from 'enum/screen.enum'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -18,11 +18,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
-const mockGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
- useHistory: () => ({
- goBack: mockGoBack,
- }),
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
}))
const mockStore = configureStore([])
@@ -56,7 +55,7 @@ describe('CozyBar component', () => {
)
expect(wrapper.find('BarLeft')).toHaveLength(1)
wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
- expect(mockGoBack).toHaveBeenCalled()
+ expect(mockedNavigate).toHaveBeenCalled()
})
it('should call handleClickFeedbacks when feedback button is clicked', () => {
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index e551519bf..eae7de645 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -5,7 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ScreenType } from 'enum/screen.enum'
import React, { useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
@@ -22,7 +22,7 @@ const CozyBar = ({
backFunction,
}: CozyBarProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const dispatch = useDispatch()
const { BarLeft, BarCenter, BarRight } = cozy.bar
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
@@ -31,9 +31,9 @@ const CozyBar = ({
if (backFunction) {
backFunction()
} else {
- history.goBack()
+ navigate(-1)
}
- }, [backFunction, history])
+ }, [backFunction, navigate])
const handleClickFeedbacks = () => {
dispatch(updateModalIsFeedbacksOpen(true))
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 272c79896..7405f33ce 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -18,11 +18,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
-const mockGoBack = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
- useHistory: () => ({
- goBack: mockGoBack,
- }),
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
}))
const mocksetHeaderHeight = jest.fn()
@@ -87,7 +86,7 @@ describe('Header component', () => {
.find('.header-back-button')
.first()
.simulate('click')
- expect(mockGoBack).toHaveBeenCalled()
+ expect(mockedNavigate).toHaveBeenCalled()
})
it('should call handleClickFeedbacks when feedback button is clicked', () => {
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 8ff67e6ba..b412c34a4 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,16 +1,17 @@
-import IconButton from '@material-ui/core/IconButton'
-import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbackIcon from 'assets/icons/ico/feedback.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { ScreenType } from 'enum/screen.enum'
import React, { useCallback, useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
import { AppStore } from 'store'
import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
import './header.scss'
+import IconButton from '@material-ui/core/IconButton'
+import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { ScreenType } from 'enum/screen.enum'
+import { useNavigate } from 'react-router-dom'
+
interface HeaderProps {
/** translation key used as t('key.value') */
desktopTitleKey: string
@@ -29,7 +30,7 @@ const Header: React.FC<HeaderProps> = ({
backFunction,
}) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const header = useRef(null)
const dispatch = useDispatch()
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
@@ -40,9 +41,9 @@ const Header: React.FC<HeaderProps> = ({
if (backFunction) {
backFunction()
} else {
- history.goBack()
+ navigate(-1)
}
- }, [backFunction, history])
+ }, [backFunction, navigate])
const handleClickFeedbacks = () => {
dispatch(updateModalIsFeedbacksOpen(true))
diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx
index 70fd20ef2..704f02b8e 100644
--- a/src/components/Home/ConsumptionView.spec.tsx
+++ b/src/components/Home/ConsumptionView.spec.tsx
@@ -34,6 +34,11 @@ jest.mock('services/profile.service', () => {
}
})
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index 71426c536..f73f22f87 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -17,7 +17,7 @@ import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import ProfileService from 'services/profile.service'
import { AppStore } from 'store'
import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
@@ -40,7 +40,7 @@ interface ConsumptionViewProps {
const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidType,
}: ConsumptionViewProps) => {
- const history = useHistory()
+ const navigate = useNavigate()
const client = useClient()
const dispatch = useDispatch()
const isMulti = fluidType !== FluidType.MULTIFLUID
@@ -88,9 +88,9 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
showReleaseNotes(false, releaseNotes.notes, releaseNotes.redirectLink)
)
if (releaseNotes.redirectLink) {
- history.push(releaseNotes.redirectLink)
+ navigate(releaseNotes.redirectLink)
}
- }, [dispatch, history, releaseNotes.notes, releaseNotes.redirectLink])
+ }, [dispatch, navigate, releaseNotes.notes, releaseNotes.redirectLink])
const getPartnerKey = (fluidType: FluidType): 'enedis' | 'egl' | 'grdf' => {
switch (fluidType) {
diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx
index d177061f4..e7cdc22c7 100644
--- a/src/components/Home/FluidButton.spec.tsx
+++ b/src/components/Home/FluidButton.spec.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import {
createMockStore,
@@ -8,10 +8,10 @@ import {
} from '../../../tests/__mocks__/store'
import { FluidState, FluidType } from 'enum/fluid.enum'
-import FluidButton from './FluidButton'
-import UsageEventService from 'services/usageEvent.service'
-import configureStore from 'redux-mock-store'
import { GlobalState } from 'models'
+import configureStore from 'redux-mock-store'
+import UsageEventService from 'services/usageEvent.service'
+import FluidButton from './FluidButton'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -22,6 +22,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('FluidButton component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
index 73aee6c00..f4dfb311c 100644
--- a/src/components/Home/FluidButton.tsx
+++ b/src/components/Home/FluidButton.tsx
@@ -1,13 +1,14 @@
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback, useEffect, useState } from 'react'
+
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnerIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidState, FluidType } from 'enum/fluid.enum'
import { UsageEventType } from 'enum/usageEvent.enum'
-import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router-dom'
import DateChartService from 'services/dateChart.service'
import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
@@ -24,7 +25,7 @@ const FluidButton: React.FC<FluidButtonProps> = ({
isActive,
}: FluidButtonProps) => {
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
const client = useClient()
const [showError, setShowError] = useState<boolean>(false)
@@ -63,12 +64,12 @@ const FluidButton: React.FC<FluidButtonProps> = ({
type: UsageEventType.NAVIGATION_EVENT,
target: FluidType[fluidType].toLowerCase(),
})
- history.push(
+ navigate(
fluidType === FluidType.MULTIFLUID
? '/consumption'
: `/consumption/${FluidType[fluidType].toLowerCase()}`
)
- }, [history, fluidType, client])
+ }, [navigate, fluidType, client])
const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance
diff --git a/src/components/Home/FluidButtons.spec.tsx b/src/components/Home/FluidButtons.spec.tsx
index 06e18813a..9a1c8df02 100644
--- a/src/components/Home/FluidButtons.spec.tsx
+++ b/src/components/Home/FluidButtons.spec.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import FluidButtons from './FluidButtons'
import { FluidType } from 'enum/fluid.enum'
+import FluidButtons from './FluidButtons'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -18,6 +18,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('FluidButtons component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx
index 8610edb9a..d10e41da6 100644
--- a/src/components/Konnector/KonnectorModal.spec.tsx
+++ b/src/components/Konnector/KonnectorModal.spec.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import KonnectorModal from './KonnectorModal'
-import { FluidType } from 'enum/fluid.enum'
import { Button } from '@material-ui/core'
-import toJson from 'enzyme-to-json'
+import { FluidType } from 'enum/fluid.enum'
import { KonnectorError } from 'enum/konnectorError.enum'
+import toJson from 'enzyme-to-json'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
+import KonnectorModal from './KonnectorModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -22,6 +22,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('KonnectorModal component', () => {
let store: any
diff --git a/src/components/Konnector/KonnectorModalFooter.spec.tsx b/src/components/Konnector/KonnectorModalFooter.spec.tsx
index 9a07e71b6..19c858bc6 100644
--- a/src/components/Konnector/KonnectorModalFooter.spec.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.spec.tsx
@@ -4,10 +4,8 @@ import { FluidType } from 'enum/fluid.enum'
import { KonnectorError } from 'enum/konnectorError.enum'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import { GlobalState } from 'models/global.model'
import React from 'react'
import { Provider } from 'react-redux'
-import { MockStoreEnhanced } from 'redux-mock-store'
import { accountsData } from '../../../tests/__mocks__/accountsData.mock'
import {
createMockStore,
@@ -25,12 +23,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockClose = jest.fn()
const mockDelete = jest.fn()
@@ -47,7 +43,7 @@ describe('KonnectorModalFooter component', () => {
store = createMockStore(mockInitialEcolyoState)
mockDelete.mockClear()
mockClose.mockClear()
- mockHistoryPush.mockClear()
+ mockedNavigate.mockClear()
})
it('should be rendered correctly', () => {
@@ -157,6 +153,7 @@ describe('KonnectorModalFooter component', () => {
wrapper.find(Button).at(1).simulate('click')
await waitForComponentToPaint(wrapper)
expect(mockDelete).toHaveBeenCalled()
+ expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
it('should reset sge account and go back to login', async () => {
const wrapper = mount(
@@ -175,6 +172,7 @@ describe('KonnectorModalFooter component', () => {
wrapper.find(Button).at(1).simulate('click')
await waitForComponentToPaint(wrapper)
expect(mockDelete).toHaveBeenCalled()
+ expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
it('should not reset account if no account', () => {
const wrapper = mount(
@@ -191,6 +189,7 @@ describe('KonnectorModalFooter component', () => {
</Provider>
)
wrapper.find(Button).at(1).simulate('click')
+ expect(mockedNavigate).toHaveBeenCalledTimes(1)
expect(mockDelete).toHaveBeenCalledTimes(0)
})
})
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index e476536b4..584dd67a6 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -9,7 +9,7 @@ import { FluidType } from 'enum/fluid.enum'
import { KonnectorError } from 'enum/konnectorError.enum'
import { Account } from 'models'
import React, { useCallback } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import AccountService from 'services/account.service'
import './konnectorModal.scss'
@@ -34,20 +34,20 @@ const KonnectorModalFooter: React.FC<KonnectorModalFooterProps> = ({
}: KonnectorModalFooterProps) => {
const { t } = useI18n()
const client = useClient()
- const history = useHistory()
+ const navigate = useNavigate()
const handleSGELoginRetry = useCallback(() => {
handleCloseClick(state === SUCCESS_EVENT)
- history.push('/sge-connect')
- }, [handleCloseClick, history, state])
+ navigate('/sge-connect')
+ }, [handleCloseClick, navigate, state])
const handleResetSGEAccount = useCallback(async () => {
if (account) {
const accountService = new AccountService(client)
await accountService.deleteAccount(account)
await handleAccountDeletion()
- history.push('/sge-connect')
+ navigate('/sge-connect')
}
- }, [account, client, handleAccountDeletion, history])
+ }, [account, client, handleAccountDeletion, navigate])
const errorButtons = () => {
switch (error) {
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
index 5e71995a8..e623dfe4d 100644
--- a/src/components/Konnector/KonnectorViewerList.spec.tsx
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
import { mount } from 'enzyme'
+import React from 'react'
+import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
-import * as reactRedux from 'react-redux'
import KonnectorViewerList from './KonnectorViewerList'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -18,12 +18,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
describe('KonnectorViewerList component', () => {
@@ -52,6 +50,6 @@ describe('KonnectorViewerList component', () => {
</Provider>
)
wrapper.find('.connection-card').first().simulate('click')
- expect(mockHistoryPush).toHaveBeenCalled()
+ expect(mockedNavigate).toHaveBeenCalled()
})
})
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index b8504aa70..74d0cbba4 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -1,25 +1,24 @@
-import React, { useCallback } from 'react'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-
+import { FluidType } from 'enum/fluid.enum'
+import { FluidStatus } from 'models'
+import React, { useCallback } from 'react'
import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
-import './konnectorViewerList.scss'
-import { FluidStatus } from 'models'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import { FluidType } from 'enum/fluid.enum'
import { getAddPicto } from 'utils/picto'
-import { useHistory } from 'react-router-dom'
+import './konnectorViewerList.scss'
const KonnectorViewerList: React.FC = () => {
const { t } = useI18n()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
- const history = useHistory()
+ const navigate = useNavigate()
const goToFluid = useCallback(
fluidType => {
- history.push(`/consumption/${FluidType[fluidType].toLowerCase()}`)
+ navigate(`/consumption/${FluidType[fluidType].toLowerCase()}`)
},
- [history]
+ [navigate]
)
return (
<div className="kv-root">
diff --git a/src/components/LegalNotice/LegalNoticeLink.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
index d787f0f87..90c48a35d 100644
--- a/src/components/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -1,13 +1,13 @@
-import React, { useCallback } from 'react'
-import './legalNoticeLink.scss'
import Link from '@material-ui/core/Link'
-import { Link as RouterLink } from 'react-router-dom'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UsageEventType } from 'enum/usageEvent.enum'
+import React, { useCallback } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
+import './legalNoticeLink.scss'
const LegalNoticeLink: React.FC = () => {
const { t } = useI18n()
@@ -27,7 +27,7 @@ const LegalNoticeLink: React.FC = () => {
<Link
className="legal-notice-card-link"
component={RouterLink}
- to="options/legalnotice"
+ to="/options/legalnotice"
>
<div className="card optionCard" onClick={emitNavEvent}>
<div className="legal-notice-card">
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index 7a39bbb71..3192ae8c7 100644
--- a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -13,17 +13,10 @@ exports[`GCULink component should be rendered correctly 1`] = `
Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
- "propTypes": Object {
- "innerRef": [Function],
- "onClick": [Function],
- "replace": [Function],
- "target": [Function],
- "to": [Function],
- },
"render": [Function],
}
}
- to="options/gcu"
+ to="/options/gcu"
>
<div
className="card optionCard"
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 75ed3cf5d..338d13f6e 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -16,7 +16,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UsageEventType } from 'enum/usageEvent.enum'
import React, { useCallback } from 'react'
import { useSelector } from 'react-redux'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import './navBar.scss'
@@ -29,6 +29,7 @@ export const Navbar: React.FC = () => {
challengeDuelNotification,
analysisNotification,
} = useSelector((state: AppStore) => state.ecolyo.global)
+ const { pathname } = useLocation()
const client = useClient()
const emitNavEvent = useCallback(
@@ -51,8 +52,9 @@ export const Navbar: React.FC = () => {
<Link
component={NavLink}
to="/consumption"
- className="c-nav-link"
- activeClassName="is-active"
+ className={`c-nav-link ${
+ pathname.includes('/consumption') ? 'is-active' : ''
+ }`}
>
<StyledIcon className="c-nav-icon off" icon={ConsoIconOff} />
<StyledIcon className="c-nav-icon on" icon={ConsoIconOn} />
@@ -63,8 +65,9 @@ export const Navbar: React.FC = () => {
<Link
component={NavLink}
to="/challenges"
- className="c-nav-link"
- activeClassName="is-active"
+ className={`c-nav-link ${
+ pathname.includes('/challenges') ? 'is-active' : ''
+ }`}
>
{(challengeExplorationNotification ||
challengeActionNotification ||
@@ -81,8 +84,9 @@ export const Navbar: React.FC = () => {
<Link
component={NavLink}
to="/ecogestures"
- className="c-nav-link"
- activeClassName="is-active"
+ className={`c-nav-link ${
+ pathname.includes('/ecogestures') ? 'is-active' : ''
+ }`}
>
<StyledIcon className="c-nav-icon off" icon={BulbIconOff} />
<StyledIcon className="c-nav-icon on" icon={BulbIconOn} />
@@ -93,8 +97,9 @@ export const Navbar: React.FC = () => {
<Link
component={NavLink}
to="/analysis"
- className="c-nav-link"
- activeClassName="is-active"
+ className={`c-nav-link ${
+ pathname === '/analysis' ? 'is-active' : ''
+ }`}
>
{analysisNotification && <div className="nb-notif">1</div>}
<StyledIcon className="c-nav-icon off" icon={AnalysisIconOff} />
@@ -106,8 +111,9 @@ export const Navbar: React.FC = () => {
<Link
component={NavLink}
to="/options"
- className="c-nav-link"
- activeClassName="is-active"
+ className={`c-nav-link ${
+ pathname.includes('/options') ? 'is-active' : ''
+ }`}
>
<StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
<StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
diff --git a/src/components/Options/HelpLink/HelpLink.scss b/src/components/Options/HelpLink/HelpLink.scss
index 6b6d881a4..dc6ae1872 100644
--- a/src/components/Options/HelpLink/HelpLink.scss
+++ b/src/components/Options/HelpLink/HelpLink.scss
@@ -26,6 +26,7 @@
.help-card-link {
color: $white;
+ cursor: pointer;
}
.help-card {
display: flex;
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
index 700aecb5d..99104e658 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
@@ -25,12 +25,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockStore = configureStore([])
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index 230e6f90e..f95840170 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -1,36 +1,36 @@
-import React, { useState, useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { AppStore } from 'store'
-import { useSelector } from 'react-redux'
import Button from '@material-ui/core/Button'
-import './profileTypeOptions.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enum/fluid.enum'
import {
- IndividualOrCollective,
HousingType,
- ThreeChoicesAnswer,
+ IndividualOrCollective,
OutsideFacingWalls,
+ ThreeChoicesAnswer,
} from 'enum/profileType.enum'
-import { FluidType } from 'enum/fluid.enum'
-import { useHistory } from 'react-router-dom'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import './profileTypeOptions.scss'
import {
Accordion,
- AccordionSummary,
AccordionDetails,
+ AccordionSummary,
} from '@material-ui/core'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
+import profileIcon from 'assets/icons/ico/profile.svg'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import profileIcon from 'assets/icons/ico/profile.svg'
import useExploration from 'components/Hooks/useExploration'
+import Icon from 'cozy-ui/transpiled/react/Icon'
import { UserExplorationID } from 'enum/userExploration.enum'
+import { useNavigate } from 'react-router-dom'
const ProfileTypeOptions: React.FC = () => {
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
const profileType = useSelector((state: AppStore) => state.ecolyo.profileType)
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const [, setValidExploration] = useExploration()
const [active, setActive] = useState<boolean>(false)
@@ -42,8 +42,8 @@ const ProfileTypeOptions: React.FC = () => {
}
const goToForm = useCallback(() => {
- history.push('/profileType')
- }, [history])
+ navigate('/profileType')
+ }, [navigate])
return (
<div className="profile-type-root">
diff --git a/src/components/Options/Unsubscribe/UnSubscribe.spec.tsx b/src/components/Options/Unsubscribe/UnSubscribe.spec.tsx
index 2bc1f6460..444b03735 100644
--- a/src/components/Options/Unsubscribe/UnSubscribe.spec.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.spec.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import React from 'react'
import { Provider } from 'react-redux'
+import * as profileActions from 'store/profile/profile.actions'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../../tests/__mocks__/store'
-import * as profileActions from 'store/profile/profile.actions'
import UnSubscribe from './UnSubscribe'
-import { Button } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -32,6 +32,11 @@ jest.mock('services/profile.service', () => {
})
})
const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('UnSubscribe component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/Options/Unsubscribe/UnSubscribe.tsx b/src/components/Options/Unsubscribe/UnSubscribe.tsx
index 6253a5ccd..19ab95cb7 100644
--- a/src/components/Options/Unsubscribe/UnSubscribe.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.tsx
@@ -7,7 +7,7 @@ import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import { updateProfile } from 'store/profile/profile.actions'
import './unSubscribe.scss'
@@ -18,10 +18,10 @@ const UnSubscribe: React.FC = () => {
}
const { t } = useI18n()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const unSubscribe = async () => {
dispatch(updateProfile({ sendAnalysisNotification: false }))
- history.push('/consumption')
+ navigate('/consumption')
}
return (
diff --git a/src/components/ProfileType/ProfileTypeFinished.spec.tsx b/src/components/ProfileType/ProfileTypeFinished.spec.tsx
index 3f4955141..f15126388 100644
--- a/src/components/ProfileType/ProfileTypeFinished.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished.spec.tsx
@@ -1,26 +1,22 @@
+import { Button } from '@material-ui/core'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
+import { mockProfileType } from '../../../tests/__mocks__/profileType.mock'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
import ProfileTypeFinished from './ProfileTypeFinished'
-import { mockProfileType } from '../../../tests/__mocks__/profileType.mock'
-import { Button } from '@material-ui/core'
-const mockHistoryGoBack = jest.fn()
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: () => ({
pathname: '/ecogesture-form',
}),
- useHistory: () => ({
- goBack: mockHistoryGoBack,
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -58,6 +54,6 @@ describe('ProfileTypeFinished component', () => {
</Provider>
)
wrapper.find(Button).first().simulate('click')
- expect(mockHistoryPush).toHaveBeenCalledWith('/ecogesture-selection')
+ expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-selection')
})
})
diff --git a/src/components/ProfileType/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished.tsx
index 9149ff48d..0615a27c4 100644
--- a/src/components/ProfileType/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished.tsx
@@ -13,7 +13,7 @@ import { TimePeriod } from 'models'
import { ProfileType } from 'models/profileType.model'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
import ProfileTypeService from 'services/profileType.service'
import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import UsageEventService from 'services/usageEvent.service'
@@ -31,16 +31,16 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
const { t } = useI18n()
const location = useLocation()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const client = useClient()
const { currentChallenge } = useSelector(
(state: AppStore) => state.ecolyo.challenge
)
const handleClick = () => {
if (location?.pathname === '/ecogesture-form') {
- history.push('/ecogesture-selection')
+ navigate('/ecogesture-selection')
} else {
- history.goBack()
+ navigate(-1)
}
}
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx
index 135d68c84..fee5fae40 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx
@@ -1,15 +1,15 @@
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
-import {
- createMockStore,
- mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
mockProfileType,
mockProfileTypeAnswers,
} from '../../../tests/__mocks__/profileType.mock'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
import ProfileTypeFormMultiChoice from './ProfileTypeFormMultiChoice'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -22,6 +22,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('ProfileTypeFormMultiChoice component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let store: any
diff --git a/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx
index 75c3679b9..4dd96a015 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx
@@ -1,15 +1,15 @@
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
-import {
- createMockStore,
- mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
mockProfileType,
mockProfileTypeAnswers,
} from '../../../tests/__mocks__/profileType.mock'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
import ProfileTypeFormNumber from './ProfileTypeFormNumber'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -21,6 +21,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('ProfileTypeFormNumber component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx
index 01aed1c2f..ec9c8ed84 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx
@@ -1,15 +1,15 @@
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
-import {
- createMockStore,
- mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
mockProfileType,
mockProfileTypeAnswers,
} from '../../../tests/__mocks__/profileType.mock'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
import ProfileTypeFormNumberSelection from './ProfileTypeFormNumberSelection'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -21,6 +21,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('ProfileTypeFormNumberSelection component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx
index 4732a2f69..97decd124 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx
@@ -1,16 +1,16 @@
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
+import {
+ mockProfileType,
+ mockProfileTypeAnswers,
+} from '../../../tests/__mocks__/profileType.mock'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
import ProfileTypeFormSingleChoice from './ProfileTypeFormSingleChoice'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
-import {
- mockProfileType,
- mockProfileTypeAnswers,
-} from '../../../tests/__mocks__/profileType.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -21,6 +21,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
describe('ProfileTypeFormSingleChoice component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/ProfileType/ProfileTypeView.spec.tsx b/src/components/ProfileType/ProfileTypeView.spec.tsx
index 8c3385e1f..2018cfe89 100644
--- a/src/components/ProfileType/ProfileTypeView.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeView.spec.tsx
@@ -1,7 +1,7 @@
+import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
+import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
-import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
import {
createMockStore,
mockInitialEcolyoState,
@@ -16,6 +16,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
diff --git a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
index 0960911e6..92053cea0 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
@@ -24,7 +24,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const mockHistoryPush = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryPush,
}),
}))
diff --git a/src/components/Quiz/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish.spec.tsx
index f8e8fed50..fbce4cee6 100644
--- a/src/components/Quiz/QuizFinish.spec.tsx
+++ b/src/components/Quiz/QuizFinish.spec.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
+import Button from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { mount } from 'enzyme'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import QuizFinish from './QuizFinish'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { act } from 'react-dom/test-utils'
+import QuizFinish from './QuizFinish'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -29,12 +29,10 @@ jest.mock('services/challenge.service', () => {
})
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockStore = configureStore([])
@@ -64,6 +62,6 @@ describe('QuizFinish', () => {
wrapper.update()
})
- expect(mockHistoryPush).toHaveBeenCalledWith('/challenges')
+ expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
})
})
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index 7306c22ea..b6d49e253 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback, useMemo } from 'react'
-import './quizFinish.scss'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import starResult from 'assets/icons/visu/quiz/starResult.svg'
import Button from '@material-ui/core/Button'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useDispatch } from 'react-redux'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useMemo } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { UserChallenge } from 'models'
-import { useHistory } from 'react-router-dom'
+import './quizFinish.scss'
interface QuizFinishProps {
userChallenge: UserChallenge
@@ -21,7 +21,7 @@ const QuizFinish: React.FC<QuizFinishProps> = ({
}: QuizFinishProps) => {
const client: Client = useClient()
const { t } = useI18n()
- const history = useHistory()
+ const navigate = useNavigate()
const dispatch = useDispatch()
const challengeService: ChallengeService = useMemo(
() => new ChallengeService(client),
@@ -45,7 +45,7 @@ const QuizFinish: React.FC<QuizFinishProps> = ({
userChallenge.quiz
)
dispatch(updateUserChallengeList(userChallengeUpdated))
- history.push('/challenges')
+ navigate('/challenges')
}
return (
<div className="quiz-container">
diff --git a/src/components/Quiz/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion.spec.tsx
index c18c3e175..a83ed32a4 100644
--- a/src/components/Quiz/QuizQuestion.spec.tsx
+++ b/src/components/Quiz/QuizQuestion.spec.tsx
@@ -1,15 +1,15 @@
/* eslint-disable react/display-name */
-import React from 'react'
+import { UserQuestionState } from 'enum/userQuiz.enum'
import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
+import React from 'react'
import * as reactRedux from 'react-redux'
+import { Provider } from 'react-redux'
import {
createMockStore,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
-import QuizQuestion from './QuizQuestion'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import { UserQuestionState } from 'enum/userQuiz.enum'
+import QuizQuestion from './QuizQuestion'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -24,7 +24,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const mockHistoryPush = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
+ useNavigate: () => ({
push: mockHistoryPush,
}),
}))
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index 689dfb025..24009e287 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react'
-import './quizQuestion.scss'
-import QuizQuestionContent from 'components/Quiz/QuizQuestionContent'
import QuizCustomQuestionContent from 'components/Quiz/QuizCustomQuestionContent'
+import QuizQuestionContent from 'components/Quiz/QuizQuestionContent'
+import { Client, useClient } from 'cozy-client'
import { QuestionEntity, UserChallenge } from 'models'
-import { useHistory } from 'react-router-dom'
+import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
+import { useNavigate } from 'react-router-dom'
import QuizService from 'services/quiz.service'
-import { Client, useClient } from 'cozy-client'
+import { AppStore } from 'store'
+import './quizQuestion.scss'
interface QuizQuestion {
userChallenge: UserChallenge
@@ -27,10 +27,10 @@ const QuizQuestion: React.FC<QuizQuestion> = ({
useState<boolean>(false)
const client: Client = useClient()
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
- const history = useHistory()
+ const navigate = useNavigate()
const goBack = () => {
- history.push('/challenges')
+ navigate('/challenges')
}
useEffect(() => {
diff --git a/src/components/Quiz/QuizQuestionContent.spec.tsx b/src/components/Quiz/QuizQuestionContent.spec.tsx
index ef3ebff54..326945c96 100644
--- a/src/components/Quiz/QuizQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizQuestionContent.spec.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import QuizQuestionContent from 'components/Quiz/QuizQuestionContent'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import QuizQuestionContent from 'components/Quiz/QuizQuestionContent'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -17,12 +17,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
-const mockHistoryPush = jest.fn()
+const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
+ useNavigate: () => mockedNavigate,
}))
const mockUpdateUserQuiz = jest.fn()
@@ -58,7 +56,7 @@ describe('QuizQuestionContent component', () => {
<QuizQuestionContent
userChallenge={userChallengeData[0]}
setIsCustomQuest={() => false}
- goBack={mockHistoryPush('/challenges')}
+ goBack={mockedNavigate('/challenges')}
/>
</Provider>
)
@@ -79,12 +77,12 @@ describe('QuizQuestionContent component', () => {
<QuizQuestionContent
userChallenge={userChallengeData[0]}
setIsCustomQuest={() => false}
- goBack={mockHistoryPush('/challenges')}
+ goBack={mockedNavigate('/challenges')}
/>
</Provider>
)
wrapper.find('.btn-back').first().simulate('click')
- expect(mockHistoryPush).toHaveBeenCalledWith('/challenges')
+ expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
})
})
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 28abfb028..fe430787e 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -5,16 +5,16 @@ import DuelView from 'components/Duel/DuelView'
import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
import EcogestureSelection from 'components/EcogestureSelection/EcogestureSelection'
import ExplorationView from 'components/Exploration/ExplorationView'
+import Loader from 'components/Loader/Loader'
import UnSubscribe from 'components/Options/Unsubscribe/UnSubscribe'
import QuizView from 'components/Quiz/QuizView'
import TermsView from 'components/Terms/TermsView'
import { FluidType } from 'enum/fluid.enum'
import { TermsStatus } from 'models'
import React, { lazy, Suspense } from 'react'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
const ConsumptionView = lazy(() => import('components/Home/ConsumptionView'))
-
const EcogestureView = lazy(
() => import('components/Ecogesture/EcogestureView')
)
@@ -34,56 +34,74 @@ const ProfileTypeView = lazy(
interface RouteProps {
termsStatus: TermsStatus
}
-const Routes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
+const AppRoutes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
return (
- <Suspense fallback={<div></div>}>
- <Switch>
- {termsStatus.accepted && <Redirect from="/terms" to="/consumption" />}
- <Route path="/terms" component={TermsView} />
+ <Suspense
+ fallback={
+ <div className="loaderContainer">
+ <Loader />
+ </div>
+ }
+ >
+ <Routes>
+ {termsStatus.accepted && (
+ <Route
+ path="/terms"
+ element={<Navigate replace to="/consumption" />}
+ />
+ )}
+ <Route path="/terms" element={<TermsView />} />
{!termsStatus.accepted && (
<>
- <Redirect from="*" to="/terms" />
- <Redirect from="/" to="/terms" />
+ <Route path="*" element={<Navigate replace to="/terms" />} />
+ <Route path="/" element={<Navigate replace to="/terms" />} />
</>
)}
- <Route path={`/consumption/electricity`} exact>
- <ConsumptionView fluidType={FluidType.ELECTRICITY} />
- </Route>
- <Route path={`/consumption/water`} exact>
- <ConsumptionView fluidType={FluidType.WATER} />
- </Route>
- <Route path={`/consumption/gas`} exact>
- <ConsumptionView fluidType={FluidType.GAS} />
- </Route>
- <Route path={`/consumption`} exact>
- <ConsumptionView fluidType={FluidType.MULTIFLUID} />
- </Route>
-
- <Route path={`/sge-connect`} component={SgeConnectView} />
- <Route path={`/challenges/duel`} component={DuelView} />
- <Route path={`/challenges/quiz`} component={QuizView} />
- <Route path={`/challenges/exploration`} component={ExplorationView} />
- <Route path={`/challenges/action`} exact component={ActionView} />
- <Route path={`/challenges/`} component={ChallengeView} exact />
- <Route path="/ecogesture-form" component={EcogestureFormView} />
- <Route path="/ecogesture-selection" component={EcogestureSelection} />
- <Route path="/ecogesture/:id/:tab" component={SingleEcogesture} />
- <Route path="/ecogesture/:id" component={SingleEcogesture} />
- <Route path={`/ecogestures`} component={EcogestureView} />
- <Route path={`/ecogestures`} component={EcogestureView} />
- <Route path={`/options/legalnotice`} component={LegalNoticeView} />
- <Route path={`/options/gcu`} component={GCUView} />
- <Route path={'/options/:connectParam'} exact component={OptionsView} />
- <Route path={'/options'} exact component={OptionsView} />
- <Route path="/analysis" component={AnalysisView} />
- <Route path="/profiletype" component={ProfileTypeView} />
- <Route path="/unsubscribe" component={UnSubscribe} />
-
- <Redirect from="/" to="/consumption" />
- <Redirect from="*" to="/consumption" />
- </Switch>
+ <Route
+ path="/consumption/electricity"
+ element={<ConsumptionView fluidType={FluidType.ELECTRICITY} />}
+ />
+ <Route
+ path="/consumption/water"
+ element={<ConsumptionView fluidType={FluidType.WATER} />}
+ />
+ <Route
+ path="/consumption/gas"
+ element={<ConsumptionView fluidType={FluidType.GAS} />}
+ />
+ <Route
+ path="/consumption"
+ element={<ConsumptionView fluidType={FluidType.MULTIFLUID} />}
+ />
+ <Route path="/sge-connect" element={<SgeConnectView />} />
+ <Route path="/challenges/duel" element={<DuelView />} />
+ <Route path="/challenges/quiz" element={<QuizView />} />
+ <Route path="/challenges/exploration" element={<ExplorationView />} />
+ <Route path="/challenges/action" element={<ActionView />} />
+ <Route path="/challenges/" element={<ChallengeView />} />
+ <Route path="/ecogesture-form" element={<EcogestureFormView />} />
+ <Route path="/ecogesture-selection" element={<EcogestureSelection />} />
+ <Route
+ path="/ecogesture/:ecogestureID/:tab"
+ element={<SingleEcogesture />}
+ />
+ <Route
+ path="/ecogesture/:ecogestureID"
+ element={<SingleEcogesture />}
+ />
+ <Route path="/ecogestures" element={<EcogestureView />} />
+ <Route path="/options/legalnotice" element={<LegalNoticeView />} />
+ <Route path="/options/gcu" element={<GCUView />} />
+ <Route path="/options/:connectParam" element={<OptionsView />} />
+ <Route path="/options" element={<OptionsView />} />
+ <Route path="/analysis" element={<AnalysisView />} />
+ <Route path="/profiletype" element={<ProfileTypeView />} />
+ <Route path="/unsubscribe" element={<UnSubscribe />} />
+ <Route path="/" element={<Navigate replace to="/consumption" />} />
+ <Route path="*" element={<Navigate replace to="/consumption" />} />
+ </Routes>
</Suspense>
)
}
-export default Routes
+export default AppRoutes
diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx
index 6aa034395..ffcd1aaeb 100644
--- a/src/components/Terms/TermsView.spec.tsx
+++ b/src/components/Terms/TermsView.spec.tsx
@@ -28,6 +28,11 @@ jest.mock('services/terms.service', () => {
}
})
})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
const mockStore = configureStore([])
const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index ad193b4bd..00e482ef6 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -1,25 +1,25 @@
-import React, { useCallback, useState } from 'react'
+import { Button } from '@material-ui/core'
import classNames from 'classnames'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { Button } from '@material-ui/core'
+import { useNavigate } from 'react-router-dom'
import TermsService from 'services/terms.service'
-import { useClient } from 'cozy-client'
-import DataShareConsentContent from './DataShareConsentContent'
-import './termsView.scss'
-import { useHistory } from 'react-router-dom'
-import { decoreText } from 'utils/decoreText'
+import { AppStore } from 'store'
import { updateTermValidation } from 'store/global/global.actions'
+import { decoreText } from 'utils/decoreText'
import CGUModal from './CGUModal'
+import DataShareConsentContent from './DataShareConsentContent'
import LegalNoticeModal from './LegalNoticeModal'
-import { AppStore } from 'store'
import MinorUpdateContent from './MinorUpdateContent'
+import './termsView.scss'
const TermsView: React.FC = () => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch()
- const history = useHistory()
+ const navigate = useNavigate()
const [GCUValidation, setGCUValidation] = useState<boolean>(false)
const [dataConsentValidation, setDataConsentValidation] =
useState<boolean>(false)
@@ -54,8 +54,8 @@ const TermsView: React.FC = () => {
})
)
}
- history.push('/consumption')
- }, [dispatch, client, history])
+ navigate('/consumption')
+ }, [dispatch, client, navigate])
return (
<div className="terms-wrapper">
diff --git a/src/services/ecogesture.service.ts b/src/services/ecogesture.service.ts
index d3bc02cfc..795bc79dd 100644
--- a/src/services/ecogesture.service.ts
+++ b/src/services/ecogesture.service.ts
@@ -1,5 +1,6 @@
import * as Sentry from '@sentry/react'
import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import logger from 'cozy-logger'
import { ECOGESTURE_DOCTYPE } from 'doctypes'
import { Season, Usage } from 'enum/ecogesture.enum'
import { FluidType } from 'enum/fluid.enum'
@@ -8,7 +9,6 @@ import { orderBy } from 'lodash'
import { Ecogesture } from 'models'
import { ProfileEcogesture } from 'models/profileEcogesture.model'
import logApp from 'utils/logger'
-import logger from 'cozy-logger'
const logStack = logger.namespace('ecogestureService')
@@ -49,10 +49,8 @@ export default class EcogestureService {
return ecogestures
}
/**
- *
* @param {string} ids - ecogestures ids
* @returns {Promise<Ecogesture[]>}
- *
*/
public async getEcogesturesByIds(ids: string[]): Promise<Ecogesture[]> {
const query: QueryDefinition = Q(ECOGESTURE_DOCTYPE).getByIds(ids)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8a59dff68..628ccfc64 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -66,3 +66,9 @@
.accordion-icon {
color: $white;
}
+
+.loaderContainer {
+ height: 80vh;
+ justify-content: center;
+ display: flex;
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index f26e17766..5539950b8 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,10 +1,10 @@
+import { Season } from 'enum/ecogesture.enum'
import get from 'lodash/get'
+import { DateTime, Interval } from 'luxon'
import { FluidStatus, GetRelationshipsReturn, Relation } from 'models'
+import challengeData from '../db/challengeEntity.json'
import { FluidState, FluidType } from '../enum/fluid.enum'
import { KonnectorUpdate } from '../enum/konnectorUpdate.enum'
-import { DateTime, Interval } from 'luxon'
-import { Season } from 'enum/ecogesture.enum'
-import challengeData from '../db/challengeEntity.json'
export function getFluidType(type: string) {
switch (type.toUpperCase()) {
@@ -114,7 +114,7 @@ export function getRelationships<D>(
* @param id
* @param pathType
*/
-export const importIconbyId = async (id: string, pathType: string) => {
+export const importIconById = async (id: string, pathType: string) => {
// Les svg doivent être au format id.svg
let importedChallengeIcon
try {
diff --git a/yarn.lock b/yarn.lock
index e07a972c0..644998649 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1466,7 +1466,7 @@
dependencies:
regenerator-runtime "^0.12.0"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
@@ -1480,6 +1480,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.7.6":
+ version "7.20.7"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+ integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
+ dependencies:
+ regenerator-runtime "^0.13.11"
+
"@babel/template@^7.16.7", "@babel/template@^7.18.10":
version "7.18.10"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -2319,6 +2326,11 @@
"@react-spring/core" "9.0.0-rc.3"
"@react-spring/shared" "9.0.0-rc.3"
+"@remix-run/router@1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
+ integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
+
"@sentry/browser@7.21.1":
version "7.21.1"
resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.21.1.tgz#bffa3ea19050c06400107d2297b9802f9719f98b"
@@ -2774,7 +2786,7 @@
dependencies:
"@types/node" "*"
-"@types/history@^4.7.11", "@types/history@^4.7.5":
+"@types/history@^4.7.11":
version "4.7.11"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
@@ -2922,7 +2934,7 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
-"@types/react-router-dom@^5.1.3":
+"@types/react-router-dom@^5.3.3":
version "5.3.3"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
@@ -8930,17 +8942,12 @@ highlight.js@^10.7.1:
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
-history@^4.9.0:
- version "4.10.1"
- resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
- integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+history@^5.3.0:
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+ integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
dependencies:
- "@babel/runtime" "^7.1.2"
- loose-envify "^1.2.0"
- resolve-pathname "^3.0.0"
- tiny-invariant "^1.0.2"
- tiny-warning "^1.0.0"
- value-equal "^1.0.1"
+ "@babel/runtime" "^7.7.6"
hmac-drbg@^1.0.1:
version "1.0.1"
@@ -9864,11 +9871,6 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
dependencies:
is-docker "^2.0.0"
-isarray@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
- integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -11049,7 +11051,7 @@ long@^4.0.0:
resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -11414,14 +11416,6 @@ min-indent@^1.0.0:
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-mini-create-react-context@^0.4.0:
- version "0.4.1"
- resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
- integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
- dependencies:
- "@babel/runtime" "^7.12.1"
- tiny-warning "^1.0.3"
-
mini-css-extract-plugin@0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
@@ -12870,13 +12864,6 @@ path-to-regexp@0.1.7:
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
-path-to-regexp@^1.7.0:
- version "1.8.0"
- resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
- integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
- dependencies:
- isarray "0.0.1"
-
path-type@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -13896,34 +13883,20 @@ react-remove-scroll@^2.4.0:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
-react-router-dom@5.3.3:
- version "5.3.3"
- resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199"
- integrity sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==
+react-router-dom@^6.6.1:
+ version "6.6.1"
+ resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.1.tgz#1b96ec0b2cefa7319f1251383ea5b41295ee260d"
+ integrity sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==
dependencies:
- "@babel/runtime" "^7.12.13"
- history "^4.9.0"
- loose-envify "^1.3.1"
- prop-types "^15.6.2"
- react-router "5.3.3"
- tiny-invariant "^1.0.2"
- tiny-warning "^1.0.0"
+ "@remix-run/router" "1.2.1"
+ react-router "6.6.1"
-react-router@5.3.3:
- version "5.3.3"
- resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.3.tgz#8e3841f4089e728cf82a429d92cdcaa5e4a3a288"
- integrity sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==
+react-router@6.6.1:
+ version "6.6.1"
+ resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.1.tgz#17de6cf285f2d1c9721a3afca999c984e5558854"
+ integrity sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==
dependencies:
- "@babel/runtime" "^7.12.13"
- history "^4.9.0"
- hoist-non-react-statics "^3.1.0"
- loose-envify "^1.3.1"
- mini-create-react-context "^0.4.0"
- path-to-regexp "^1.7.0"
- prop-types "^15.6.2"
- react-is "^16.6.0"
- tiny-invariant "^1.0.2"
- tiny-warning "^1.0.0"
+ "@remix-run/router" "1.2.1"
react-select@^4.3.0:
version "4.3.1"
@@ -14261,6 +14234,11 @@ regenerator-runtime@^0.12.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+regenerator-runtime@^0.13.11:
+ version "0.13.11"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+ integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
regenerator-runtime@^0.13.4:
version "0.13.9"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -14490,11 +14468,6 @@ resolve-from@^5.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-resolve-pathname@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
- integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -15973,12 +15946,7 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
-tiny-invariant@^1.0.2:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
- integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
-
-tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -16627,11 +16595,6 @@ validate-npm-package-name@3.0.0:
dependencies:
builtins "^1.0.3"
-value-equal@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
- integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
vary@^1, vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
--
GitLab