fix(admin): use useTranslation hook in client components
continuous-integration/drone/push Build is passing Details

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.
master
Guillermo Pages 1 month ago
parent 9f47dab8d8
commit 4df827bce6

@ -5,13 +5,10 @@ import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { getAdminClubs } from '@/src/lib/api/admin-clubs'; import { getAdminClubs } from '@/src/lib/api/admin-clubs';
import type { AdminClubsResponse, AdminApiError } from '@/src/types/admin-api'; import type { AdminClubsResponse, AdminApiError } from '@/src/types/admin-api';
import useTranslation from '@/src/hooks/useTranslation';
interface AdminClubsListProps { export default function AdminClubsList() {
locale: string; const { t, locale } = useTranslation();
t: (key: string) => string;
}
export default function AdminClubsList({ locale, t }: AdminClubsListProps) {
const [clubs, setClubs] = useState<AdminClubsResponse | null>(null); const [clubs, setClubs] = useState<AdminClubsResponse | null>(null);
const [error, setError] = useState<AdminApiError | null>(null); const [error, setError] = useState<AdminApiError | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);

@ -5,14 +5,14 @@ import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { getAdminClubDetail } from '@/src/lib/api/admin-clubs'; import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
import type { AdminClubDetail, AdminApiError } from '@/src/types/admin-api'; import type { AdminClubDetail, AdminApiError } from '@/src/types/admin-api';
import useTranslation from '@/src/hooks/useTranslation';
interface AdminClubDetailProps { interface AdminClubDetailProps {
clubId: number; 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 [clubDetail, setClubDetail] = useState<AdminClubDetail | null>(null);
const [error, setError] = useState<AdminApiError | null>(null); const [error, setError] = useState<AdminApiError | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);

@ -1,15 +1,12 @@
import { Locale } from '@/i18n-config';
import { getTranslate } from '../../../dictionaries';
import AdminClubDetailComponent from './AdminClubDetail'; import AdminClubDetailComponent from './AdminClubDetail';
export default async function AdminClubDetailPage({ export default async function AdminClubDetailPage({
params params
}: { }: {
params: Promise<{ locale: Locale; club_id: string }> params: Promise<{ club_id: string }>
}) { }) {
const { locale, club_id } = await params; const { club_id } = await params;
const {t} = await getTranslate(locale);
const clubId = parseInt(club_id, 10); const clubId = parseInt(club_id, 10);
return <AdminClubDetailComponent clubId={clubId} locale={locale} t={t} />; return <AdminClubDetailComponent clubId={clubId} />;
} }

@ -1,10 +1,5 @@
import { Locale } from '@/i18n-config';
import { getTranslate } from '../../dictionaries';
import AdminClubsList from './AdminClubsList'; import AdminClubsList from './AdminClubsList';
export default async function AdminClubsPage({ params }: { params: Promise<{ locale: Locale }>}) { export default async function AdminClubsPage() {
const { locale } = await params; return <AdminClubsList />;
const {t} = await getTranslate(locale);
return <AdminClubsList locale={locale} t={t} />;
} }

Loading…
Cancel
Save