From 4df827bce64b22b18b08dd83077d7edff63ca016 Mon Sep 17 00:00:00 2001
From: Guillermo Pages <mail@guillermo.at>
Date: Fri, 7 Nov 2025 07:44:48 +0100
Subject: [PATCH] fix(admin): use useTranslation hook in client components

Build #6 failed because client components were trying to receive
translations as props from server components, which breaks Next.js
serialization boundaries.

Fix: Use useTranslation() hook directly in client components to access
translations context, matching the pattern used in consumer app.

Changes:
- AdminClubsList: Remove locale/t props, use useTranslation() hook
- AdminClubDetail: Remove locale/t props, use useTranslation() hook
- Simplified page.tsx wrappers to not pass translations

This matches the consumer app pattern and allows proper SSR/client
component boundaries.
---
 src/app/[locale]/admin/clubs/AdminClubsList.tsx          | 9 +++------
 .../[locale]/admin/clubs/[club_id]/AdminClubDetail.tsx   | 6 +++---
 src/app/[locale]/admin/clubs/[club_id]/page.tsx          | 9 +++------
 src/app/[locale]/admin/clubs/page.tsx                    | 9 ++-------
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/app/[locale]/admin/clubs/AdminClubsList.tsx b/src/app/[locale]/admin/clubs/AdminClubsList.tsx
index 0bcd677..d754fb6 100644
--- a/src/app/[locale]/admin/clubs/AdminClubsList.tsx
+++ b/src/app/[locale]/admin/clubs/AdminClubsList.tsx
@@ -5,13 +5,10 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { getAdminClubs } from '@/src/lib/api/admin-clubs';
 import type { AdminClubsResponse, AdminApiError } from '@/src/types/admin-api';
+import useTranslation from '@/src/hooks/useTranslation';
 
-interface AdminClubsListProps {
-  locale: string;
-  t: (key: string) => string;
-}
-
-export default function AdminClubsList({ locale, t }: AdminClubsListProps) {
+export default function AdminClubsList() {
+  const { t, locale } = useTranslation();
   const [clubs, setClubs] = useState<AdminClubsResponse | null>(null);
   const [error, setError] = useState<AdminApiError | null>(null);
   const [loading, setLoading] = useState(true);
diff --git a/src/app/[locale]/admin/clubs/[club_id]/AdminClubDetail.tsx b/src/app/[locale]/admin/clubs/[club_id]/AdminClubDetail.tsx
index e86a593..27aa527 100644
--- a/src/app/[locale]/admin/clubs/[club_id]/AdminClubDetail.tsx
+++ b/src/app/[locale]/admin/clubs/[club_id]/AdminClubDetail.tsx
@@ -5,14 +5,14 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
 import type { AdminClubDetail, AdminApiError } from '@/src/types/admin-api';
+import useTranslation from '@/src/hooks/useTranslation';
 
 interface AdminClubDetailProps {
   clubId: number;
-  locale: string;
-  t: (key: string) => string;
 }
 
-export default function AdminClubDetailComponent({ clubId, locale, t }: AdminClubDetailProps) {
+export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProps) {
+  const { t, locale } = useTranslation();
   const [clubDetail, setClubDetail] = useState<AdminClubDetail | null>(null);
   const [error, setError] = useState<AdminApiError | null>(null);
   const [loading, setLoading] = useState(true);
diff --git a/src/app/[locale]/admin/clubs/[club_id]/page.tsx b/src/app/[locale]/admin/clubs/[club_id]/page.tsx
index 0d0de1e..41c5935 100644
--- a/src/app/[locale]/admin/clubs/[club_id]/page.tsx
+++ b/src/app/[locale]/admin/clubs/[club_id]/page.tsx
@@ -1,15 +1,12 @@
-import { Locale } from '@/i18n-config';
-import { getTranslate } from '../../../dictionaries';
 import AdminClubDetailComponent from './AdminClubDetail';
 
 export default async function AdminClubDetailPage({
   params
 }: {
-  params: Promise<{ locale: Locale; club_id: string }>
+  params: Promise<{ club_id: string }>
 }) {
-  const { locale, club_id } = await params;
-  const {t} = await getTranslate(locale);
+  const { club_id } = await params;
   const clubId = parseInt(club_id, 10);
 
-  return <AdminClubDetailComponent clubId={clubId} locale={locale} t={t} />;
+  return <AdminClubDetailComponent clubId={clubId} />;
 }
diff --git a/src/app/[locale]/admin/clubs/page.tsx b/src/app/[locale]/admin/clubs/page.tsx
index e0dff73..84c7229 100644
--- a/src/app/[locale]/admin/clubs/page.tsx
+++ b/src/app/[locale]/admin/clubs/page.tsx
@@ -1,10 +1,5 @@
-import { Locale } from '@/i18n-config';
-import { getTranslate } from '../../dictionaries';
 import AdminClubsList from './AdminClubsList';
 
-export default async function AdminClubsPage({ params }: { params: Promise<{ locale: Locale }>}) {
-  const { locale } = await params;
-  const {t} = await getTranslate(locale);
-
-  return <AdminClubsList locale={locale} t={t} />;
+export default async function AdminClubsPage() {
+  return <AdminClubsList />;
 }