LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

use page query container for market list page, add styles to center loading and error message

Browse Source
This commit is contained in:
Matthew Russell 2022-03-01 17:08:32 -08:00
parent 72db4029ea
commit 5c0d21578f
2 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/trading/components/page-query-container/index.tsx
View File

@ -1,4 +1,5 @@
import { QueryHookOptions, useQuery } from '@apollo/client'; import { OperationVariables, QueryHookOptions, useQuery } from '@apollo/client';
import classNames from 'classnames';
import { DocumentNode } from 'graphql'; import { DocumentNode } from 'graphql';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
@ -8,19 +9,25 @@ interface PageQueryContainerProps<TData, TVariables> {
children: (data: TData) => ReactNode; children: (data: TData) => ReactNode;
} }
export const PageQueryContainer = <TData, TVariables>({ export const PageQueryContainer = <TData, TVariables = OperationVariables>({
query, query,
options, options,
children, children,
}: PageQueryContainerProps<TData, TVariables>) => { }: PageQueryContainerProps<TData, TVariables>) => {
const { data, loading, error } = useQuery<TData, TVariables>(query, options); const { data, loading, error } = useQuery<TData, TVariables>(query, options);
const splashClasses = classNames(
'w-full h-full',
'flex items-center justify-center'
);
if (loading || !data) { if (loading || !data) {
return <div>Loading...</div>; return <div className={splashClasses}>Loading...</div>;
} }
if (error) { if (error) {
return <div>Something went wrong: {error.message}</div>; return (
<div className={splashClasses}>Something went wrong: {error.message}</div>
);
} }
return <>{children(data)}</>; return <>{children(data)}</>;

42
apps/trading/pages/markets/index.page.tsx
View File

@ -1,4 +1,5 @@
import { gql, useQuery } from '@apollo/client'; import { gql, useQuery } from '@apollo/client';
import { PageQueryContainer } from '../../components/page-query-container';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Markets } from './__generated__/Markets'; import { Markets } from './__generated__/Markets';
@ -13,32 +14,27 @@ const MARKETS_QUERY = gql`
const Markets = () => { const Markets = () => {
const { pathname } = useRouter(); const { pathname } = useRouter();
const { data, loading, error } = useQuery<Markets>(MARKETS_QUERY);
if (loading || !data) {
return <div>Loading...</div>;
}
return ( return (
<div> <PageQueryContainer<Markets> query={MARKETS_QUERY}>
<h1>Markets</h1> {(data) => (
{error ? ( <>
<div>Could not load markets {error.message}</div> <h1>Markets</h1>
) : ( <ul>
<ul> {data.markets.map((m) => (
{data.markets.map((m) => ( <li key={m.id}>
<li key={m.id}> <Link
<Link href={`${pathname}/${m.id}?portfolio=orders&trade=orderbook`}
href={`${pathname}/${m.id}?portfolio=orders&trade=orderbook`} passHref={true}
passHref={true} >
> <a>View market: {m.id}</a>
<a>View market: {m.id}</a> </Link>
</Link> </li>
</li> ))}
))} </ul>
</ul> </>
)} )}
</div> </PageQueryContainer>
); );
}; };