From 8424dc718dd064a74c73230d85d0b3aaa8fbd453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Thu, 31 Mar 2022 18:14:16 +0200 Subject: [PATCH] [#128] Use native ag-grid sort instead on useMemo (#178) * [#128] Use native ag-grid sort instead on useMemo * [#128] Add secondary sort on positions table - order by instrument name, market id --- .../src/lib/positions-table.spec.tsx | 4 +- libs/positions/src/lib/positions-table.tsx | 55 ++++++++++++------- 2 files changed, 39 insertions(+), 20 deletions(-) diff --git a/libs/positions/src/lib/positions-table.spec.tsx b/libs/positions/src/lib/positions-table.spec.tsx index 8efdf8f24..81f2ff7b4 100644 --- a/libs/positions/src/lib/positions-table.spec.tsx +++ b/libs/positions/src/lib/positions-table.spec.tsx @@ -68,7 +68,9 @@ test('Render correct columns', async () => { const headers = screen.getAllByRole('columnheader'); expect(headers).toHaveLength(5); - expect(headers.map((h) => h.textContent?.trim())).toEqual([ + expect( + headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim()) + ).toEqual([ 'Market', 'Amount', 'Average Entry Price', diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx index 304826de9..3e99ed905 100644 --- a/libs/positions/src/lib/positions-table.tsx +++ b/libs/positions/src/lib/positions-table.tsx @@ -10,7 +10,6 @@ import { import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; import { AgGridColumn } from 'ag-grid-react'; import type { AgGridReact } from 'ag-grid-react'; -import compact from 'lodash/compact'; import type { Positions_party_positions } from './__generated__/Positions'; import { MarketTradingMode } from '@vegaprotocol/types'; @@ -21,52 +20,70 @@ interface PositionsTableProps { export const getRowNodeId = (data: { market: { id: string } }) => data.market.id; -const sortByName = ( - a: Positions_party_positions, - b: Positions_party_positions -) => { - if ( - a.market.tradableInstrument.instrument.name < - b.market.tradableInstrument.instrument.name - ) { - return -1; +const alphanumericComparator = (a: string, b: string, isInverted: boolean) => { + if (a < b) { + return isInverted ? 1 : -1; } - if ( - a.market.tradableInstrument.instrument.name > - b.market.tradableInstrument.instrument.name - ) { - return 1; + if (a > b) { + return isInverted ? -1 : 1; } return 0; }; +const comparator = ( + valueA: string, + valueB: string, + nodeA: { data: Positions_party_positions }, + nodeB: { data: Positions_party_positions }, + isInverted: boolean +) => + alphanumericComparator( + nodeA.data.market.tradableInstrument.instrument.name, + nodeB.data.market.tradableInstrument.instrument.name, + isInverted + ) || + alphanumericComparator( + nodeA.data.market.id, + nodeB.data.market.id, + isInverted + ); + interface PositionsTableValueFormatterParams extends ValueFormatterParams { data: Positions_party_positions; } export const PositionsTable = forwardRef( ({ data }, ref) => { - const sortedData = useMemo(() => { - return compact(data).sort(sortByName); - }, [data]); return ( { + event.columnApi.applyColumnState({ + state: [ + { + colId: 'market.tradableInstrument.instrument.code', + sort: 'asc', + }, + ], + }); + }} components={{ PriceCell }} >