add search for fellowshipMember selector, #5271

packages/next-common/components/data/hooks/useSearchByAddressIdentity.js

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState } from "react";
 import { isAddress } from "@polkadot/util-crypto";
 import { useDebounce } from "react-use";
 
-async function fetchBatchIdentities(identityChain, accounts = []) {
+export async function fetchBatchIdentities(identityChain, accounts = []) {
   const results = await Promise.all(
     accounts.map(async (account) => {
       const identity = await fetchIdentity(identityChain, account);

packages/next-common/components/fellowshipMemberSelector/index.jsx

@@ -11,6 +11,7 @@ import {
   AddressComboCustomAddress,
   AddressComboInput,
 } from "next-common/components/addressCombo";
+import useSearchFellowshipMember from "./useSearchFellowshipMember";
 
 function SelectHeader({
   inputAddress,
@@ -135,6 +136,8 @@ export default function FellowshipMemberSelector({
     setShow(false);
   };
 
+  const searchedResult = useSearchFellowshipMember(inputAddress, members);
+
   return (
     <div ref={ref} className="relative">
       <div
@@ -150,11 +153,11 @@ export default function FellowshipMemberSelector({
           setInputAddress={setInputAddress}
           onBlur={onBlur}
           placeholder={placeholder}
-          members={members}
+          members={searchedResult}
           address={address}
           edit={edit}
         />
-        {members.length > 0 && (
+        {searchedResult.length > 0 && (
           <span
             onClick={(e) => {
               setShow((prevShow) => !prevShow);
@@ -165,9 +168,9 @@ export default function FellowshipMemberSelector({
           </span>
         )}
       </div>
-      {show && members.length > 0 && (
+      {show && searchedResult.length > 0 && (
         <SelectOptions
-          members={members}
+          members={searchedResult}
           address={address}
           onSelect={onSelect}
         />

packages/next-common/components/fellowshipMemberSelector/useSearchFellowshipMember.js

@@ -0,0 +1,55 @@
+import { useChainSettings } from "next-common/context/chain";
+import { useEffect, useMemo, useState } from "react";
+import { isAddress } from "@polkadot/util-crypto";
+import { useDebounce } from "react-use";
+import { fetchBatchIdentities } from "next-common/components/data/hooks/useSearchByAddressIdentity";
+
+export default function useSearchFellowshipMember(
+  searchValue = "",
+  members = [],
+) {
+  const [identityMapping, setIdentityMapping] = useState({});
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
+  const { identity: identityChain } = useChainSettings();
+
+  useDebounce(
+    () => {
+      setDebouncedSearchValue(searchValue);
+    },
+    500,
+    [searchValue],
+  );
+
+  useEffect(() => {
+    const allAccounts = new Set();
+
+    members?.forEach(({ address }) => {
+      allAccounts.add(address);
+    });
+
+    const accountList = Array.from(allAccounts);
+
+    const fetchIdentities = async () => {
+      const identities = await fetchBatchIdentities(identityChain, accountList);
+      setIdentityMapping(identities);
+    };
+
+    fetchIdentities();
+  }, [members, identityChain]);
+
+  return useMemo(() => {
+    const search = (debouncedSearchValue || "").toLowerCase();
+
+    if (!search) {
+      return members;
+    }
+
+    if (isAddress(debouncedSearchValue)) {
+      return members?.filter(({ address }) => address.toLowerCase() === search);
+    }
+
+    return members?.filter(({ address }) => {
+      return identityMapping[address]?.includes(search);
+    });
+  }, [debouncedSearchValue, members, identityMapping]);
+}