feat(#81): make market list table sortable and add filters (#1082)

libs/market-list/src/lib/components/markets-container/market-list-table.tsx

@@ -32,6 +32,8 @@ type MarketListTableValueFormatterParams = Omit<
   data: MarketList_markets;
 };
 
+export const getRowId = ({ data }: { data: { id: string } }) => data.id;
+
 export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
   const { setAssetDetailsDialogOpen, setAssetDetailsDialogSymbol } =
     useAssetDetailsDialogStore();
@@ -39,11 +41,13 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
     <AgGrid
       style={{ width: '100%', height: '100%' }}
       overlayNoRowsTemplate={t('No markets')}
-      getRowId={({ data }) => data?.id}
+      getRowId={getRowId}
       ref={ref}
       defaultColDef={{
         flex: 1,
         resizable: true,
+        sortable: true,
+        filter: true,
       }}
       suppressCellFocus={true}
       components={{ PriceFlashCell }}

libs/market-list/src/lib/components/markets-container/markets-container.tsx

@@ -1,21 +1,23 @@
 import { useRef, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { MarketListTable } from './market-list-table';
+import { MarketListTable, getRowId } from './market-list-table';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import type { AgGridReact } from 'ag-grid-react';
-import type { IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
+import type { RowClickedEvent } from 'ag-grid-community';
+import { produce } from 'immer';
+import merge from 'lodash/merge';
 import type {
   MarketList_markets,
   MarketList_markets_data,
-} from '../../__generated__/MarketList';
+  MarketDataSub_marketData,
+} from '../../__generated__';
 import { marketsDataProvider as dataProvider } from '../../markets-data-provider';
 import { Interval, MarketState } from '@vegaprotocol/types';
 
 export const MarketsContainer = () => {
   const { push } = useRouter();
   const gridRef = useRef<AgGridReact | null>(null);
-  const dataRef = useRef<MarketList_markets[] | null>(null);
 
   const yTimestamp = useMemo(() => {
     const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
@@ -26,37 +28,53 @@ export const MarketsContainer = () => {
     [yTimestamp]
   );
 
-  const update = useCallback(({ data }: { data: MarketList_markets[] }) => {
+  const update = useCallback(
+    ({ delta }: { delta: MarketDataSub_marketData }) => {
+      const update: MarketList_markets[] = [];
+      const add: MarketList_markets[] = [];
+      const remove: MarketList_markets[] = [];
       if (!gridRef.current?.api) {
         return false;
       }
-    dataRef.current = data;
-    gridRef.current.api.refreshInfiniteCache();
+      const rowNode = gridRef.current.api.getRowNode(
+        getRowId({ data: delta.market })
+      );
+      if (rowNode) {
+        const updatedData = produce<MarketList_markets>(
+          rowNode.data.data,
+          (draft: MarketList_markets) => merge(draft, delta)
+        );
+        if (updatedData !== rowNode.data.data) {
+          update.push({ ...rowNode.data, data: updatedData });
+        }
+      }
+      // @TODO - else add new market
+      if (update.length || add.length || remove.length) {
+        gridRef.current.api.applyTransactionAsync({
+          update,
+          add,
+          addIndex: 0,
+        });
+      }
       return true;
-  }, []);
+    },
+    [gridRef]
+  );
+
   const { data, error, loading } = useDataProvider<
     MarketList_markets[],
     MarketList_markets_data
   >({ dataProvider, update, variables });
-  dataRef.current = data;
-  const getRows = async ({
-    successCallback,
-    startRow,
-    endRow,
-  }: IGetRowsParams) => {
-    const rowsThisBlock = dataRef.current
-      ? dataRef.current
-          .slice(startRow, endRow)
-          .filter((m) => m.data?.market.state !== MarketState.STATE_REJECTED)
-      : [];
-    const lastRow = dataRef.current?.length ?? -1;
-    successCallback(rowsThisBlock, lastRow);
-  };
+
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
       <MarketListTable
-        rowModelType="infinite"
-        datasource={{ getRows }}
+        rowData={
+          data &&
+          data.filter(
+            (m) => m.data?.market.state !== MarketState.STATE_REJECTED
+          )
+        }
         ref={gridRef}
         onRowClicked={(rowEvent: RowClickedEvent) => {
           const { data, event } = rowEvent;