diff --git a/.vscode/settings.json b/.vscode/settings.json
index ec02b433c2fa2772f38712180238c8b3980ac3d3..1f1e7b0bf6bb476eaa432a6a0377fc9abc92a62c 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 43b7cc9752aae509ef6569676303f6cc7fdab740..932f0c84bc9ccecff6bb7f290ef38123e6222f70 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 5193fdc0668637ac64cbbc273e9cdbf35bccfff1..e660968f86e589910ddb115ca045b37a7e804ba3 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 ca25da039fdcd87347f43df0ebd138f2d06834c2..c1c45183ba142f9e4552d53a5763289372bbbee7 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 39f844c422c10bd7f29bef8ec1d66439bf114a38..b91d9de04786fb04148019726bc3c6a397ab8368 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 6dcfbfac60b6b6d5adcdb5d538d2fa558416a633..fa5299b089465c4cb35ce2093255b47ffceb2d62 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 b22aad89dd19f51ee017f2ba2311e2d0ed8cab38..b5071b647b31878ff649846f558a1ac7c4f44079 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 b5d5731bdc542a3abaa662515a8017512ef672e5..c483853482883d01cfecc473b6a0474a3107eb6f 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 7b2d0347827580ac2ca64d383e0e2f6afbaa65c7..db8fec3a79b77ae6c9c6fbc1b10ee11b57cd8c4c 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 50040a437b9a686564147e238b82f656bda3ddef..d6bd172a6fc807182814ba36a57c93cbf684779b 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 4dfb6ac44d9d2b895956b28902f7a3664cab1862..1595ec68f262a62896841fd0a1a77c7dd2586ba6 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 ea850893ab874a7aa107c2fa97dc32c30b2aa659..daa4d07f30ddcd7095d21789e725a20da1f13fa6 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 b612c1422197e971ae30d5478a1115767b9484ba..1c8fbc8f087afe197f7844743f6b5de44176edbf 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 561e0e0e284e646bfce0cd6087d14531abe556d8..85f09505697773d606c7762294303c710ac2342c 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 c80479c0bc760ddccb18ae119e6c473b47f096f0..58165f30c0720574e4f615614457c07dcbd53d47 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 1c91ccaf086d8e266c051b1869760209b3c2bc92..4ea1ba5dec4ce4995302569192dfcc10ea6741ce 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 cd290bbd0ef71a50fd8b192df69b06379bd2b480..5de0b85096d762cf1c1a77fdc5a81c55d859aff8 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 aed2d7c32e5144ba4da88082915aea8c158b0ab8..e447ca39f94588f1d0fee157b1a693b61826d331 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 5ad7f626d5a2bb3b14241444eb7faf726bc53254..969e55c0f4c78fe10974e4245c85ce74cdaa9a44 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 586a2c3710ae00b0c960995a20c1b8fc3917d90d..9933fcbee9c92fbeb3c714c2aec83529ba3312cb 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 b455ad417a91598bc98890d33f2cb2ceae8d176c..3a8dcbb186ec5b0930ac94e722e45bae3d847810 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 eaf5718d192cf3e11a74c324d43783f8b41eee51..60603710c92b10e56596abbe4ef31e78dcf017fe 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 abaea68bc68f3bc6cc2821c833a25d2e86fc1c63..c916c501d205d86d1816d257d4a58441a74d1d55 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 58341fef52e2530efb389b64878749cc216bb1c1..4142f1c9b176ea4a6d53e5778e630ffef5382530 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 20cb2ada3e1242a55a25cb627c594827141ce0d8..d339c9b712e517eca65902f26761e3e337ae0533 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 4dd3fb84520227f1de56debcc40c86b70e6e706b..74ba58c51bf9595adbf60df0ba2ba655e6a8edc6 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 96dd6a33b42071b6580e9beac44d28000be5cef4..792c8301f707e54b63001033112137c3ac2070c9 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 5f768c23a1bbb35bbee5ea95f74701d92777469a..cc0478b20fa95c845de3f47da42df5cc97bb91a1 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 8755cca5bb3038b261b16375203bf7e596b27026..dc745f6f3c1f841fe5c7c51ff2b327ccbe8755e2 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 a2d3b9d3f2e39b00d98bdd9a58199c1d72967403..259324ac27e7d96c2973435dd07edeff4e3eda7f 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 f10cb32c1d0690a06d472f05803608757abaa378..3f7e11a9aa3a6058a2cd7f223edf86427a51306f 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 f960567e1405eeeade42c79ae88b04f7762bc56a..373de8b10fe165385f668fa85950654358b1bf44 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 7955e98c24720c44fdf2aa5d45ddf79d0e065187..1e7314f2457cb4d7e78f7b0a44400177df4bd1ef 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 d14ecfb0661d7b93339d31bef7287c87c59857ab..80e9e5945fa5d244104d05dbf1ebe9b91aaa7bff 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 acaea2598de209cc0f60e92e45c5ec9f77049b2c..8202525bd14939a9eaf3d42a974f8b34fd72f005 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 171d0d946be1aac7a2053a3224151a1e4dd46bb4..9e6646353bb28780b793e278761ecaf60a6de765 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 7afeda42df5d56f342c94006976a296c46dd595b..543839aff4da3f44d2450a32b5812902c92205ca 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 3b0ea595c6ef4d8e8ddd162974eefaf80c66debc..b1b1d28086b8651616c59080b59f48e073d4d705 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 74b23a0543a853eac78a4ee6f0b2d967ec14ab56..cbc81c630edb99cb32fdb76bff01414b870abd21 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 c542baeb0a557ed1899f306b8865ceb285ca93fa..328d791c8489c74edc5a58433c139e16047d2f93 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 da088b854b7204eb110fd7f54844adb717eadc67..4f079d5f26c4e3c06e912b6c8710856be9e95987 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 54edb152bc533b29ab2c8ae014d08bb481b46b73..d96cc56ff760117c24dc14c00dbe8c9fd0640e61 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 2aca94f0f5a5ffff3ac0c7749837d1a6dcfddfab..89d866f4378950918f30a64a3cd4c685f9120814 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 da0e18a3e2c7f502e40e2c1895aa78c76210da04..d0c502e2cf344c2e43163bfd2ccb2085da0257ea 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 01d6a11cd9b36f83d00fdd54b399c3ed3f74e360..09bfb0cc9e377400b21294eb8572f26b46da3830 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 5c78275e6bf5c42d3176c8a3ad3af24392f77c2b..dfeb15139aa0387088e93412481be8f1bb93991b 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 ed59dc9cb4583e1bfa5df52f01ea136e99926d84..b6f92fd6d00ef463f5ca951ae84d52e057d3a4c5 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 cec76aff46bb1c3cc68e104b9d9ba5ebbf7d11b2..49e07606e07cdb627df50dee685696129b3ee260 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 561d8020c68246c657b1b072d0b8edf1e6adb371..778b78ada673d6c66bd474e651dd186fd6f77376 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 d7b06ff987b09e40da4f8eaea18df36ecd3190be..e6abd217f67a318cb398c4a15dc6f7e230afbc2f 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 2cc0a86e1516b66cb9ee543a30271f818bc2e7b9..8dce007bf23265432d1a2184f8e7e700de355d02 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 b62290252e0b1148e071f4dc42d6e3272a9412f9..8a25aa6a6495e4623f2b1293f67afa5961956ab9 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 e167d49ac0bd263e6feaed2841f15e4db3ebc78f..412756216520f5113f5a1f71c9181360cebb7198 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 bf710ac4a42484808a829c3ccacd8a215b4e4878..ce940c2a238190f33ccc1c409909dc27188586f1 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 a84c41f078c18b82f9b5ad3b5aa989b48c7bd471..5368d0dcaef600f6fad9839d817c2b15dd61a011 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 2048000ad326de83daed64f01f35e5f163905be2..255097ff63691bdc6d98b5f3f83d3cd3ddeba081 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 d8031cfefc297d58b2611c7629fb2223d84568c1..2e84f2bcb60fc29353a64a0c4180b180468c2935 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 aa643f350403b2285e38d710bf3bf9a2b1989a72..075ec115c2b7adc4044e2bf05343e7ddc876cbdd 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 f6707548e35b190ed48e90f6b6d26527f36b6b9a..b786284ef7596ec96dd706da128f14e44cc863dc 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 c98ae70938cafcd87d014c33995974e2612d4290..714c6ee62f1f2d6aaf04dea7fcaaf757dab9ace4 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 4a53fc968dc8c6648572fdeaaa0ab3430a9ac219..654b26d1526c919dd139949d35b552c2eaba34d6 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 f86f26f4ded285cbc6c24755055ace4a1eadd8e2..daddf3c16433cf763b89ff273ca058b7feaab98b 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 0a86e6bb37e37c13ddb29c0a45c33bf6c259d453..9e98552b954a5a99919aef179238e9c3e6e99cc1 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 d160707331f9c22eb085550666be60d71926c0a4..c052ddf9a020ed73d597c606b5967454d1040716 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 701193a4d9f3d7b9c13cf22844b955380c97abbe..ffb0703be6559ae3837db6815ebaf6e9afdb933b 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 6792b4cc9e9d3f1fe184312d460b20301647f568..64d3407a8749263f6b09deec1101a8ec990d0bfb 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 c63af75bea5ec2eba6291b8325a931889d3ebdad..0000000000000000000000000000000000000000
--- 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 b35f91684674ab60d459358760efc27a96c4365c..e11981ae1848632a70c52bbff62a4918520803d7 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 e65190a65efbd2c2a614be892fb7e82adcaf4407..c9e3e71143f87fbb915ff6f3f874c42c266a233c 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 5b8e36a2047a075b2e62837bf748dbf4791d1683..927ce93f4073267e9f2a9e3a6decc35fcda41282 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 4ea75639e9caeb8c2c3a23fc3a2829491d939d29..9e6133e4d13f05c56341623c818664888a9d6f4b 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 75cd2b7b020a6a578e5ca544c567e6601a57340f..ee657cb0b79f616573ee3c668d69bc0e518c9f30 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 5bfd2f9b896f94ab42ed0cbbb9fa75342c8c00a8..3e35b4ef1a3fc0fdc55f475c6ab3c7498493a04d 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 3f1835b689348d93c3cb1b3fbf6fbcafe910c761..d13a55a6d16e68606c69c4c04f212953572651f6 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 d5178c08d8fd1cef700043178c4be516345ae81c..d871c0927aa898232373271d18b4d57915c39f57 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 139e356c404bb284dc6ee9646010033bf287aa70..b3f676a96e81885b53b7797f1263507fa5416441 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 06b1a036d3a6bc819a99d2c56600ca1ef114d7a7..f1300a16c095cd28bfa0a77fe3132d96a4d4a5e5 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 76557e2c0346a38cfd1fb4147e14b9cd7d10b104..177d4adfe14c926a9883245eebae458c9bad73fb 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 748b7af8f3e39b5bd3b65a696aea83cf8f7a6753..78256d909f14f1696770746f729bf3fec00be10b 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 5a54053636e6bbeb64667845e781126b71c0c759..55852f19d0fcec63bea51f5d29f69286a1f33089 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 6c8ab6bcc80a95c26d66c266f1547c6a40eb56d6..9bb2aaf233436c894484424a6f618f0b259e1f25 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 a3357ea6784be7623a981443eef48f06e4ece0f2..0da82c679f399ff48f30a27fad09d5e3f2782199 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 8a8bbf29b561d5500cad58918bf3f5bdbbb58902..c720d5bb6e359f917011f99cb5f6829895c6e4c6 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 d3bdd037f4985be8786cc229f8117744d67e7288..f1ce6a8c5e7bd1c07b79978819cd434ced64dcc5 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 da5e1b8ff218650aaa87b7e74b76df94ceeaf5cc..47e9dce26264017656de3f431ab010f626cfa9e7 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 16c35eb6696054095afc56adc62c93e317a4289f..23cddd5774882eed6e2d9e2e784771efa578bd61 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 e551519bf541cb61d4a8ab7215f0e9fcb808d40a..eae7de645c172de07e75c811f23863fec8164906 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 272c79896a49af0861773baa0e0244beecdb1fc5..7405f33ceda4add6941fc1d299ce317e66ce3470 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 8ff67e6ba539b1bf758a40248aa3a6afe2b0b943..b412c34a44895a829600d56bd286f9f0eb60fefb 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 70fd20ef2754ecc0ba5ad327de48470c77503f11..704f02b8e0dbcf6d44a505ba5d87320ecdf46ae9 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 71426c536e45a82f4671113548cade25964f5a3c..f73f22f87cacaaa208002bcba1d626f20a35f46d 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 d177061f4473f53fe48d5f293c16fff30fd2d280..e7cdc22c72e345c7a9989966f39c3751f11fbea1 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 73aee6c00d8ee731f892d15d43770d7a24991ed8..f4dfb311c37cfda5578adaad528d77996a1cd085 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 06e18813a88d99421af90c577cd8e90cd669073c..9a1c8df02b2537b8437226367d502066258269d1 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 8610edb9ad736b070f86885526ed18f0604d220f..d10e41da64fe2e422ea9b3a767ea30f198d404bc 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 9a07e71b6390229c9bcd11ea9c131d8484bc2f59..19c858bc66503590f71b9b92cf77030b432d12f4 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 e476536b4972a3c12b910fccd23ed7f62bfb0421..584dd67a680539af203bf5b9fb600d97a620cbb0 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 5e71995a85e25d93277ff8b44bc31b3425f51494..e623dfe4d4867327c2a796f06d72b94bb3d029ad 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 b8504aa706cdcb90ccfa870411daf19639d298c1..74d0cbba4d8d93dd5536373bb354225b2a0f0f27 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 d787f0f87ab10fab63b2e1b38e30c566121578c4..90c48a35dac9dd9a668869b9e9ed6b7d735e699b 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 7a39bbb71ebbb419d51b357898ae570d3e1624a9..3192ae8c74d7a39002c78a66261ebc5a0577af7f 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 75ed3cf5dbede0a9618099432c8ba4b1ba698acb..338d13f6ed7c2c728535c90154b7091fb3d972ac 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 6b6d881a475564c4c46cb1b3c40d3cc066ca9588..dc6ae18729ad0eff8cc08c02014a03073245811f 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 700aecb5d266af9e084287eff8fbd66175bc5049..99104e6589dd5a5e3abaa5159bb35f70431e71f7 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 230e6f90eff29ae1d736bbcbb6262ff781b9a8a5..f9584017073f82571905afd387ab6ae102ff97bd 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 2bc1f64607d47c166ab5c83d0da0862dd7053acf..444b03735cc6f716b5248cdb305d1e70356dc744 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 6253a5ccd5d72ad2e6b8285074eea164d6ca0d3d..19ab95cb71588e0725544d2a18e1db023455987f 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 3f49551416a5157ce23a376a804ce02e7c0ab34b..f151263886e5c0b2ae6cb2c206faafd190932124 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 9149ff48d098c844b9281d651015a8e5f0aceddd..0615a27c44c6690a7b0da3ec729e8bcaeb9c49c7 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 135d68c8434d11f88c039670283abf371c56d40b..fee5fae4054652398245d4e02d550dd615c5207b 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 75c3679b9c50ffdc272c901ab8201aa178d0923b..4dd96a015ffc470b5d7505eedca889a597408594 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 01aed1c2f334b61f1bdccf7c06a1ca81514928b3..ec9c8ed8485569a643ec56ffcf0f1680d5e622d2 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 4732a2f69895376ec239a90957c36eb950643f7d..97decd124a48b76dc4f16f5aeec1d663351079f5 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 8c3385e1fa77235043a1e3834d89ff02ee0c2d4e..2018cfe89d14160993f64c8ba929b0cfaf42a835 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 0960911e61d9e891e68b6ec0cd13485e195df7b4..92053cea0548bc900cec68e17df1d58195d906c1 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 f8e8fed5012c5b054c337e5be46ad1ea2b873254..fbce4cee647161db39c4fb253aafe314950fd948 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 7306c22ead912f313ed0e9981c1cf66208412fd8..b6d49e253f2eef31bf43a8997c3d17dad7961b28 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 c18c3e175b34403e9863d9df17632dc0677942e5..a83ed32a42ca2516f2e6ede18ae322e574ace844 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 689dfb025c5d0e83a1de18b3d0f549bf30b00c7e..24009e287ce6b0cd4cccea6c3a4745b980f8930b 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 ef3ebff54b6f3b1e75c67ade7af37ad68bc7b91a..326945c96e293db970a4a16e1dc1cc1780986656 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 28abfb02836537154edfc4cae16917a580311987..fe430787e957e7098283a5c97bddf929df8f1f85 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 6aa03439582dc20c6d34956da879ef89383c68b5..ffcd1aaeb333c1640b0f19fad4b2b8fbfae86497 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 ad193b4bd3d4514bb6ff610426da5d60c48012a9..00e482ef6e5cd16e3681a5f88f446b2d3e8281aa 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 d3bc02cfc06627a571650c8c3944418ac4989b43..795bc79dd87300be156776bcd099691f258da525 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 8a59dff68acd362e56d2e14aed640426395ff42c..628ccfc6414f433765d7e26b114207dbc002c97c 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 f26e1776661809f1d0811bcd5ed9d199ae1a0aa9..5539950b870e11d89bdc6ebffbf25f1fedf14241 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 e07a972c0fe49eb6f104502af7cfe10885a873ba..644998649cb3dc2ad1de790b9ac75fef38429235 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"