From 2f96bd19ef87dcd2b965d0f507398d66747664d4 Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Sun, 24 Dec 2023 12:09:11 -0500
Subject: [PATCH] Implement election filters

---
 src/components/menus/Modal.tsx                |   2 +-
 .../validators/ValidatorGroupTable.tsx        | 222 ++++++++++++------
 src/features/validators/utils.ts              |   5 +
 3 files changed, 152 insertions(+), 77 deletions(-)

diff --git a/src/components/menus/Modal.tsx b/src/components/menus/Modal.tsx
index 11902e3..6f9d8ec 100644
--- a/src/components/menus/Modal.tsx
+++ b/src/components/menus/Modal.tsx
@@ -14,7 +14,7 @@ export function Modal({
 }: PropsWithChildren<{ id: string; className?: string }>) {
   return (
     <dialog id={id} className="modal modal-bottom sm:modal-middle">
-      <div className={`modal-box ${className}`}>
+      <div className={`modal-box all:rounded-none ${className}`}>
         <form method="dialog">
           <button className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2 outline-none">
             ✕
diff --git a/src/features/validators/ValidatorGroupTable.tsx b/src/features/validators/ValidatorGroupTable.tsx
index ce14518..42a40cd 100644
--- a/src/features/validators/ValidatorGroupTable.tsx
+++ b/src/features/validators/ValidatorGroupTable.tsx
@@ -17,13 +17,18 @@ import { Amount } from 'src/components/numbers/Amount';
 import { config } from 'src/config/config';
 
 import { ValidatorGroupLogo } from 'src/features/validators/ValidatorGroupLogo';
-import { cleanGroupName } from 'src/features/validators/utils';
+import { cleanGroupName, isElected } from 'src/features/validators/utils';
 import { useIsMobile } from 'src/styles/mediaQueries';
 import { fromWeiRounded } from 'src/utils/amount';
 import { bigIntMean } from 'src/utils/math';
 import { ValidatorGroup, ValidatorGroupRow, ValidatorStatus } from './types';
 
 const DESKTOP_ONLY_COLUMNS = ['votes', 'avgScore', 'numElected', 'cta'];
+enum Filter {
+  All = 'All',
+  Elected = 'Elected',
+  Unelected = 'Unelected',
+}
 
 export function ValidatorGroupTable({
   totalVotes,
@@ -32,72 +37,13 @@ export function ValidatorGroupTable({
   totalVotes: bigint;
   groups: ValidatorGroup[];
 }) {
+  const [filter, setFilter] = useState<Filter>(Filter.All);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [columnVisibility, setColumnVisibility] = useState({});
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: 'avgScore',
-      desc: true,
-    },
-  ]);
-
-  const columns = useMemo(() => {
-    const columnHelper = createColumnHelper<ValidatorGroupRow>();
-    return [
-      columnHelper.display({
-        id: 'index',
-        header: '#',
-        cell: (props) => <div>{getRowSortedIndex(props)}</div>,
-      }),
-      columnHelper.accessor('name', {
-        header: 'Name',
-        cell: (props) => (
-          <div className="flex items-center space-x-2">
-            <ValidatorGroupLogo address={props.row.original.address} size={30} />
-            <span>{cleanGroupName(props.getValue())}</span>
-          </div>
-        ),
-      }),
-      columnHelper.accessor('votes', {
-        header: 'Total Staked',
-        cell: (props) => (
-          <Amount
-            valueWei={props.getValue()}
-            showSymbol={false}
-            decimals={0}
-            className="all:font-sans"
-          />
-        ),
-      }),
-      columnHelper.display({
-        id: 'cumulativeShare',
-        header: 'Cumulative Share',
-        cell: (props) => <CumulativeColumn rowProps={props} totalVotes={totalVotes} />,
-      }),
-      columnHelper.accessor('avgScore', {
-        header: 'Score',
-        cell: (props) => <div>{`${props.getValue()}%`}</div>,
-      }),
-      columnHelper.accessor('numElected', {
-        header: 'Elected',
-        cell: (props) => <div>{`${props.getValue()} / ${props.row.original.numMembers}`}</div>,
-      }),
-      columnHelper.display({
-        id: 'cta',
-        header: '',
-        cell: (props) => (
-          <OutlineButton onClick={() => alert(props.row.original.address)}>
-            <div className="flex items-center space-x-1.5">
-              <span>Stake</span>
-              <ChevronIcon direction="e" width={10} height={10} />
-            </div>
-          </OutlineButton>
-        ),
-      }),
-    ];
-  }, [totalVotes]);
+  const [sorting, setSorting] = useState<SortingState>([{ id: 'votes', desc: true }]);
 
-  const groupRows = useGroupTableRows({ groups, searchQuery });
+  const columns = useTableColumns(totalVotes);
+  const groupRows = useTableRows({ groups, filter, searchQuery });
   const table = useReactTable<ValidatorGroupRow>({
     data: groupRows,
     columns,
@@ -124,8 +70,27 @@ export function ValidatorGroupTable({
 
   return (
     <>
-      <div className="flex items-center justify-between px-4 py-4">
-        <div className="font-serif text-xl">{`All ${groupRows.length}`}</div>
+      <div className="flex items-center justify-between px-4 pt-2">
+        <div className="flex space-x-5">
+          <FilterButton
+            filter={Filter.All}
+            setFilter={setFilter}
+            groups={groups}
+            isActive={filter === Filter.All}
+          />
+          <FilterButton
+            filter={Filter.Elected}
+            setFilter={setFilter}
+            groups={groups}
+            isActive={filter === Filter.Elected}
+          />
+          <FilterButton
+            filter={Filter.Unelected}
+            setFilter={setFilter}
+            groups={groups}
+            isActive={filter === Filter.Unelected}
+          />
+        </div>
         <SearchField value={searchQuery} setValue={setSearchQuery} className="w-64 text-sm" />
       </div>
       <table className="w-full">
@@ -173,23 +138,90 @@ export function ValidatorGroupTable({
   );
 }
 
-function useGroupTableRows({
+function useTableColumns(totalVotes: bigint) {
+  return useMemo(() => {
+    const columnHelper = createColumnHelper<ValidatorGroupRow>();
+    return [
+      columnHelper.display({
+        id: 'index',
+        header: '#',
+        cell: (props) => <div>{getRowSortedIndex(props)}</div>,
+      }),
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: (props) => (
+          <div className="flex items-center space-x-2">
+            <ValidatorGroupLogo address={props.row.original.address} size={30} />
+            <span>{cleanGroupName(props.getValue())}</span>
+          </div>
+        ),
+      }),
+      columnHelper.accessor('votes', {
+        header: 'Total Staked',
+        cell: (props) => (
+          <Amount
+            valueWei={props.getValue()}
+            showSymbol={false}
+            decimals={0}
+            className="all:font-sans"
+          />
+        ),
+      }),
+      columnHelper.display({
+        id: 'cumulativeShare',
+        header: 'Cumulative Share',
+        cell: (props) => <CumulativeColumn rowProps={props} totalVotes={totalVotes} />,
+      }),
+      columnHelper.accessor('avgScore', {
+        header: 'Score',
+        cell: (props) => <div>{`${props.getValue()}%`}</div>,
+      }),
+      columnHelper.accessor('numElected', {
+        header: 'Elected',
+        cell: (props) => <div>{`${props.getValue()} / ${props.row.original.numMembers}`}</div>,
+      }),
+      columnHelper.display({
+        id: 'cta',
+        header: '',
+        cell: (props) => (
+          <OutlineButton onClick={() => alert(props.row.original.address)}>
+            <div className="flex items-center space-x-1.5">
+              <span>Stake</span>
+              <ChevronIcon direction="e" width={10} height={10} />
+            </div>
+          </OutlineButton>
+        ),
+      }),
+    ];
+  }, [totalVotes]);
+}
+
+function useTableRows({
   groups,
+  filter,
   searchQuery,
 }: {
   groups: ValidatorGroup[];
+  filter: Filter;
   searchQuery: string;
 }) {
   return useMemo<ValidatorGroupRow[]>(() => {
     const query = searchQuery.trim().toLowerCase();
-    const filteredGroups = groups.filter(
-      (g) =>
-        g.name.toLowerCase().includes(query) ||
-        g.address.toLowerCase().includes(query) ||
-        Object.values(g.members).some(
-          (m) => m.address.toLowerCase().includes(query) || m.name.toLowerCase().includes(query),
-        ),
-    );
+    const filteredGroups = groups
+      .filter((g) => {
+        if (filter === Filter.Elected) return isElected(g);
+        else if (filter === Filter.Unelected) return !isElected(g);
+        else return true;
+      })
+      .filter(
+        (g) =>
+          !g ||
+          g.name.toLowerCase().includes(query) ||
+          g.address.toLowerCase().includes(query) ||
+          Object.values(g.members).some(
+            (m) => m.address.toLowerCase().includes(query) || m.name.toLowerCase().includes(query),
+          ),
+      );
 
     const groupRows = filteredGroups.map((g): ValidatorGroupRow => {
       const members = Object.values(g.members);
@@ -205,7 +237,45 @@ function useGroupTableRows({
       };
     });
     return groupRows;
-  }, [groups, searchQuery]);
+  }, [groups, filter, searchQuery]);
+}
+
+function FilterButton({
+  filter,
+  setFilter,
+  groups,
+  isActive,
+}: {
+  filter: Filter;
+  setFilter: (f: Filter) => void;
+  groups: ValidatorGroup[];
+  isActive: boolean;
+}) {
+  const [hover, setHover] = useState(false);
+  let count = groups.length;
+  if (filter === Filter.Elected) count = groups.filter((g) => isElected(g)).length;
+  else if (filter === Filter.Unelected) count = groups.filter((g) => !isElected(g)).length;
+  return (
+    <button
+      className="relative flex items-center space-x-1 transition-all"
+      onClick={() => setFilter(filter)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <span>{filter}</span>
+      <div
+        className={clsx(
+          'w-10 rounded-full border border-purple-500 text-sm font-thin',
+          (hover || isActive) && 'bg-purple-500 text-white',
+        )}
+      >
+        {count}
+      </div>
+      {isActive && (
+        <span className="absolute -bottom-4 left-0 right-0 h-[2px] bg-purple-500"></span>
+      )}
+    </button>
+  );
 }
 
 function CumulativeColumn({
diff --git a/src/features/validators/utils.ts b/src/features/validators/utils.ts
index 84e0117..0c372e4 100644
--- a/src/features/validators/utils.ts
+++ b/src/features/validators/utils.ts
@@ -1,3 +1,4 @@
+import { ValidatorGroup, ValidatorStatus } from 'src/features/validators/types';
 import { toTitleCase } from 'src/utils/strings';
 
 export function cleanGroupName(name: string) {
@@ -8,3 +9,7 @@ export function cleanGroupName(name: string) {
       .trim(),
   );
 }
+
+export function isElected(group: ValidatorGroup) {
+  return Object.values(group.members).some((m) => m.status === ValidatorStatus.Elected);
+}