feat(explorer): filters groups using query parameters

Groups and groups belonging to a specified admin can now be filtered via query parameters. Additionally, the query parameters are reflected within the input element. re semaphore-protocol#25
tb38r · Dec 14, 2024 · 4d2d38e · 4d2d38e
1 parent 875ea4a
commit 4d2d38e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/apps/explorer/src/app/[network]/page.tsx b/apps/explorer/src/app/[network]/page.tsx
@@ -16,10 +16,8 @@ export default function Network() {
 
     const searchParams = useSearchParams()
     const adminParam = useMemo(() => new URLSearchParams(searchParams).get("admin"), [searchParams.toString()])
-    const groupIdParam = useMemo(() => new URLSearchParams(searchParams).get("groupid"), [searchParams.toString()]) // const [adminParam, ] = useState(new URLSearchParams(searchParams).get("admin"))
-    // console.log("group", groupIdParam)
-    // const [groupIdParam,] = useState(new URLSearchParams(searchParams).get("groupid"))
-    // console.log("group", groupIdParam)
+    const groupIdParam = useMemo(() => new URLSearchParams(searchParams).get("groupid"), [searchParams.toString()])
+    const queryParam = adminParam || groupIdParam
 
     useEffect(() => {
         const fetchData = async () => {
@@ -44,17 +42,14 @@ export default function Network() {
     const filterGroups = useCallback(
         (groupIdOrAdmin: string) => {
             let groups: GroupResponse[]
-            if (groupIdParam) {
-                groups = allGroups.filter((group) => (!groupIdOrAdmin ? true : group.id === groupIdOrAdmin))
-            } else if (adminParam) {
-                groups = allGroups.filter((group) => (!groupIdOrAdmin ? true : group.admin === groupIdOrAdmin))
-            } else if (groupIdOrAdmin.startsWith("0x")) {
+            if (groupIdOrAdmin.startsWith("0x")) {
                 groupIdOrAdmin = groupIdOrAdmin.toLowerCase()
-                groups = allGroups.filter((group) => (!groupIdOrAdmin ? true : group.admin?.includes(groupIdOrAdmin)))
+                groups = allGroups.filter((group) => group.admin?.includes(groupIdOrAdmin))
             } else {
-                groups = allGroups.filter((group) => (!groupIdOrAdmin ? true : group.id.includes(groupIdOrAdmin)))
+                groups = allGroups.filter(
+                    (group) => group.id.includes(groupIdOrAdmin) || group.admin === groupIdOrAdmin
+                )
             }
-
             setFilteredGroups(groups)
         },
         [allGroups]
@@ -71,7 +66,12 @@ export default function Network() {
     ) : (
         allGroups && (
             <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
-                <SearchBar className="mb-6" placeholder="Group ID, Admin" onChange={filterGroups} />
+                <SearchBar
+                    className="mb-6"
+                    placeholder="Group ID, Admin"
+                    onChange={filterGroups}
+                    queryParam={queryParam}
+                />
 
                 <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]">
                     <ul className="divide-y divide-gray-300 min-w-xl">

diff --git a/apps/explorer/src/components/SearchBar.tsx b/apps/explorer/src/components/SearchBar.tsx
@@ -1,19 +1,34 @@
 "use client"
 
 import { FaSearch } from "react-icons/fa"
+import { useState, useEffect, ChangeEvent } from "react"
+
+export default function SearchBar({ placeholder, onChange, className, queryParam }: any) {
+    const [searchQuery, setSearchQuery] = useState("")
+    useEffect(() => {
+        if (queryParam) {
+            setSearchQuery(queryParam)
+        }
+    }, [queryParam])
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target
+        setSearchQuery(value)
+        onChange(value)
+    }
 
-export default function SearchBar({ placeholder, onChange, className }: any) {
     return (
         <div className={`relative mt-2 rounded-md shadow-sm ${className}`}>
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                 <FaSearch className="text-gray-600" />
             </div>
             <input
-                onChange={(event) => onChange(event.target.value)}
+                onChange={handleInputChange}
                 name="search-bar"
                 type="text"
                 placeholder={placeholder}
                 className="block w-full rounded-md border-0 py-1.5 pl-9 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none text-sm sm:leading-6"
+                value={searchQuery}
             />
         </div>
     )