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
|
||||
svgr: false,
|
||||
},
|
||||
pageExtensions: ['page.tsx', 'page.jsx'],
|
||||
};
|
||||
|
||||
module.exports = withNx(nextConfig);
|
||||
|
||||
@ -13,10 +13,12 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
|
||||
<Head>
|
||||
<title>Welcome to trading!</title>
|
||||
</Head>
|
||||
<Navbar />
|
||||
<main className="px-8 py-12">
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
<div className="h-full grid grid-rows-[min-content,_1fr]">
|
||||
<Navbar />
|
||||
<main>
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
</div>
|
||||
</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 router = useRouter();
|
||||
const { pathname } = useRouter();
|
||||
const { data, loading, error } = useQuery<Markets>(MARKETS_QUERY);
|
||||
|
||||
if (loading || !data) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Markets</h1>
|
||||
@ -30,7 +28,7 @@ const Markets = () => {
|
||||
<ul>
|
||||
{data.markets.map((m) => (
|
||||
<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>
|
||||
</Link>
|
||||
</li>
|
||||
@ -1,3 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body,
|
||||
#__next {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import Index from '../pages/index';
|
||||
import Index from '../pages/index.page';
|
||||
|
||||
describe('Index', () => {
|
||||
it('should render successfully', () => {
|
||||
|
||||
@ -14,5 +14,5 @@
|
||||
"incremental": true
|
||||
},
|
||||
"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-syntax-highlighter": "^15.4.5",
|
||||
"react-use-websocket": "^3.0.0",
|
||||
"react-virtualized-auto-sizer": "^1.0.6",
|
||||
"regenerator-runtime": "0.13.7",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"tslib": "^2.0.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user