Merge branch 'fix/layout-dispatch' into 'dev'

chore(ui): avoid useless dispatch

See merge request !1169

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 (
     <>

src/components/Header/CozyBar.tsx

@@ -68,9 +68,8 @@ const CozyBar = ({
         </BarRight>
       </>
     )
-  } else {
-    return null
   }
+  return null
 }
 
 export default CozyBar

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}>

src/enums/screen.enum.ts

 export enum ScreenType {
-  MOBILE = 0,
-  TABLET = 1,
-  DESKTOP = 2,
+  MOBILE = 'MOBILE',
+  TABLET = 'TABLET',
+  DESKTOP = 'DESKTOP',
 }