From 92d8930a063f5fe4bad4672f7fc67bc402755781 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 21 Aug 2024 15:03:26 +0000
Subject: [PATCH] chore: avoid useless dispatch
---
src/components/Content/Content.tsx | 17 +++++++++++++----
src/components/Header/CozyBar.tsx | 3 +--
src/components/Header/Header.tsx | 13 +++++++++----
3 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index f30e26160..287f8f486 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,6 +1,6 @@
import FeedbackModal from 'components/Feedback/FeedbackModal'
import { ScreenType } from 'enums'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
import { changeScreenType } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './content.scss'
@@ -10,6 +10,7 @@ const Content = ({ children }: { children: React.ReactNode }) => {
const { screenType, headerHeight } = useAppSelector(
state => state.ecolyo.global
)
+ const currentScreenType = useRef(screenType)
const cozyBarHeight = 48
const cozyNavHeight = 56
@@ -21,16 +22,24 @@ const Content = ({ children }: { children: React.ReactNode }) => {
useEffect(() => {
function handleResize() {
+ let newScreenType: ScreenType
if (innerWidth <= 768) {
- dispatch(changeScreenType(ScreenType.MOBILE))
+ newScreenType = ScreenType.MOBILE
} else if (innerWidth <= 1024) {
- dispatch(changeScreenType(ScreenType.TABLET))
+ newScreenType = ScreenType.TABLET
} else {
- dispatch(changeScreenType(ScreenType.DESKTOP))
+ newScreenType = ScreenType.DESKTOP
+ }
+
+ if (currentScreenType.current !== newScreenType) {
+ currentScreenType.current = newScreenType
+ dispatch(changeScreenType(newScreenType))
}
}
+
handleResize()
window.addEventListener('resize', handleResize)
+
return () => {
window.removeEventListener('resize', handleResize)
}
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index d0cccb600..99bd3d50b 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -68,9 +68,8 @@ const CozyBar = ({
</BarRight>
</>
)
- } else {
- return null
}
+ return null
}
export default CozyBar
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 7d15e206c..b902e33e4 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -29,7 +29,9 @@ const Header = ({
const navigate = useNavigate()
const header = useRef<HTMLDivElement>(null)
const dispatch = useAppDispatch()
- const { screenType } = useAppSelector(state => state.ecolyo.global)
+ const { screenType, headerHeight } = useAppSelector(
+ state => state.ecolyo.global
+ )
const cozyBarHeight = 48
const handleClickBack = useCallback(() => {
@@ -45,10 +47,13 @@ const Header = ({
}
useEffect(() => {
- const headerHeight = header.current?.clientHeight || 0
+ const refHeight = header.current?.clientHeight || 0
const adjustment = screenType === ScreenType.MOBILE ? cozyBarHeight : 0
- dispatch(setHeaderHeight(headerHeight - adjustment))
- }, [screenType, children, dispatch])
+ const targetHeight = refHeight - adjustment
+ if (targetHeight !== headerHeight) {
+ dispatch(setHeaderHeight(targetHeight))
+ }
+ }, [screenType, children, dispatch, headerHeight])
return (
<header ref={header}>
--
GitLab