From 62187b38dd2a6470789e7d98a122e660b09f4d3c Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 1 Mar 2022 16:05:31 -0800
Subject: [PATCH] add hook to get window size

---
 .../trading/pages/markets/[marketId].page.tsx | 46 ++++++++++++++++++-
 package.json                                  |  1 +
 yarn.lock                                     |  5 ++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx
index 7a0951ff4..2be3c044f 100644
--- a/apps/trading/pages/markets/[marketId].page.tsx
+++ b/apps/trading/pages/markets/[marketId].page.tsx
@@ -2,7 +2,14 @@ import { gql, useQuery } from '@apollo/client';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import React, { Children, isValidElement, ReactNode, useEffect } from 'react';
+import React, {
+  Children,
+  isValidElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+import debounce from 'lodash/debounce';
 import { Market, MarketVariables, Market_market } from './__generated__/Market';
 
 // Top level page query
@@ -23,6 +30,7 @@ const MARKET_QUERY = gql`
 
 const MarketPage = () => {
   const { query } = useRouter();
+  const { w } = useWindowSize();
   const { data, loading, error } = useQuery<Market, MarketVariables>(
     MARKET_QUERY,
     {
@@ -41,7 +49,7 @@ const MarketPage = () => {
 
   return (
     <>
-      {typeof window !== 'undefined' && window.innerWidth > 1040 ? (
+      {w > 1050 ? (
         <TradeGrid market={data.market} />
       ) : (
         <TradePanels market={data.market} />
@@ -246,3 +254,37 @@ const Views = {
   positions: Positions,
   collateral: Collateral,
 };
+
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return {
+        w: window.innerWidth,
+        h: window.innerHeight,
+      };
+    }
+
+    // Something sensible for server rendered page
+    return {
+      w: 1200,
+      h: 900,
+    };
+  });
+
+  useEffect(() => {
+    const handleResize = debounce((event) => {
+      setWindowSize({
+        w: event.target.innerWidth,
+        h: event.target.innerHeight,
+      });
+    }, 300);
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return windowSize;
+};
diff --git a/package.json b/package.json
index fdac3c733..b432a19fd 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "core-js": "^3.6.5",
     "env-cmd": "^10.1.0",
     "graphql": "^15.7.2",
+    "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "next": "12.0.7",
     "postcss": "^8.4.6",
diff --git a/yarn.lock b/yarn.lock
index bcd918792..31420703c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13111,6 +13111,11 @@ lodash@4.x, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15,
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"