feat(explorer): filter content using query params

Content can now be filtered using either the params groupid or admin

re semaphore-protocol#25

apps/explorer/src/app/[network]/page.tsx

@@ -2,8 +2,8 @@
 
 import { GroupResponse, SemaphoreSubgraph } from "@semaphore-protocol/data"
 import { SupportedNetwork } from "@semaphore-protocol/utils"
-import { usePathname } from "next/navigation"
-import { useCallback, useEffect, useState } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+import { useCallback, useEffect, useState, useMemo } from "react"
 import SearchBar from "@/components/SearchBar"
 
 export default function Network() {
@@ -12,9 +12,15 @@ export default function Network() {
 
     const [allGroups, setAllGroups] = useState<GroupResponse[]>([])
     const [filteredGroups, setFilteredGroups] = useState<GroupResponse[]>([])
-
     const [loading, setLoading] = useState(false)
 
+    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)
+
     useEffect(() => {
         const fetchData = async () => {
             setLoading(true)
@@ -38,7 +44,11 @@ export default function Network() {
     const filterGroups = useCallback(
         (groupIdOrAdmin: string) => {
             let groups: GroupResponse[]
-            if (groupIdOrAdmin.startsWith("0x")) {
+            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")) {
                 groupIdOrAdmin = groupIdOrAdmin.toLowerCase()
                 groups = allGroups.filter((group) => (!groupIdOrAdmin ? true : group.admin?.includes(groupIdOrAdmin)))
             } else {
@@ -50,6 +60,10 @@ export default function Network() {
         [allGroups]
     )
 
+    useEffect(() => {
+        filterGroups(adminParam || groupIdParam || "")
+    }, [adminParam, groupIdParam, filterGroups])
+
     return loading ? (
         <div className="flex justify-center items-center h-screen">
             <div className="loader" />