Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-04-19 13:37:31 -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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/discover/page.tsx
View File

@ -8,7 +8,18 @@ export const metadata: Metadata = {
},
};
export default function DiscoverPage() {
interface DiscoverPageProps {
searchParams: Promise<Record<string, string | string[] | undefined>>;
};
export default async function DiscoverPage(props: DiscoverPageProps) {
const searchParams = await props.searchParams;
const sortParam = searchParams.sort;
const sort =
typeof sortParam === "string" && ["popular", "new", "updated", "alphabetical"].includes(sortParam)
? sortParam
: "popular"; // Default to popular if no sort param is provided
return (
<div className="mx-auto max-w-screen-2xl px-6 py-10">
<div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
@ -20,7 +31,7 @@ export default function DiscoverPage() {
</div>
</div>
<div className="mt-6">
<DiscoverBrowser />
<DiscoverBrowser initialSort={sort} />
</div>
</div>
);

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>