diff --git a/apps/trading-e2e/src/integration/trading-orders.cy.ts b/apps/trading-e2e/src/integration/trading-orders.cy.ts index ef7df42ed..263dc4203 100644 --- a/apps/trading-e2e/src/integration/trading-orders.cy.ts +++ b/apps/trading-e2e/src/integration/trading-orders.cy.ts @@ -139,7 +139,8 @@ describe('orders list', { tags: '@smoke', testIsolation: true }, () => { }); describe('subscribe orders', { tags: '@smoke' }, () => { - before(() => { + let orderId = '0'; + beforeEach(() => { const subscriptionMocks = getSubscriptionMocks(); cy.spy(subscriptionMocks, 'OrdersUpdate'); cy.mockTradingPage(); @@ -154,8 +155,8 @@ describe('subscribe orders', { tags: '@smoke' }, () => { .click(); cy.get('.ag-filter-apply-panel-button').click(); }); + orderId = (parseInt(orderId, 10) + 1).toString(); }); - const orderId = '1234567890'; // 7002-SORD-053 // 7002-SORD-040 // 7003-MORD-001 @@ -299,7 +300,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => { }); cy.get(`[row-id=${orderId}]`) .find('[col-id="price"]') - .should('have.text', '200.00'); + .should('have.text', '-'); }); it('must see the time in force applied to the order', () => { diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx index 2d67b7423..f8fadbee4 100644 --- a/libs/accounts/src/lib/accounts-manager.tsx +++ b/libs/accounts/src/lib/accounts-manager.tsx @@ -37,9 +37,9 @@ export const AccountManager = ({ variables, }); const setId = useCallback( - (data: AccountFields) => ({ + (data: AccountFields, id: string) => ({ ...data, - asset: { ...data.asset, id: `${data.asset.id}-1` }, + asset: { ...data.asset, id }, }), [] ); diff --git a/libs/react-helpers/src/hooks/use-bottom-placeholder.tsx b/libs/react-helpers/src/hooks/use-bottom-placeholder.tsx index 986875771..923c83a50 100644 --- a/libs/react-helpers/src/hooks/use-bottom-placeholder.tsx +++ b/libs/react-helpers/src/hooks/use-bottom-placeholder.tsx @@ -1,16 +1,17 @@ import type { RefObject } from 'react'; -import { useCallback, useMemo, useRef } from 'react'; +import { useCallback, useMemo } from 'react'; import type { AgGridReact } from 'ag-grid-react'; import type { IsFullWidthRowParams, RowHeightParams } from 'ag-grid-community'; const NO_HOVER_CSS_RULE = { 'no-hover': 'data?.isLastPlaceholder' }; +const ROW_ID = 'bottomPlaceholder'; const fullWidthCellRenderer = () => null; const isFullWidthRow = (params: IsFullWidthRowParams) => params.rowNode.data?.isLastPlaceholder; interface Props { gridRef: RefObject; - setId?: (data: T) => T; + setId?: (data: T, id: string) => T; disabled?: boolean; } // eslint-disable-next-line @typescript-eslint/ban-types @@ -19,34 +20,33 @@ export const useBottomPlaceholder = ({ setId, disabled, }: Props) => { - const placeholderRowRef = useRef(); const onBodyScrollEnd = useCallback(() => { const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0; - if (!placeholderRowRef.current && rowCont) { + if (rowCont) { const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1); if (lastRow && lastRow.data) { - placeholderRowRef.current = setId - ? setId({ ...lastRow.data, isLastPlaceholder: true }) + const placeholderRow = setId + ? setId({ ...lastRow.data, isLastPlaceholder: true }, ROW_ID) : { ...lastRow.data, isLastPlaceholder: true, - id: `${lastRow.data?.id || '-'}-1`, + id: ROW_ID, }; - const transaction = { - add: [placeholderRowRef.current], - }; + const transaction = gridRef.current?.api.getRowNode(ROW_ID) + ? { update: [placeholderRow] } + : { add: [placeholderRow] }; gridRef.current?.api.applyTransaction(transaction); } } }, [gridRef, setId]); const onRowsChanged = useCallback(() => { - if (placeholderRowRef.current) { + const placeholderNode = gridRef.current?.api.getRowNode(ROW_ID); + if (placeholderNode) { const transaction = { - remove: [placeholderRowRef.current], + remove: [placeholderNode.data], }; gridRef.current?.api.applyTransaction(transaction); - placeholderRowRef.current = undefined; } onBodyScrollEnd(); }, [gridRef, onBodyScrollEnd]);