From 373f7f75e04698bd8b921b5107e59c77cb4267ed Mon Sep 17 00:00:00 2001
From: Asad Umar <au@visuary.fr>
Date: Sat, 5 Feb 2022 20:34:51 +0500
Subject: [PATCH] useHasWindowWidthChangedEnough

---
 ui/effects/use-screensize.js | 49 +++++++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/ui/effects/use-screensize.js b/ui/effects/use-screensize.js
index 3ed5fa509..060ca57e8 100644
--- a/ui/effects/use-screensize.js
+++ b/ui/effects/use-screensize.js
@@ -1,21 +1,15 @@
+// @flow
 // Widths are taken from "ui/scss/init/vars.scss"
 import React, { useRef } from 'react';
+const DEFAULT_SCREEN_SIZE = 1080;
 
-export function useWindowSize(fn) {
+export function useWindowSize() {
   const isWindowClient = typeof window === 'object';
-  const initialState = fn ? fn(window.innerWidth) : window.innerWidth;
-  const [windowSize, setWindowSize] = React.useState(isWindowClient ? initialState : undefined);
-  const prev = useRef();
+  const [windowSize, setWindowSize] = React.useState(isWindowClient ? window.innerWidth : DEFAULT_SCREEN_SIZE);
 
   React.useEffect(() => {
     function setSize() {
-      if (fn) {
-        const curr = fn(window.innerWidth);
-        if (prev !== curr) {
-          setWindowSize(curr);
-          prev.current = curr;
-        }
-      } else setWindowSize(window.innerWidth);
+      setWindowSize(window.innerWidth);
     }
 
     if (isWindowClient) {
@@ -23,19 +17,44 @@ export function useWindowSize(fn) {
 
       return () => window.removeEventListener('resize', setSize);
     }
-  }, [fn, isWindowClient, setWindowSize, windowSize]);
+  }, [isWindowClient]);
+
+  return windowSize;
+}
+
+function useHasWindowWidthChangedEnough(comparisonFn: (windowSize: number) => boolean) {
+  const isWindowClient = typeof window === 'object';
+  const initialState = isWindowClient ? comparisonFn(window.innerWidth) : comparisonFn(DEFAULT_SCREEN_SIZE);
+  const [windowSize, setWindowSize] = React.useState(initialState);
+  const prev = useRef(window.innerWidth);
+
+  React.useEffect(() => {
+    function setSize() {
+      const curr = comparisonFn(window.innerWidth);
+      if (prev !== curr) {
+        setWindowSize(curr);
+        prev.current = curr;
+      }
+    }
+
+    if (isWindowClient) {
+      window.addEventListener('resize', setSize);
+
+      return () => window.removeEventListener('resize', setSize);
+    }
+  }, [isWindowClient]);
 
   return windowSize;
 }
 
 export function useIsMobile() {
-  return useWindowSize((windowSize) => windowSize < 901);
+  return useHasWindowWidthChangedEnough((windowSize) => windowSize < 901);
 }
 
 export function useIsMediumScreen() {
-  return useWindowSize((windowSize) => windowSize < 1151);
+  return useHasWindowWidthChangedEnough((windowSize) => windowSize < 1151);
 }
 
 export function useIsLargeScreen() {
-  return useWindowSize((windowSize) => windowSize > 1600);
+  return useHasWindowWidthChangedEnough((windowSize) => windowSize > 1600);
 }