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

chore: remove infinite scroll from order table

Browse Source
This commit is contained in:
maciek
2023-03-21 14:54:50 +01:00
parent b2dd053621
commit 29f596a111
6 changed files with 69 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/trading/client-pages/market/trade-grid.tsx
+2
View File
@@ -102,6 +102,7 @@ const MarketBottomPanel = memo(
<TradingViews.Orders
marketId={marketId}
onMarketClick={onMarketClick}
enforceBottomPlaceholder
/>
</VegaWalletContainer>
</Tab>
@@ -157,6 +158,7 @@ const MarketBottomPanel = memo(
<TradingViews.Orders
marketId={marketId}
onMarketClick={onMarketClick}
enforceBottomPlaceholder
/>
</VegaWalletContainer>
</Tab>
libs/orders/src/lib/components/order-list-container.tsx
+3
View File
@@ -6,9 +6,11 @@ import { OrderListManager } from './order-list-manager';
export const OrderListContainer = ({
marketId,
onMarketClick,
enforceBottomPlaceholder,
}: {
marketId?: string;
onMarketClick?: (marketId: string) => void;
enforceBottomPlaceholder?: boolean;
}) => {
const { pubKey, isReadOnly } = useVegaWallet();
@@ -22,6 +24,7 @@ export const OrderListContainer = ({
marketId={marketId}
onMarketClick={onMarketClick}
isReadOnly={isReadOnly}
enforceBottomPlaceholder={enforceBottomPlaceholder}
/>
);
};
libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
+41 -73
View File
@@ -1,12 +1,7 @@
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/i18n';
import { useCallback, useRef, useState } from 'react';
import type {
BodyScrollEvent,
BodyScrollEndEvent,
FilterChangedEvent,
SortChangedEvent,
} from 'ag-grid-community';
import { useCallback, useEffect, useRef, useState } from 'react';
import type { FilterChangedEvent, SortChangedEvent } from 'ag-grid-community';
import { Button } from '@vegaprotocol/ui-toolkit';
import type { AgGridReact } from 'ag-grid-react';
import type { GridReadyEvent } from 'ag-grid-community';
@@ -23,13 +18,14 @@ import {
} from '@vegaprotocol/wallet';
import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
import { OrderEditDialog } from '../order-list/order-edit-dialog';
import type { Order } from '../order-data-provider';
import type { Order, OrderEdge } from '../order-data-provider';
export interface OrderListManagerProps {
partyId: string;
marketId?: string;
onMarketClick?: (marketId: string) => void;
isReadOnly: boolean;
enforceBottomPlaceholder: boolean;
}
const CancelAllOrdersButton = ({
@@ -65,78 +61,50 @@ export const OrderListManager = ({
marketId,
onMarketClick,
isReadOnly,
enforceBottomPlaceholder,
}: OrderListManagerProps) => {
const gridRef = useRef<AgGridReact | null>(null);
const scrolledToTop = useRef(true);
const [dataCount, setDataCount] = useState(0);
const scrolledToTop = useRef(false);
const [sort, setSort] = useState<Sort[] | undefined>();
const [filter, setFilter] = useState<Filter | undefined>(initialFilter);
const [editOrder, setEditOrder] = useState<Order | null>(null);
const create = useVegaTransactionStore((state) => state.create);
const hasActiveOrder = useHasActiveOrder(marketId);
const {
data,
error,
loading,
addNewRows,
getRows,
reload,
makeBottomPlaceholders,
} = useOrderListData({
const { data, error, loading, reload } = useOrderListData({
partyId,
marketId,
sort,
filter,
gridRef,
scrolledToTop,
});
const checkBottomPlaceholder = useCallback(() => {
if (!isReadOnly && hasActiveOrder) {
const rowCont = gridRef.current?.api?.getModel().getRowCount() ?? 0;
const lastRowIndex = gridRef.current?.api?.getLastDisplayedRow();
if (lastRowIndex && rowCont - 1 === lastRowIndex) {
const lastrow =
gridRef.current?.api.getDisplayedRowAtIndex(lastRowIndex);
lastrow?.setRowHeight(50);
makeBottomPlaceholders(lastrow?.data);
gridRef.current?.api.onRowHeightChanged();
gridRef.current?.api.refreshInfiniteCache();
}
}
}, [isReadOnly, hasActiveOrder, makeBottomPlaceholders]);
const onBodyScrollEnd = useCallback(
(event: BodyScrollEndEvent) => {
if (event.top === 0) {
addNewRows();
}
checkBottomPlaceholder();
},
[addNewRows, checkBottomPlaceholder]
);
const onBodyScroll = useCallback((event: BodyScrollEvent) => {
scrolledToTop.current = event.top <= 0;
}, []);
const {
onSortChanged: bottomPlaceholderOnSortChanged,
onFilterChanged: bottomPlaceholderOnFilterChanged,
...bottomPlaceholderProps
} = useBottomPlaceholder<Order>({
gridRef,
disabled: !enforceBottomPlaceholder && !isReadOnly && !hasActiveOrder,
});
const onFilterChanged = useCallback(
(event: FilterChangedEvent) => {
makeBottomPlaceholders();
const updatedFilter = event.api.getFilterModel();
if (Object.keys(updatedFilter).length) {
setFilter(updatedFilter);
} else {
setFilter(undefined);
}
checkBottomPlaceholder();
setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
bottomPlaceholderOnFilterChanged?.();
},
[setFilter, makeBottomPlaceholders, checkBottomPlaceholder]
[setFilter, bottomPlaceholderOnFilterChanged]
);
const onSortChange = useCallback(
(event: SortChangedEvent) => {
makeBottomPlaceholders();
const sort = event.columnApi
.getColumnState()
.sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0))
@@ -148,9 +116,9 @@ export const OrderListManager = ({
return acc;
}, [] as { colId: string; sort: string }[]);
setSort(sort.length > 0 ? sort : undefined);
checkBottomPlaceholder();
bottomPlaceholderOnSortChanged?.();
},
[setSort, makeBottomPlaceholders, checkBottomPlaceholder]
[setSort, bottomPlaceholderOnSortChanged]
);
const cancel = useCallback(
@@ -166,15 +134,13 @@ export const OrderListManager = ({
[create]
);
const onGridReady = useCallback(
({ api }: GridReadyEvent) => {
api.setDatasource({
getRows,
});
api.setFilterModel(initialFilter);
},
[getRows]
);
const onGridReady = useCallback(({ api }: GridReadyEvent) => {
api.setFilterModel(initialFilter);
}, []);
useEffect(() => {
setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
}, [data]);
const cancelAll = useCallback(
(marketId?: string) => {
@@ -186,20 +152,24 @@ export const OrderListManager = ({
},
[create]
);
const { isFullWidthRow, fullWidthCellRenderer, rowClassRules } =
useBottomPlaceholder<Order>({
gridRef,
});
const extractNodesDecorator = useCallback(
(data: (OrderEdge | null)[] | null, loading: boolean) =>
data && !loading
? data
.filter((item) => item !== null)
.map((item) => (item as OrderEdge).node)
: null,
[]
);
const extractedData = extractNodesDecorator(data, loading);
return (
<>
<div className="h-full relative">
<OrderListTable
rowData={extractedData}
ref={gridRef}
rowModelType="infinite"
onGridReady={onGridReady}
onBodyScrollEnd={onBodyScrollEnd}
onBodyScroll={onBodyScroll}
onFilterChanged={onFilterChanged}
onSortChanged={onSortChange}
cancel={cancel}
@@ -209,9 +179,7 @@ export const OrderListManager = ({
blockLoadDebounceMillis={100}
suppressLoadingOverlay
suppressNoRowsOverlay
isFullWidthRow={isFullWidthRow}
fullWidthCellRenderer={fullWidthCellRenderer}
rowClassRules={rowClassRules}
{...bottomPlaceholderProps}
/>
<div className="pointer-events-none absolute inset-0">
<AsyncRenderer
@@ -219,7 +187,7 @@ export const OrderListManager = ({
error={error}
data={data}
noDataMessage={t('No orders')}
noDataCondition={(data) => !(data && data.length)}
noDataCondition={(data) => !dataCount}
reload={reload}
/>
</div>
libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts
+11 -3
View File
@@ -79,6 +79,9 @@ export const useOrderListData = ({
timeInForce: filter?.timeInForce?.value,
types: filter?.type?.value,
},
pagination: {
first: 1000,
},
}),
[partyId, marketId, filter]
);
@@ -98,7 +101,6 @@ export const useOrderListData = ({
({
data,
delta,
totalCount,
}: {
data: (OrderEdge | null)[] | null;
delta?: Order[];
@@ -112,7 +114,10 @@ export const useOrderListData = ({
).length;
}
}
return updateGridData(dataRef, data, gridRef);
if (gridRef.current?.api?.getModel().getType() === 'infinite') {
return updateGridData(dataRef, data, gridRef);
}
return false;
},
[gridRef, scrolledToTop]
);
@@ -126,7 +131,10 @@ export const useOrderListData = ({
totalCount?: number;
}) => {
totalCountRef.current = totalCount;
return updateGridData(dataRef, data, gridRef);
if (gridRef.current?.api?.getModel().getType() === 'infinite') {
return updateGridData(dataRef, data, gridRef);
}
return false;
},
[gridRef]
);
libs/orders/src/lib/components/order-list/order-list.tsx
+11 -3
View File
@@ -39,10 +39,10 @@ export const OrderListTable = memo(
return (
<AgGrid
ref={ref}
overlayNoRowsTemplate={t('No orders')}
defaultColDef={{
flex: 1,
resizable: true,
sortable: true,
filterParams: { buttons: ['reset'] },
}}
style={{
@@ -74,6 +74,7 @@ export const OrderListTable = memo(
value
)
}
minWidth={150}
/>
<AgGridColumn
headerName={t('Size')}
@@ -89,7 +90,6 @@ export const OrderListTable = memo(
valueFormatter={({
value,
data,
node,
}: VegaValueFormatterParams<Order, 'size'>) => {
if (!data) {
return undefined;
@@ -110,6 +110,7 @@ export const OrderListTable = memo(
)
);
}}
minWidth={80}
/>
<AgGridColumn
field="type"
@@ -120,7 +121,6 @@ export const OrderListTable = memo(
valueFormatter={({
data: order,
value,
node,
}: VegaValueFormatterParams<Order, 'type'>) => {
if (!order) {
return undefined;
@@ -130,6 +130,7 @@ export const OrderListTable = memo(
if (order?.liquidityProvision) return t('Liquidity provision');
return Schema.OrderTypeMapping[value];
}}
minWidth={80}
/>
<AgGridColumn
field="status"
@@ -160,6 +161,7 @@ export const OrderListTable = memo(
{valueFormatted}
</span>
)}
minWidth={100}
/>
<AgGridColumn
headerName={t('Filled')}
@@ -186,6 +188,7 @@ export const OrderListTable = memo(
dps
)}/${addDecimalsFormatNumber(size.toString(), dps)}`;
}}
minWidth={100}
/>
<AgGridColumn
field="price"
@@ -208,6 +211,7 @@ export const OrderListTable = memo(
}
return addDecimalsFormatNumber(value, data.market.decimalPlaces);
}}
minWidth={100}
/>
<AgGridColumn
field="timeInForce"
@@ -231,6 +235,7 @@ export const OrderListTable = memo(
return value ? Schema.OrderTimeInForceMapping[value] : '';
}}
minWidth={150}
/>
<AgGridColumn
field="createdAt"
@@ -244,6 +249,7 @@ export const OrderListTable = memo(
</span>
);
}}
minWidth={150}
/>
<AgGridColumn
field="updatedAt"
@@ -261,6 +267,7 @@ export const OrderListTable = memo(
</span>
);
}}
minWidth={150}
/>
<AgGridColumn
colId="amend"
@@ -284,6 +291,7 @@ export const OrderListTable = memo(
</>
) : null;
}}
sortable={false}
/>
</AgGrid>
);
libs/react-helpers/src/hooks/use-bottom-placeholder.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export const useBottomPlaceholder = <T extends {}>({
isFullWidthRow,
fullWidthCellRenderer,
onSortChanged: onRowsChanged,
onFilterChange: onRowsChanged,
onFilterChanged: onRowsChanged,
}
: {},
[onBodyScrollEnd, onRowsChanged, disabled]