use already installed lodash.debounce, destructuring

apps/trading/pages/markets/[marketId].page.tsx

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import debounce from 'lodash/debounce';
+import debounce from 'lodash.debounce';
 import { Market, MarketVariables } from './__generated__/Market';
 import { PageQueryContainer } from '../../components/page-query-container';
 import { TradeGrid, TradePanels } from './trade-grid';
@@ -23,25 +23,30 @@ const MARKET_QUERY = gql`
 `;
 
 const MarketPage = () => {
-  const { query } = useRouter();
+  const {
+    query: { marketId },
+  } = useRouter();
   const { w } = useWindowSize();
 
   return (
     <PageQueryContainer<Market, MarketVariables>
       query={MARKET_QUERY}
       options={{
-        variables: { marketId: query.marketId as string },
+        // Not sure exactly why marketId is string | string[] but just the first item in the array if
-        skip: !query.marketId,
+        // it is one
+        variables: {
+          marketId: Array.isArray(marketId) ? marketId[0] : marketId,
+        },
+        skip: !marketId,
       }}
     >
-      {(data) =>
+      {({ market }) =>
         w > 1050 ? (
-          <TradeGrid market={data.market} />
+          <TradeGrid market={market} />
         ) : (
-          <TradePanels market={data.market} />
+          <TradePanels market={market} />
         )
       }
-      {}
     </PageQueryContainer>
   );
 };
@@ -65,10 +70,10 @@ const useWindowSize = () => {
   });
 
   useEffect(() => {
-    const handleResize = debounce((event) => {
+    const handleResize = debounce(({ target }) => {
       setWindowSize({
-        w: event.target.innerWidth,
+        w: target.innerWidth,
-        h: event.target.innerHeight,
+        h: target.innerHeight,
       });
     }, 300);
 

package.json

@@ -23,7 +23,6 @@
     "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",