Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-09-09 01:16:18 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Link DiscoverBrowser sort with query params

Browse Source
This commit is contained in:
Jared Schoeny
2025-12-18 02:19:56 -10:00
parent 41d0a1e573
commit 72ec1be6d3
2 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Discover/DiscoverBrowser.tsx
View File

@@ -13,15 +13,24 @@ import { CATEGORY_ICONS } from "@/components/Icons/tagCategories";
import { useBaseRoms } from "@/contexts/BaseRomContext";
import { sortOrderedTags, OrderedTag, getCoverUrls } from "@/utils/format";
import { HackCardAttributes } from "@/components/HackCard";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
const HACKS_PER_PAGE = 9;
export default function DiscoverBrowser() {
interface DiscoverBrowserProps {
initialSort?: string;
}
export default function DiscoverBrowser({ initialSort = "popular" }: DiscoverBrowserProps) {
const supabase = createClient();
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const [query, setQuery] = React.useState("");
const [selectedTags, setSelectedTags] = React.useState<string[]>([]);
const [selectedBaseRoms, setSelectedBaseRoms] = React.useState<string[]>([]);
const [sort, setSort] = React.useState("popular");
const [sort, setSort] = React.useState(initialSort);
const [hacks, setHacks] = React.useState<HackCardAttributes[]>([]);
const [tagGroups, setTagGroups] = React.useState<Record<string, string[]>>({});
const [ungroupedTags, setUngroupedTags] = React.useState<string[]>([]);
@@ -301,7 +310,16 @@ export default function DiscoverBrowser() {
</div>
<select
value={sort}
onChange={(e) => setSort(e.target.value)}
onChange={(e) => {
const nextSort = e.target.value;
setSort(nextSort);
// Keep URL query param in sync so refresh/back preserves sort
const current = searchParams ? new URLSearchParams(searchParams.toString()) : new URLSearchParams();
current.set("sort", nextSort);
const queryString = current.toString();
const url = queryString ? `${pathname}?${queryString}` : pathname;
router.replace(url);
}}
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
>
<option value="popular">Most popular</option>