From 3acf0e28622aee28a7105af3f7f206772c02db9b Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 30 Apr 2024 09:19:44 +0000
Subject: [PATCH] chore(ui): avoid useless dispatch
---
src/components/Content/Content.tsx | 8 ++++----
src/components/Header/CozyBar.tsx | 3 +--
src/components/Header/Header.tsx | 12 ++++++++----
src/enums/screen.enum.ts | 6 +++---
4 files changed, 16 insertions(+), 13 deletions(-)
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index f30e26160..32fa1dbc0 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -21,11 +21,11 @@ const Content = ({ children }: { children: React.ReactNode }) => {
useEffect(() => {
function handleResize() {
- if (innerWidth <= 768) {
+ if (innerWidth <= 768 && screenType !== ScreenType.MOBILE) {
dispatch(changeScreenType(ScreenType.MOBILE))
- } else if (innerWidth <= 1024) {
+ } else if (innerWidth <= 1024 && screenType !== ScreenType.TABLET) {
dispatch(changeScreenType(ScreenType.TABLET))
- } else {
+ } else if (innerWidth > 1024 && screenType !== ScreenType.DESKTOP) {
dispatch(changeScreenType(ScreenType.DESKTOP))
}
}
@@ -34,7 +34,7 @@ const Content = ({ children }: { children: React.ReactNode }) => {
return () => {
window.removeEventListener('resize', handleResize)
}
- }, [dispatch])
+ }, [dispatch, screenType])
return (
<>
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 b200f36a7..7b838bdb4 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -31,7 +31,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(() => {
@@ -47,10 +49,12 @@ 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) return
+ dispatch(setHeaderHeight(targetHeight))
+ }, [screenType, children, dispatch, headerHeight])
return (
<header ref={header}>
diff --git a/src/enums/screen.enum.ts b/src/enums/screen.enum.ts
index cf2faa302..c48678c42 100644
--- a/src/enums/screen.enum.ts
+++ b/src/enums/screen.enum.ts
@@ -1,5 +1,5 @@
export enum ScreenType {
- MOBILE = 0,
- TABLET = 1,
- DESKTOP = 2,
+ MOBILE = 'MOBILE',
+ TABLET = 'TABLET',
+ DESKTOP = 'DESKTOP',
}
--
GitLab