LaconicNetwork/vega-frontend-monorepo
4
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)}</>;

16
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,18 +14,12 @@ 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}>
{(data) => (
<>
<h1>Markets</h1> <h1>Markets</h1>
{error ? (
<div>Could not load markets {error.message}</div>
) : (
<ul> <ul>
{data.markets.map((m) => ( {data.markets.map((m) => (
<li key={m.id}> <li key={m.id}>
@ -37,8 +32,9 @@ const Markets = () => {
</li> </li>
))} ))}
</ul> </ul>
</>
)} )}
</div> </PageQueryContainer>
); );
}; };