filter

packages/next-common/components/fellowship/salary/claimants/list.jsx

@@ -2,14 +2,17 @@ import DataList from "next-common/components/dataList";
 import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
 import FellowshipRank from "../../rank";
 import { usePageProps } from "next-common/context/page";
-import { find } from "lodash-es";
+import { find, has, isNil } from "lodash-es";
 import AddressUser from "next-common/components/user/addressUser";
 import FellowshipSalaryMemberIsRegistered from "./isRegistered";
 import Link from "next/link";
 import { useSalaryAsset } from "next-common/hooks/useSalaryAsset";
 import ValueDisplay from "next-common/components/valueDisplay";
 import { toPrecision } from "next-common/utils";
 import FellowshipSalaryMemberStatus from "./status";
+import useRankFilter from "next-common/hooks/fellowship/useRankFilter";
+import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
+import { useFellowshipSalaryMemberStatusFilter } from "next-common/hooks/fellowship/salary/useFellowshipSalaryStatusFilter";
 
 const columns = [
   {
@@ -50,19 +53,45 @@ const columns = [
 export default function FellowshipSalaryClaimants() {
   const { fellowshipParams, fellowshipMembers, fellowshipSalaryClaimants } =
     usePageProps();
+  const { symbol, decimals } = useSalaryAsset();
+
+  const resolvedClaimants = fellowshipSalaryClaimants.map((claimant) => {
+    const address = claimant?.address;
+    const member = find(fellowshipMembers, { address });
+    const rank = member?.rank;
+
+    return {
+      rank,
+      ...claimant,
+    };
+  });
+
+  const ranks = [...new Set(fellowshipMembers.map((m) => m.rank))];
+  const { rank, component: rankFilterComponent } = useRankFilter(ranks);
+
+  const statusValues = ["attempted", "registered", "nothing"];
+  const { status, component: statusFilterComponent } =
+    useFellowshipSalaryMemberStatusFilter(statusValues);
+
+  const filteredClaimants =
+    isNil(rank) && isNil(status)
+      ? resolvedClaimants
+      : resolvedClaimants.filter((claimant) => {
+          return (
+            (isNil(rank) || claimant.rank === rank) &&
+            (isNil(status) || has(claimant?.status?.status, status))
+          );
+        });
 
   const { activeSalary = [], passiveSalary = [] } = fellowshipParams ?? {};
-  const { symbol, decimals } = useSalaryAsset();
 
-  const rows = fellowshipSalaryClaimants?.map((claimant) => {
+  const rows = filteredClaimants?.map((claimant) => {
     const address = claimant?.address;
     const status = claimant?.status;
     const cycleIndex = status.lastActive;
-    const member = find(fellowshipMembers, { address });
-    const rank = member?.rank;
 
     return [
-      <FellowshipRank key={`rank-${address}`} rank={rank} />,
+      <FellowshipRank key={`rank-${address}`} rank={claimant.rank} />,
       <AddressUser key={`address-${address}`} add={address} />,
       <FellowshipSalaryMemberIsRegistered
         key={`isRegistered-${address}`}
@@ -94,7 +123,20 @@ export default function FellowshipSalaryClaimants() {
 
   return (
     <div>
-      <SecondaryCard>
+      <TitleContainer>
+        <span>
+          List
+          <span className="text-textTertiary text14Medium ml-1">
+            {filteredClaimants.length}
+          </span>
+        </span>
+        <div className="flex items-center gap-x-4">
+          {rankFilterComponent}
+          {statusFilterComponent}
+        </div>
+      </TitleContainer>
+
+      <SecondaryCard className="mt-4">
         <DataList
           className="text14Medium"
           columns={columns}

packages/next-common/hooks/fellowship/salary/useFellowshipSalaryStatusFilter.jsx

@@ -0,0 +1,40 @@
+import { upperFirst } from "lodash-es";
+import Select from "next-common/components/select";
+import { useState } from "react";
+
+export function useFellowshipSalaryMemberStatusFilter(statusValues = []) {
+  const options = [
+    {
+      label: "All",
+      value: null,
+    },
+    ...statusValues.map((value) => {
+      return {
+        label: upperFirst(value),
+        value,
+      };
+    }),
+  ];
+
+  const [status, setStatus] = useState(options[0].value);
+
+  const component = (
+    <div className="text12Medium text-textPrimary flex items-center gap-x-2">
+      <div>Status</div>
+      <Select
+        className="w-32"
+        small
+        value={status}
+        options={options}
+        onChange={(option) => {
+          setStatus(option.value);
+        }}
+      />
+    </div>
+  );
+
+  return {
+    status,
+    component,
+  };
+}

packages/next-common/hooks/fellowship/useRankFilter.js

@@ -8,7 +8,7 @@ export default function useRankFilter(ranks = []) {
   }));
 
   options.unshift({
-    label: "-",
+    label: "All",
     value: null,
   });