feat: add sorting to all validators table

anoma · Jun 28, 2023 · ecd12e6 · ecd12e6
1 parent 689ee7f
commit ecd12e6
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 7 deletions.
diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import BigNumber from "bignumber.js";
 import { Table, TableLink, TableConfigurations } from "@anoma/components";
 import { Account } from "slices/accounts";
@@ -8,7 +9,7 @@ import {
   StakingBalancesValue,
   StakingOverviewContainer,
 } from "./StakingOverview.components";
-import { formatPercentage } from "@anoma/utils";
+import { formatPercentage, assertNever } from "@anoma/utils";
 
 const MyValidatorsRowRenderer = (
   myValidatorRow: MyValidators,
@@ -92,17 +93,47 @@ const AllValidatorsRowRenderer = (
 };
 
 const getAllValidatorsConfiguration = (
-  navigateToValidatorDetails: (validatorId: string) => void
+  navigateToValidatorDetails: (validatorId: string) => void,
+  onColumnClick: (column: AllValidatorsColumn) => void,
+  sort: Sort,
 ): TableConfigurations<Validator, ValidatorsCallbacks> => {
+  const getLabelWithTriangle = (column: AllValidatorsColumn): string => {
+    let triangle = "";
+    if (sort.column === column) {
+      if (sort.ascending) {
+        triangle = " \u25b5"; // white up-pointing small triangle
+      } else {
+        triangle = " \u25bf"; // white down-pointing small triangle
+      }
+    }
+
+    return `${column}${triangle}`;
+  }
+
   return {
     rowRenderer: AllValidatorsRowRenderer,
     callbacks: {
       onClickValidator: navigateToValidatorDetails,
     },
     columns: [
-      { uuid: "1", columnLabel: "Validator", width: "45%" },
-      { uuid: "2", columnLabel: "Voting power", width: "25%" },
-      { uuid: "3", columnLabel: "Commission", width: "30%" },
+      {
+        uuid: "1",
+        columnLabel: getLabelWithTriangle(AllValidatorsColumn.Validator),
+        width: "45%",
+        onClick: () => onColumnClick(AllValidatorsColumn.Validator),
+      },
+      {
+        uuid: "2",
+        columnLabel: getLabelWithTriangle(AllValidatorsColumn.VotingPower),
+        width: "25%",
+        onClick: () => onColumnClick(AllValidatorsColumn.VotingPower),
+      },
+      {
+        uuid: "3",
+        columnLabel: getLabelWithTriangle(AllValidatorsColumn.Commission),
+        width: "30%",
+        onClick: () => onColumnClick(AllValidatorsColumn.Commission),
+      },
     ],
   };
 };
@@ -213,21 +244,65 @@ const MyValidatorsTable: React.FC<{
   );
 };
 
+enum AllValidatorsColumn {
+  Validator = "Validator",
+  VotingPower = "Voting power",
+  Commission = "Commission"
+};
+
+type Sort = {
+  column: AllValidatorsColumn;
+  ascending: boolean;
+};
+
+const sortValidators = (sort: Sort, validators: Validator[]): Validator[] => {
+  const direction = sort.ascending ? 1 : -1;
+
+  const ascendingSortFn: (a: Validator, b: Validator) => number =
+    sort.column === AllValidatorsColumn.Validator ?
+      (a, b) => a.name.localeCompare(b.name) :
+    sort.column === AllValidatorsColumn.VotingPower ?
+      ((a, b) => a.votingPower.isLessThan(b.votingPower) ? -1 : 1) :
+    sort.column === AllValidatorsColumn.Commission ?
+      ((a, b) => a.commission.isLessThan(b.commission) ? -1 : 1) :
+    assertNever(sort.column);
+
+  const cloned = validators.slice();
+  cloned.sort((a, b) => direction * ascendingSortFn(a, b));
+
+  return cloned;
+}
+
 const AllValidatorsTable: React.FC<{
   validators: Validator[];
   navigateToValidatorDetails: (validatorId: string) => void;
 }> = ({
   validators,
   navigateToValidatorDetails,
 }) => {
+  const [sort, setSort] = useState<Sort>({
+    column: AllValidatorsColumn.Validator,
+    ascending: true
+  });
+
+  const sortedValidators = sortValidators(sort, validators);
+
+  const handleColumnClick = (column: AllValidatorsColumn): void =>
+    setSort({
+      column,
+      ascending: sort.column === column ? !sort.ascending : true
+    });
+
   const allValidatorsConfiguration = getAllValidatorsConfiguration(
-    navigateToValidatorDetails
+    navigateToValidatorDetails,
+    handleColumnClick,
+    sort
   );
 
   return (
     <Table
       title="All Validators"
-      data={validators}
+      data={sortedValidators}
       tableConfigurations={allValidatorsConfiguration}
     />
   );

diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
@@ -22,6 +22,7 @@ const getRenderedHeaderRow = (
       <th
         key={`header_${columnDefinition.uuid}`}
         style={{ textAlign: "left", width: `${columnDefinition.width}` }}
+        onClick={columnDefinition.onClick}
       >
         {columnDefinition.columnLabel}
       </th>

diff --git a/packages/components/src/Table/types.ts b/packages/components/src/Table/types.ts
@@ -2,6 +2,7 @@ export type ColumnDefinition = {
   uuid: string;
   columnLabel: string;
   width: string;
+  onClick?: () => void;
 };
 
 export type TableConfigurations<RowType, Callbacks> = {