From 261f033d9afbc7c677a3d42c441ea02d1526ebe9 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Tue, 1 Mar 2022 14:14:33 -0800 Subject: [PATCH] make tabs use url query string --- .../trading/pages/markets/[marketId].page.tsx | 32 +++++++++++-------- apps/trading/pages/markets/index.page.tsx | 5 ++- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx index 03d8f5bac..6d1c13e37 100644 --- a/apps/trading/pages/markets/[marketId].page.tsx +++ b/apps/trading/pages/markets/[marketId].page.tsx @@ -2,7 +2,7 @@ import { gql, useQuery } from '@apollo/client'; import AutoSizer from 'react-virtualized-auto-sizer'; import classNames from 'classnames'; 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'; // Top level page query @@ -47,18 +47,18 @@ const MarketPage = () => { TODO: Chart TODO: Ticket - - + +
{JSON.stringify(data, null, 2)}
- Orderbook TODO: + Orderbook TODO:
- - TODO: Orders - TODO: Positions - TODO: Collateral + + TODO: Orders + TODO: Positions + TODO: Collateral @@ -91,10 +91,11 @@ const GridChild = ({ children, className }: GridChildProps) => { interface GridTabsProps { children: ReactNode; + group: string; } -const GridTabs = ({ children }: GridTabsProps) => { - const [activeTab, setActiveTab] = useState(children[0].props.name); +const GridTabs = ({ children, group }: GridTabsProps) => { + const { query, asPath, replace } = useRouter(); return (
@@ -103,12 +104,17 @@ const GridTabs = ({ children }: GridTabsProps) => { {Children.map(children, (child) => { if (!isValidElement(child)) return null; const buttonClass = classNames('p-8', { - 'text-vega-pink': child.props.name === activeTab, + 'text-vega-pink': query[group] === child.props.name, }); return ( @@ -118,7 +124,7 @@ const GridTabs = ({ children }: GridTabsProps) => { {/* the content */}
{Children.map(children, (child) => { - if (isValidElement(child) && child.props.name === activeTab) { + if (isValidElement(child) && query[group] === child.props.name) { return
{child.props.children}
; } return null; diff --git a/apps/trading/pages/markets/index.page.tsx b/apps/trading/pages/markets/index.page.tsx index b6edfafba..da72a9de4 100644 --- a/apps/trading/pages/markets/index.page.tsx +++ b/apps/trading/pages/markets/index.page.tsx @@ -28,7 +28,10 @@ const Markets = () => {