From b1319c11435043652cb29106f7aa9ab78a15ea85 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 26 Jul 2023 12:28:57 +0000
Subject: [PATCH] chore(redux-rtk): typed hooks
---
src/components/Challenge/ChallengeCardDone.spec.tsx | 8 ++++----
src/components/Challenge/ChallengeCardDone.tsx | 12 ++++--------
.../EcogestureForm/EcogestureFormView.spec.tsx | 7 ++-----
.../EcogestureForm/EcogestureFormView.tsx | 10 ++++------
src/components/Splash/SplashRoot.tsx | 13 +++----------
5 files changed, 17 insertions(+), 33 deletions(-)
diff --git a/src/components/Challenge/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone.spec.tsx
index 433705ca2..7ef52440f 100644
--- a/src/components/Challenge/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone.spec.tsx
@@ -3,9 +3,9 @@ import ChallengeCardDone from 'components/Challenge/ChallengeCardDone'
import { mount } from 'enzyme'
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 * as storeHooks from 'store/hooks'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
@@ -40,7 +40,7 @@ jest.mock('services/challenge.service', () => {
const mockStore = configureStore([])
const mockDispatch = jest.fn()
-const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
+const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
describe('ChallengeCardDone component', () => {
const storeNoCurrentChallenge = mockStore({
@@ -64,7 +64,7 @@ describe('ChallengeCardDone component', () => {
mockDispatch.mockClear()
})
it('should reset challenge if no other challenge is on going', async () => {
- useDispatchSpy.mockImplementationOnce(() => mockDispatch)
+ mockAppDispatch.mockImplementationOnce(() => mockDispatch)
const wrapper = mount(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
@@ -79,7 +79,7 @@ describe('ChallengeCardDone component', () => {
expect(mockUpdateUserChallenge).toBeCalledTimes(1)
})
it('should not reset challenge if another challenge is on going', async () => {
- useDispatchSpy.mockImplementationOnce(() => mockDispatch)
+ mockAppDispatch.mockImplementationOnce(() => mockDispatch)
const store = mockStore({
ecolyo: {
challenge: { currentChallenge: userChallengeData[1] },
diff --git a/src/components/Challenge/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone.tsx
index 217f24cd8..767955f1b 100644
--- a/src/components/Challenge/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone.tsx
@@ -9,12 +9,11 @@ import {
UserChallengeUpdateFlag,
} from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'
-import React, { Dispatch, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
-import { AppActionsTypes, AppStore } from 'store'
import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
import {
formatNumberValues,
getChallengeTitleWithLineReturn,
@@ -30,13 +29,10 @@ const ChallengeCardDone = ({
const { t } = useI18n()
const navigate = useNavigate()
const client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
-
+ const dispatch = useAppDispatch()
+ const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
const [winIcon, setWinIcon] = useState<string>(defaultIcon)
const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
const getUserSaving = (_userChallenge: UserChallenge) => {
let label
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index e8d5cf295..ad16c165e 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -3,7 +3,6 @@ import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import React from 'react'
-import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
import { mockProfileEcogesture } from '../../../tests/__mocks__/profileEcogesture.mock'
@@ -23,7 +22,6 @@ jest.mock(
'components/EcogestureForm/EcogestureLaunchFormModal',
() => 'mock-ecogesturelaunchmodal'
)
-const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
jest.mock('components/Content/Content', () => 'mock-content')
const mockedNavigate = jest.fn()
@@ -41,7 +39,6 @@ describe('EcogestureFormView component', () => {
const store = createMockEcolyoStore()
beforeEach(() => {
store.clearActions()
- mockUseDispatch.mockClear()
mockAppDispatch.mockClear()
})
@@ -107,7 +104,7 @@ describe('EcogestureFormView component', () => {
})
it('should handle form end', async () => {
- mockUseDispatch.mockReturnValue(jest.fn())
+ mockAppDispatch.mockReturnValue(jest.fn())
jest
.spyOn(React, 'useState')
.mockImplementationOnce(() => [0, () => null])
@@ -118,6 +115,6 @@ describe('EcogestureFormView component', () => {
</Provider>
)
await waitForComponentToPaint(wrapper)
- expect(mockUseDispatch).toHaveBeenCalledTimes(2)
+ expect(mockAppDispatch).toHaveBeenCalledTimes(2)
})
})
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index ba87afbd4..078ace45e 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -12,24 +12,22 @@ import {
ProfileEcogesture,
ProfileEcogestureAnswer,
} from 'models/profileEcogesture.model'
-import React, { Dispatch, useCallback, useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import React, { useCallback, useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import ProfileEcogestureFormService from 'services/profileEcogestureForm.service'
-import { useAppSelector } from 'store/hooks'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
import { updateProfile } from 'store/profile/profile.actions'
import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcogesture.actions'
-import { AppActionsTypes } from 'store/store'
import EcogestureFormEquipment from './EcogestureFormEquipment'
import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
const EcogestureFormView = () => {
+ const navigate = useNavigate()
+ const dispatch = useAppDispatch()
const {
profile: { isProfileTypeCompleted },
profileEcogesture,
} = useAppSelector(state => state.ecolyo)
- const dispatch: Dispatch<AppActionsTypes> = useDispatch()
- const navigate = useNavigate()
const [headerHeight, setHeaderHeight] = useState<number>(0)
const shouldOpenModal = new URLSearchParams(useLocation().search).get('modal')
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 6d535d224..13969416d 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -22,14 +22,7 @@ import {
ProfileType,
UserChallenge,
} from 'models'
-import React, {
- Dispatch,
- ReactNode,
- useCallback,
- useEffect,
- useState,
-} from 'react'
-import { useDispatch } from 'react-redux'
+import React, { ReactNode, useCallback, useEffect, useState } from 'react'
import ActionService from 'services/action.service'
import ChallengeService from 'services/challenge.service'
import CustomPopupService from 'services/customPopup.service'
@@ -54,11 +47,11 @@ import {
toggleChallengeExplorationNotification,
updateTermsStatus,
} from 'store/global/global.slice'
+import { useAppDispatch } from 'store/hooks'
import { openPartnersModal, setCustomPopup } from 'store/modal/modal.slice'
import { updateProfile } from 'store/profile/profile.actions'
import { updateProfileEcogestureSuccess } from 'store/profileEcogesture/profileEcogesture.actions'
import { setProfileType } from 'store/profileType/profileType.slice'
-import { AppActionsTypes } from 'store/store'
import { logDuration } from 'utils/duration'
import logApp from 'utils/logger'
import { getTodayDate } from 'utils/utils'
@@ -78,6 +71,7 @@ interface SplashRootProps {
const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
const client = useClient()
const today = getTodayDate().toISO()
+ const dispatch = useAppDispatch()
const [{ splashEnd, splashStart }, setState] = useState({
splashEnd: false,
splashStart: false,
@@ -87,7 +81,6 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
const [initStepErrors, setInitStepErrors] = useState<InitStepsErrors | null>(
null
)
- const dispatch: Dispatch<AppActionsTypes> = useDispatch()
/** Return current status of partner if modal has not been seen today */
const getPartnerStatus = useCallback(
--
GitLab