➖ Remove ReachUI window-size dependency #1378

web/pageComponents/shared/siteMenu/SiteMenu.tsx

@@ -2,6 +2,7 @@ import { useEffect, useCallback, useState } from 'react'
 import styled from 'styled-components'
 import { useRouter } from 'next/router'
 import { useWindowSize } from '@reach/window-size'
+import useWindowDimensions from './hooks/useWindowDimensions'
 import { RemoveScroll } from 'react-remove-scroll'
 import FocusLock from 'react-focus-lock'
 import NextLink from 'next/link'
@@ -12,6 +13,7 @@ import { MenuContainer } from './MenuContainer'
 import { NavTopbar } from './NavTopbar'
 import { useCompare } from './hooks/useCompare'
 import { getAllSitesLink } from '../../../common/helpers/getAllSitesLink'
+import { Flags } from '../../../common/helpers/datasetHelpers'
 
 import { LogoLink } from '../LogoLink'
 
@@ -48,9 +50,10 @@ export type MenuProps = {
 const SiteMenu = ({ data, ...rest }: MenuProps) => {
   const router = useRouter()
   const { width } = useWindowSize()
+  const { width: newWidth } = useWindowDimensions()
   const [isOpen, setIsOpen] = useState(false)
   const [indices, setIndices] = useState<number[]>([])
-  const hasWidthChanged = useCompare(width)
+  const hasWidthChanged = useCompare(newWidth)
   const DESKTOP_MIN_WIDTH = 1300
   const intl = useIntl()
 
@@ -70,17 +73,18 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => {
   device and then resize their window size to above the breakpoint for the desktop
   version where only one items is allowed */
     if (hasWidthChanged) {
-      if (width >= DESKTOP_MIN_WIDTH && indices.length > 1) setIndices([])
+      if (Flags.IS_DEV && newWidth && newWidth >= DESKTOP_MIN_WIDTH && indices.length > 1) setIndices([])
+      if (!Flags.IS_DEV && width >= DESKTOP_MIN_WIDTH && indices.length > 1) setIndices([])
     }
-  }, [width, indices.length, hasWidthChanged])
+  }, [newWidth, width, indices.length, hasWidthChanged])
 
   function onMenuButtonClick() {
     setIsOpen(!isOpen)
   }
 
   function toggleItem(toggledIndex: number) {
     // @TODO Mobile or desktop first
-    if (width && width >= DESKTOP_MIN_WIDTH) {
+    if (newWidth || width >= DESKTOP_MIN_WIDTH) {
       // This menu item is  open, so let's close the menu by removing it from the list
       if (indices[0] === toggledIndex) {
         return setIndices([])

web/pageComponents/shared/siteMenu/hooks/useCompare.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react'
 
-export function useCompare(value: number) {
+export function useCompare(value?: number) {
   const prevVal = usePreviousValue(value)
   return prevVal !== value
 }
 
 // Helper hook
-function usePreviousValue(value: number) {
+function usePreviousValue(value?: number) {
   const ref = useRef<number>()
   useEffect(() => {
     ref.current = value

web/pageComponents/shared/siteMenu/hooks/useWindowDimensions.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+
+type WindowDimentions = {
+  width: number | undefined
+  height: number | undefined
+}
+
+const useWindowDimensions = (): WindowDimentions => {
+  const [windowDimensions, setWindowDimensions] = useState<WindowDimentions>({
+    width: undefined,
+    height: undefined,
+  })
+  useEffect(() => {
+    function handleResize(): void {
+      setWindowDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return (): void => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return windowDimensions
+}
+
+export default useWindowDimensions