add pages extends so generated query files are ignored by nextjs
This commit is contained in:
Matthew Russell
parent
63c1af9760
commit
d1bf044d3d
@ -10,6 +10,7 @@ const nextConfig = {
|
|||||||
// See: https://github.com/gregberge/svgr
|
// See: https://github.com/gregberge/svgr
|
||||||
svgr: false,
|
svgr: false,
|
||||||
},
|
},
|
||||||
|
pageExtensions: ['page.tsx', 'page.jsx'],
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = withNx(nextConfig);
|
module.exports = withNx(nextConfig);
|
||||||
|
|||||||
@ -13,10 +13,12 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
|
|||||||
<Head>
|
<Head>
|
||||||
<title>Welcome to trading!</title>
|
<title>Welcome to trading!</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
<div className="h-full grid grid-rows-[min-content,_1fr]">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<main className="px-8 py-12">
|
<main>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
89
apps/trading/pages/markets/[marketId].page.tsx
Normal file
89
apps/trading/pages/markets/[marketId].page.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import { gql, useQuery } from '@apollo/client';
|
||||||
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
import { Market, MarketVariables } from './__generated__/Market';
|
||||||
|
|
||||||
|
// 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 { data, loading, error } = useQuery<Market, MarketVariables>(
|
||||||
|
MARKET_QUERY,
|
||||||
|
{
|
||||||
|
variables: { marketId: query.marketId as string },
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (loading || !data) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{error ? (
|
||||||
|
<div>Something went wrong: {error.message}</div>
|
||||||
|
) : (
|
||||||
|
<div className="h-full max-h-full grid gap-[1px] bg-black grid-cols-[300px_2fr_1fr_1fr] grid-rows-[min-content_1fr_200px]">
|
||||||
|
<header className="bg-white col-span-4 p-8">
|
||||||
|
<h1>Market: {query.marketId}</h1>
|
||||||
|
</header>
|
||||||
|
<GridChild name="Ticket">Content</GridChild>
|
||||||
|
<GridChild name="Chart">Content</GridChild>
|
||||||
|
<GridChild name="Order book">Content</GridChild>
|
||||||
|
<GridChild name="Trades">
|
||||||
|
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||||
|
</GridChild>
|
||||||
|
<GridChild name="Portfolio" className="col-span-4">
|
||||||
|
Content
|
||||||
|
</GridChild>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MarketPage;
|
||||||
|
|
||||||
|
interface GridChildProps {
|
||||||
|
children: ReactNode;
|
||||||
|
name?: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GridChild = ({ children, className, name }: GridChildProps) => {
|
||||||
|
const gridChildClasses = classNames('bg-white', className);
|
||||||
|
return (
|
||||||
|
<section className={gridChildClasses}>
|
||||||
|
<div className="h-full grid grid-rows-[min-content_1fr]">
|
||||||
|
<div className="p-8 border-b-1">
|
||||||
|
<h2>{name}</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<AutoSizer>
|
||||||
|
{({ width, height }) => (
|
||||||
|
<div style={{ width, height }} className="overflow-auto">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AutoSizer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { useRouter } from 'next/router';
|
|
||||||
|
|
||||||
const MarketPage = () => {
|
|
||||||
const router = useRouter();
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>Market: {router.query.marketId}</h1>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MarketPage;
|
|
||||||
55
apps/trading/pages/markets/__generated__/Market.ts
generated
Normal file
55
apps/trading/pages/markets/__generated__/Market.ts
generated
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @generated
|
||||||
|
// This file was automatically generated and should not be edited.
|
||||||
|
|
||||||
|
// ====================================================
|
||||||
|
// GraphQL query operation: Market
|
||||||
|
// ====================================================
|
||||||
|
|
||||||
|
export interface Market_market_trades {
|
||||||
|
__typename: 'Trade';
|
||||||
|
/**
|
||||||
|
* The hash of the trade data
|
||||||
|
*/
|
||||||
|
id: string;
|
||||||
|
/**
|
||||||
|
* The price of the trade (probably initially the passive order price, other determination algorithms are possible though) (uint64)
|
||||||
|
*/
|
||||||
|
price: string;
|
||||||
|
/**
|
||||||
|
* The number of contracts trades, will always be <= the remaining size of both orders immediately before the trade (uint64)
|
||||||
|
*/
|
||||||
|
size: string;
|
||||||
|
/**
|
||||||
|
* RFC3339Nano time for when the trade occurred
|
||||||
|
*/
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Market_market {
|
||||||
|
__typename: 'Market';
|
||||||
|
/**
|
||||||
|
* Market ID
|
||||||
|
*/
|
||||||
|
id: string;
|
||||||
|
/**
|
||||||
|
* Market full name
|
||||||
|
*/
|
||||||
|
name: string;
|
||||||
|
/**
|
||||||
|
* Trades on a market
|
||||||
|
*/
|
||||||
|
trades: Market_market_trades[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Market {
|
||||||
|
/**
|
||||||
|
* An instrument that is trading on the VEGA network
|
||||||
|
*/
|
||||||
|
market: Market_market | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MarketVariables {
|
||||||
|
marketId: string;
|
||||||
|
}
|
||||||
@ -12,15 +12,13 @@ const MARKETS_QUERY = gql`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const Markets = () => {
|
const Markets = () => {
|
||||||
const router = useRouter();
|
const { pathname } = useRouter();
|
||||||
const { data, loading, error } = useQuery<Markets>(MARKETS_QUERY);
|
const { data, loading, error } = useQuery<Markets>(MARKETS_QUERY);
|
||||||
|
|
||||||
if (loading || !data) {
|
if (loading || !data) {
|
||||||
return <div>Loading...</div>;
|
return <div>Loading...</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1>Markets</h1>
|
<h1>Markets</h1>
|
||||||
@ -30,7 +28,7 @@ const Markets = () => {
|
|||||||
<ul>
|
<ul>
|
||||||
{data.markets.map((m) => (
|
{data.markets.map((m) => (
|
||||||
<li key={m.id}>
|
<li key={m.id}>
|
||||||
<Link href={`${router.pathname}/${m.id}`} passHref={true}>
|
<Link href={`${pathname}/${m.id}`} passHref={true}>
|
||||||
<a>View market: {m.id}</a>
|
<a>View market: {m.id}</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
@ -1,3 +1,9 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#__next {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from '@testing-library/react';
|
import { render } from '@testing-library/react';
|
||||||
|
|
||||||
import Index from '../pages/index';
|
import Index from '../pages/index.page';
|
||||||
|
|
||||||
describe('Index', () => {
|
describe('Index', () => {
|
||||||
it('should render successfully', () => {
|
it('should render successfully', () => {
|
||||||
|
|||||||
@ -14,5 +14,5 @@
|
|||||||
"incremental": true
|
"incremental": true
|
||||||
},
|
},
|
||||||
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
|
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules", "__generated__"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,6 +29,7 @@
|
|||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-syntax-highlighter": "^15.4.5",
|
"react-syntax-highlighter": "^15.4.5",
|
||||||
"react-use-websocket": "^3.0.0",
|
"react-use-websocket": "^3.0.0",
|
||||||
|
"react-virtualized-auto-sizer": "^1.0.6",
|
||||||
"regenerator-runtime": "0.13.7",
|
"regenerator-runtime": "0.13.7",
|
||||||
"tailwindcss": "^3.0.23",
|
"tailwindcss": "^3.0.23",
|
||||||
"tslib": "^2.0.0",
|
"tslib": "^2.0.0",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user