84 lines
1.8 KiB
TypeScript
84 lines
1.8 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import { useRouter } from 'next/router';
|
|
import React, { useEffect, useState } from 'react';
|
|
import debounce from 'lodash/debounce';
|
|
import { Market, MarketVariables } from './__generated__/Market';
|
|
import { PageQueryContainer } from '../../components/page-query-container';
|
|
import { TradeGrid, TradePanels } from './trade-grid';
|
|
|
|
// Top level page query
|
|
const MARKET_QUERY = gql`
|
|
query Market($marketId: ID!) {
|
|
market(id: $marketId) {
|
|
id
|
|
name
|
|
trades {
|
|
id
|
|
price
|
|
size
|
|
createdAt
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const MarketPage = () => {
|
|
const { query } = useRouter();
|
|
const { w } = useWindowSize();
|
|
|
|
return (
|
|
<PageQueryContainer<Market, MarketVariables>
|
|
query={MARKET_QUERY}
|
|
options={{
|
|
variables: { marketId: query.marketId as string },
|
|
skip: !query.marketId,
|
|
}}
|
|
>
|
|
{(data) =>
|
|
w > 1050 ? (
|
|
<TradeGrid market={data.market} />
|
|
) : (
|
|
<TradePanels market={data.market} />
|
|
)
|
|
}
|
|
{}
|
|
</PageQueryContainer>
|
|
);
|
|
};
|
|
|
|
export default MarketPage;
|
|
|
|
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;
|
|
};
|