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

make tabs use url query string

Browse Source
This commit is contained in:
Matthew Russell 2022-03-01 14:14:33 -08:00
parent e76f633493
commit 261f033d9a
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/trading/pages/markets/[marketId].page.tsx
View File

@ -2,7 +2,7 @@ import { gql, useQuery } from '@apollo/client';
import AutoSizer from 'react-virtualized-auto-sizer'; import AutoSizer from 'react-virtualized-auto-sizer';
import classNames from 'classnames'; import classNames from 'classnames';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { Children, isValidElement, ReactNode, useState } from 'react'; import React, { Children, isValidElement, ReactNode } from 'react';
import { Market, MarketVariables } from './__generated__/Market'; import { Market, MarketVariables } from './__generated__/Market';
// Top level page query // Top level page query
@ -47,18 +47,18 @@ const MarketPage = () => {
<GridChild>TODO: Chart</GridChild> <GridChild>TODO: Chart</GridChild>
<GridChild>TODO: Ticket</GridChild> <GridChild>TODO: Ticket</GridChild>
<GridChild> <GridChild>
<GridTabs> <GridTabs group="trade">
<GridTab name="Trades"> <GridTab name="trades">
<pre>{JSON.stringify(data, null, 2)}</pre> <pre>{JSON.stringify(data, null, 2)}</pre>
</GridTab> </GridTab>
<GridTab name="Orderbook">Orderbook TODO:</GridTab> <GridTab name="orderbook">Orderbook TODO:</GridTab>
</GridTabs> </GridTabs>
</GridChild> </GridChild>
<GridChild className="col-span-4"> <GridChild className="col-span-4">
<GridTabs> <GridTabs group="portfolio">
<GridTab name="Orders">TODO: Orders</GridTab> <GridTab name="orders">TODO: Orders</GridTab>
<GridTab name="Positions">TODO: Positions</GridTab> <GridTab name="positions">TODO: Positions</GridTab>
<GridTab name="Collateral">TODO: Collateral</GridTab> <GridTab name="collateral">TODO: Collateral</GridTab>
</GridTabs> </GridTabs>
</GridChild> </GridChild>
</div> </div>
@ -91,10 +91,11 @@ const GridChild = ({ children, className }: GridChildProps) => {
interface GridTabsProps { interface GridTabsProps {
children: ReactNode; children: ReactNode;
group: string;
} }
const GridTabs = ({ children }: GridTabsProps) => { const GridTabs = ({ children, group }: GridTabsProps) => {
const [activeTab, setActiveTab] = useState<string>(children[0].props.name); const { query, asPath, replace } = useRouter();
return ( return (
<div className="h-full grid grid-rows-[min-content_1fr]"> <div className="h-full grid grid-rows-[min-content_1fr]">
@ -103,12 +104,17 @@ const GridTabs = ({ children }: GridTabsProps) => {
{Children.map(children, (child) => { {Children.map(children, (child) => {
if (!isValidElement(child)) return null; if (!isValidElement(child)) return null;
const buttonClass = classNames('p-8', { const buttonClass = classNames('p-8', {
'text-vega-pink': child.props.name === activeTab, 'text-vega-pink': query[group] === child.props.name,
}); });
return ( return (
<button <button
onClick={() => setActiveTab(child.props.name)}
className={buttonClass} className={buttonClass}
onClick={() => {
const [url, queryString] = asPath.split('?');
const searchParams = new URLSearchParams(queryString);
searchParams.set(group, child.props.name);
replace(`${url}?${searchParams.toString()}`);
}}
> >
{child.props.name} {child.props.name}
</button> </button>
@ -118,7 +124,7 @@ const GridTabs = ({ children }: GridTabsProps) => {
{/* the content */} {/* the content */}
<div> <div>
{Children.map(children, (child) => { {Children.map(children, (child) => {
if (isValidElement(child) && child.props.name === activeTab) { if (isValidElement(child) && query[group] === child.props.name) {
return <div>{child.props.children}</div>; return <div>{child.props.children}</div>;
} }
return null; return null;

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

@ -28,7 +28,10 @@ const Markets = () => {
<ul> <ul>
{data.markets.map((m) => ( {data.markets.map((m) => (
<li key={m.id}> <li key={m.id}>
<Link href={`${pathname}/${m.id}`} passHref={true}> <Link
href={`${pathname}/${m.id}?portfolio=orders&trade='orderbook`}
passHref={true}
>
<a>View market: {m.id}</a> <a>View market: {m.id}</a>
</Link> </Link>
</li> </li>