fix sorting

ionicprotocol · Nov 22, 2024 · f0063f1 · f0063f1
1 parent 8259eab
commit f0063f1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/packages/ui/app/_components/CommonTable.tsx b/packages/ui/app/_components/CommonTable.tsx
@@ -30,15 +30,18 @@ import ResultHandler from './ResultHandler';
 // Sorting functions
 export const sortingFunctions = {
   numerical: (a: any, b: any) => {
+    if (typeof a === 'number' && typeof b === 'number') {
+      return a - b;
+    }
     const aValue = parseFloat(String(a).replace(/[^0-9.-]+/g, '')) || 0;
     const bValue = parseFloat(String(b).replace(/[^0-9.-]+/g, '')) || 0;
-    return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
+    return aValue - bValue;
   },
   alphabetical: (a: any, b: any) => String(a).localeCompare(String(b)),
   percentage: (a: any, b: any) => {
     const aValue = parseFloat(String(a).replace('%', '')) || 0;
     const bValue = parseFloat(String(b).replace('%', '')) || 0;
-    return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
+    return aValue - bValue;
   }
 };
 
@@ -49,6 +52,7 @@ export type EnhancedColumnDef<T> = Omit<ColumnDef<T>, 'sortingFn'> & {
   header: string;
   sortingFn?: SortingType | ((rowA: any, rowB: any) => number);
   enableSorting?: boolean;
+  accessorFn?: (row: T) => any; // Allow custom accessor function to be passed
 };
 
 interface CommonTableProps<T> {
@@ -71,7 +75,13 @@ const SortableHeader = ({
   return (
     <button
       className={`flex items-center gap-2 hover:text-white ${!isSortable ? 'cursor-default' : ''}`}
-      onClick={() => isSortable && column.toggleSorting(sorted === 'desc')}
+      onClick={() => {
+        if (isSortable) {
+          const nextSortingOrder =
+            sorted === false ? 'asc' : sorted === 'asc' ? 'desc' : false;
+          column.toggleSorting(nextSortingOrder === 'desc', false);
+        }
+      }}
       disabled={!isSortable}
     >
       {children}
@@ -101,17 +111,18 @@ function CommonTable<T extends object>({
   const processedColumns = columns.map(
     (col): ColumnDef<T> => ({
       ...col,
-      accessorFn: (row: T) => (row as any)[col.id],
+      accessorFn: col.accessorFn || ((row: T) => (row as any)[col.id]),
       header: ({ column }) => (
         <SortableHeader column={column}>{col.header}</SortableHeader>
       ),
       sortingFn:
         typeof col.sortingFn === 'string'
           ? (rowA: any, rowB: any) => {
               const sortFn = sortingFunctions[col.sortingFn as SortingType];
-              return sortFn(rowA.original[col.id], rowB.original[col.id]);
+              return sortFn(rowA.getValue(col.id), rowB.getValue(col.id));
             }
-          : col.sortingFn
+          : col.sortingFn,
+      enableSorting: col.enableSorting !== false
     })
   );
 
@@ -121,7 +132,8 @@ function CommonTable<T extends object>({
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    state: { sorting }
+    state: { sorting },
+    enableMultiSort: false
   });
 
   return (

diff --git a/packages/ui/app/market/page.tsx b/packages/ui/app/market/page.tsx
@@ -62,6 +62,13 @@ export default function Market() {
 
   const { marketData, isLoading, poolData, selectedMarketData, loopProps } =
     useMarketData(selectedPool, chain, selectedSymbol);
+  console.log(
+    'marketData',
+    marketData.map((data) => ({
+      name: data.asset,
+      supplyAPR: data.supplyAPR
+    }))
+  );
 
   const columns: EnhancedColumnDef<MarketRowData>[] = [
     {
@@ -107,6 +114,7 @@ export default function Market() {
       id: 'supplyAPRTotal',
       header: 'SUPPLY APR',
       sortingFn: 'numerical',
+      accessorFn: (row) => row.supplyAPR,
       cell: ({ row }: MarketCellProps) => (
         <APRCell
           type="supply"
@@ -125,6 +133,7 @@ export default function Market() {
       id: 'borrowAPRTotal',
       header: 'BORROW APR',
       sortingFn: 'numerical',
+      accessorFn: (row) => row.borrowAPR,
       cell: ({ row }: MarketCellProps) => (
         <APRCell
           type="borrow"