From 875ea4a53c6d30d49413671350867fa9126432b6 Mon Sep 17 00:00:00 2001 From: Tolu Date: Sat, 14 Dec 2024 13:39:23 +0000 Subject: [PATCH 1/2] feat(explorer): filter content using query params Content can now be filtered using either the params groupid or admin re #25 --- apps/explorer/src/app/[network]/page.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/apps/explorer/src/app/[network]/page.tsx b/apps/explorer/src/app/[network]/page.tsx index f1ca09b..381baff 100644 --- a/apps/explorer/src/app/[network]/page.tsx +++ b/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([]) const [filteredGroups, setFilteredGroups] = useState([]) - 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 ? (
From 4d2d38e20c8dc6ee6e4088361e42958e06bbb086 Mon Sep 17 00:00:00 2001 From: Tolu Date: Sat, 14 Dec 2024 15:29:48 +0000 Subject: [PATCH 2/2] 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 #25 --- apps/explorer/src/app/[network]/page.tsx | 26 +++++++++++----------- apps/explorer/src/components/SearchBar.tsx | 19 ++++++++++++++-- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/apps/explorer/src/app/[network]/page.tsx b/apps/explorer/src/app/[network]/page.tsx index 381baff..b650d3f 100644 --- 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 && (
- +
    diff --git a/apps/explorer/src/components/SearchBar.tsx b/apps/explorer/src/components/SearchBar.tsx index bca2887..b72b0fa 100644 --- 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) => { + const { value } = event.target + setSearchQuery(value) + onChange(value) + } -export default function SearchBar({ placeholder, onChange, className }: any) { return (
    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} />
    )