diff --git a/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx new file mode 100644 index 0000000..259db91 --- /dev/null +++ b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx @@ -0,0 +1,22 @@ +'use client'; + +import { useSearchParams } from 'next/navigation'; + +export function ClanPlayerCount({ + activeCount, + totalCount, +}: { + activeCount: number; + totalCount: number; +}) { + const searchParams = useSearchParams(); + const past = searchParams?.get('past'); + const showPast = past === 'true' || past === '1'; + + return ( + + {activeCount} players + {showPast && ({totalCount})} + + ); +} diff --git a/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx b/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx index fe9b401..24a7337 100644 --- a/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx +++ b/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx @@ -1,9 +1,10 @@ "use client"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; export function PastMembersToggle({ clanName, showPastMembers }: { clanName: string, showPastMembers: boolean }) { const router = useRouter(); + const searchParams = useSearchParams(); return (
@@ -12,7 +13,14 @@ export function PastMembersToggle({ clanName, showPastMembers }: { clanName: str type="checkbox" checked={showPastMembers} onChange={(e) => { - const url = `/clan/${encodeURIComponent(clanName)}${e.target.checked ? '?past=true' : ''}`; + const params = new URLSearchParams(searchParams.toString()); + if (e.target.checked) { + params.set('past', 'true'); + } else { + params.delete('past'); + } + const queryString = params.toString(); + const url = `/clan/${encodeURIComponent(clanName)}${queryString ? `?${queryString}` : ''}`; router.replace(url, { scroll: false }); }} className="cursor-pointer" diff --git a/apps/frontend/app/clan/[clanName]/layout.tsx b/apps/frontend/app/clan/[clanName]/layout.tsx index ce50e6c..5528b03 100644 --- a/apps/frontend/app/clan/[clanName]/layout.tsx +++ b/apps/frontend/app/clan/[clanName]/layout.tsx @@ -4,6 +4,7 @@ import { LayoutTabs } from './LayoutTabs'; import { paramsSchema } from './schema'; import { z } from 'zod'; import { formatPlayTime } from '../../../utils/format'; +import { ClanPlayerCount } from './ClanPlayerCount'; export default async function Index({ params, @@ -19,6 +20,9 @@ export default async function Index({ name: true, playTime: true, activePlayerCount: true, + _count: { + select: { clanPlayerInfos: true }, + }, }, where: { name: clanName, @@ -51,7 +55,10 @@ export default async function Index({

{clan.name}

- {`${clan.activePlayerCount} players`} +