From b15911d6e188f5e436ddd8828743137361f4f17b Mon Sep 17 00:00:00 2001
From: Andrei Grigore <andrei.ggr@gmail.com>
Date: Fri, 5 Nov 2021 14:09:30 +0200
Subject: [PATCH] Use screen width from store rather than hook

---
 .../theme/Header/HeaderNavigation.jsx         | 15 +++++-----
 src/helpers/useWindowSize.jsx                 | 28 -------------------
 2 files changed, 8 insertions(+), 35 deletions(-)
 delete mode 100644 src/helpers/useWindowSize.jsx

diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx
index 4c052f8..1748614 100644
--- a/src/components/theme/Header/HeaderNavigation.jsx
+++ b/src/components/theme/Header/HeaderNavigation.jsx
@@ -7,6 +7,7 @@ import useWindowSize from '../../../helpers/useWindowSize';
 import downIcon from '@plone/volto/icons/down-key.svg';
 import closeIcon from '@plone/volto/icons/clear.svg';
 import { Icon } from '@plone/volto/components';
+import { connect } from 'react-redux';
 
 const MobileNav = ({ items, activeItem }) => {
   const [expanded, setExpanded] = React.useState(false);
@@ -61,28 +62,26 @@ const MobileNav = ({ items, activeItem }) => {
   );
 };
 
-const HeaderNavigation = ({ items }) => {
+const HeaderNavigation = ({ items, pageWidth }) => {
   const [activeItem, setActiveItem] = React.useState('');
   const [isMobile, setIsMobile] = React.useState(false);
   const history = useHistory();
-  const size = useWindowSize();
 
   React.useEffect(() => {
-    const { width } = size;
     const activeRouteDetected = items.filter(
       (item) => item.url === history.location.pathname,
     );
     if (activeRouteDetected && activeRouteDetected.length > 0) {
       setActiveItem(activeRouteDetected[0]);
     }
-    if (width && width <= 768) {
+    if (pageWidth && pageWidth <= 768) {
       setIsMobile(true);
     }
-    if (width && width > 768) {
+    if (pageWidth && pageWidth > 768) {
       setIsMobile(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items, size]);
+  }, [items, pageWidth]);
 
   return (
     <React.Fragment>
@@ -108,4 +107,6 @@ const HeaderNavigation = ({ items }) => {
   );
 };
 
-export default HeaderNavigation;
+export default connect((state) => ({
+  pageWidth: state.screen.page.width,
+}))(HeaderNavigation);
diff --git a/src/helpers/useWindowSize.jsx b/src/helpers/useWindowSize.jsx
deleted file mode 100644
index a908882..0000000
--- a/src/helpers/useWindowSize.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export default function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: undefined,
-    height: undefined,
-  });
-  useEffect(() => {
-    function handleResize() {
-      if (typeof window !== 'undefined') {
-        setWindowSize({
-          width: window.innerWidth,
-          height: window.innerHeight,
-        });
-      }
-    }
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-    return () => {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', handleResize);
-      }
-    };
-  }, []);
-  return windowSize;
-}