feat: enable search in relayPool table (#495)

Author: digi-monkey

src/core/relay/pool/index.ts

@@ -72,6 +72,38 @@ export class RelayPool {
     return this.relays;
   }
 
+  async findRelays(keyword: string, alwaysFetch = false) {
+    const k = keyword.toLowerCase();
+    const find = (r: Relay) =>
+      r.url.toLowerCase().includes(k) || r.about?.toLowerCase().includes(k);
+
+    let relays = this.db.loadAll().filter(find);
+
+    if (alwaysFetch) {
+      const urls = relays.map(r => r.url);
+      const newRelays = (await this.fetchOnlineRelays()).filter(find);
+      for (const r of newRelays) {
+        if (!urls.includes(r.url)) {
+          this.db.save(r);
+          relays.push(r);
+        }
+      }
+
+      return filterDuplicateRelays(relays);
+    }
+
+    if (relays.length === 0) {
+      relays = (await this.fetchOnlineRelays()).filter(find);
+      for (const r of relays) {
+        this.db.save(r);
+      }
+    }
+
+    return filterDuplicateRelays(relays).sort(
+      (a, b) => RelayTracker.success_rate(a) - RelayTracker.success_rate(b),
+    );
+  }
+
   static async benchmark(
     urls: string[],
     progressCb?: (rest: number) => any,

src/pages/relay-manager/components/RelayPool/index.tsx

@@ -14,15 +14,16 @@ import {
   TableCell,
 } from 'components/shared/ui/Table';
 import { Relay } from 'core/relay/type';
-import useAllRelaysQuery, {
-  useGetAllRelaysCountQuery,
-} from 'pages/relay-manager/hooks/useGetAllRelaysQuery';
 import { FaCircle } from 'react-icons/fa6';
 import { cn } from 'utils/classnames';
 import { Pagination } from 'components/shared/Pagination';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Button } from 'components/shared/ui/Button';
 import { toast } from 'components/shared/ui/Toast/use-toast';
+import useAllRelaysQuery, {
+  useGetAllRelaysCountQuery,
+} from 'pages/relay-manager/hooks/useGetAllRelaysQuery';
+import useFindRelaysByKeywordQuery from 'pages/relay-manager/hooks/useFindRelayByKeywordQuery';
 import CopyToGroupModal from '../CopyToGroupModal';
 import useCopyRelaysMutation from 'pages/relay-manager/hooks/useCopyRelaysMutation';
 
@@ -110,14 +111,39 @@ export const columns: ColumnDef<Relay>[] = [
   },
 ];
 
-export default function RelayPool() {
+export interface RelayPoolProp {
+  keyword?: string;
+}
+
+export default function RelayPool({ keyword }: RelayPoolProp) {
   const [pageIndex, setPageIndex] = useState(1);
-  const { data: relays = [] } = useAllRelaysQuery(pageIndex, 20);
-  const { data: totalCount = 0 } = useGetAllRelaysCountQuery();
+
+  const limit = 20;
+  const isSearching = useMemo(() => keyword && keyword.length > 0, [keyword]);
+
+  const { data: searchResult } = useFindRelaysByKeywordQuery(
+    keyword,
+    pageIndex,
+    limit,
+  );
+  const { data: relays = [] } = useAllRelaysQuery(pageIndex, limit);
+  const { data: getAllTotalCount = 0 } = useGetAllRelaysCountQuery();
+
+  const pageCount = useMemo(() => {
+    const totalCount = isSearching
+      ? (searchResult?.[1] as number)
+      : getAllTotalCount;
+    return Math.ceil(totalCount / 20);
+  }, [isSearching, searchResult, getAllTotalCount]);
+
+  const tableData = useMemo(() => {
+    return isSearching ? (searchResult?.[0] as Relay[]) || [] : relays;
+  }, [isSearching, searchResult, relays]);
+
   const copyMutation = useCopyRelaysMutation();
 
   const table = useReactTable({
-    data: relays,
+    data: tableData,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
@@ -190,7 +216,7 @@ export default function RelayPool() {
         <div className="flex mt-8 mb-20 justify-center">
           <Pagination
             pageIndex={pageIndex}
-            pageCount={Math.ceil(totalCount / 20)}
+            pageCount={pageCount}
             onPageChange={(page: number) => setPageIndex(page)}
           />
         </div>

src/pages/relay-manager/explore.page.tsx

@@ -4,9 +4,12 @@ import { useRouter } from 'next/router';
 import { FaSearch } from 'react-icons/fa';
 import { FaArrowLeft } from 'react-icons/fa6';
 import RelayPool from './components/RelayPool';
+import { useState } from 'react';
+import { Input } from 'components/shared/ui/Input';
 
 export default function RelayExplorePage() {
   const router = useRouter();
+  const [keyword, setKeyword] = useState<string>();
 
   return (
     <BaseLayout>
@@ -24,13 +27,15 @@ export default function RelayExplorePage() {
             </div>
             <div className="w-[200px] bg-surface-02 border border-border-01 border-solid flex items-center gap-1 px-3 py-2 rounded-full">
               <FaSearch className="h-4 w-4 text-text-secondary" />
-              <input
+              <Input
                 className="flex-1 border-none outline-none body text-md"
                 placeholder="Search Relay..."
+                value={keyword}
+                onChange={e => setKeyword(e.currentTarget.value)}
               />
             </div>
           </div>
-          <RelayPool />
+          <RelayPool keyword={keyword} />
         </div>
       </Left>
     </BaseLayout>

src/pages/relay-manager/hooks/useFindRelayByKeywordQuery.tsx

@@ -0,0 +1,26 @@
+import { useRelayPool } from 'hooks/relay/useRelayManagerContext';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useFindRelaysByKeywordQuery(
+  keyword: string | undefined,
+  page = 1,
+  limit = 10,
+) {
+  const relayPool = useRelayPool();
+
+  const queryResult = useQuery({
+    enabled: typeof keyword === 'string' && keyword.length > 0,
+    queryKey: ['allRelays', keyword, page, limit],
+    queryFn: async () => {
+      if (!keyword) return [[], 0];
+
+      const relays = await relayPool.findRelays(keyword);
+      const start = (page - 1) * limit;
+      const end = start + limit;
+      const relaysInPage = relays.slice(start, end);
+      return [relaysInPage, relays.length];
+    },
+  });
+
+  return queryResult;
+}