website refactor

apps/website/app/404/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
 import { routes } from '@/lib/routing/RouteConfig';

apps/website/app/500/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
 import { routes } from '@/lib/routing/RouteConfig';

apps/website/app/auth/login/LoginClient.tsx

@@ -9,7 +9,7 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useAuth } from '@/lib/auth/AuthContext';
+import { useAuth } from '@/components/auth/AuthContext';
 import { LoginFlowController, LoginState } from '@/lib/auth/LoginFlowController';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { LoginTemplate } from '@/templates/auth/LoginTemplate';

apps/website/app/auth/signup/SignupClient.tsx

@@ -8,7 +8,7 @@
 
 import { useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useAuth } from '@/lib/auth/AuthContext';
+import { useAuth } from '@/components/auth/AuthContext';
 import { SignupViewData } from '@/lib/builders/view-data/types/SignupViewData';
 import { SignupTemplate } from '@/templates/auth/SignupTemplate';
 import { SignupMutation } from '@/lib/mutations/auth/SignupMutation';

apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx

@@ -34,7 +34,6 @@ export function LeagueAdminSchedulePageClient() {
   const [seasonId, setSeasonId] = useState<string>('');
   const [form, setForm] = useState(() => new RaceScheduleCommandModel());
   const [editingRaceId, setEditingRaceId] = useState<string | null>(null);
-  const [errors, setErrors] = useState<Record<string, string>>({});
 
   // Action state
   const [isPublishing, setIsPublishing] = useState(false);
@@ -60,7 +59,6 @@ export function LeagueAdminSchedulePageClient() {
     setSeasonId(newSeasonId);
     setEditingRaceId(null);
     setForm(new RaceScheduleCommandModel());
-    setErrors({});
   };
 
   const handlePublishToggle = async () => {
@@ -87,7 +85,6 @@ export function LeagueAdminSchedulePageClient() {
     
     const validationErrors = form.validate();
     if (Object.keys(validationErrors).length > 0) {
-      setErrors(validationErrors as Record<string, string>);
       return;
     }
     
@@ -100,7 +97,6 @@ export function LeagueAdminSchedulePageClient() {
       if (result.isOk()) {
         // Reset form
         setForm(new RaceScheduleCommandModel());
-        setErrors({});
         setEditingRaceId(null);
         router.refresh();
       } else {
@@ -122,7 +118,6 @@ export function LeagueAdminSchedulePageClient() {
       car: race.car || '',
       scheduledAtIso: race.scheduledAt.toISOString(),
     }));
-    setErrors({});
   };
 
   const handleDelete = async (raceId: string) => {
@@ -146,7 +141,6 @@ export function LeagueAdminSchedulePageClient() {
   const handleCancelEdit = () => {
     setEditingRaceId(null);
     setForm(new RaceScheduleCommandModel());
-    setErrors({});
   };
 
   // Derived states

apps/website/app/leagues/create/CreateLeagueWizard.tsx

@@ -9,7 +9,7 @@ import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
-import { useAuth } from '@/lib/auth/AuthContext';
+import { useAuth } from '@/components/auth/AuthContext';
 import {
   AlertCircle,
   Award,

apps/website/app/leagues/create/page.tsx

@@ -14,7 +14,7 @@ export default function CreateLeaguePage() {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const wizardParams = SearchParamParser.parseWizard(searchParams as any).unwrap();
+  const wizardParams = SearchParamParser.parseWizard(searchParams as unknown as URLSearchParams).unwrap();
   const rawStep = wizardParams.step;
 
   let currentStepName: StepName = 'basics';

apps/website/app/onboarding/OnboardingWizardClient.tsx

@@ -4,7 +4,7 @@ import { OnboardingWizard } from '@/components/onboarding/OnboardingWizard';
 import { routes } from '@/lib/routing/RouteConfig';
 import { completeOnboardingAction } from '@/app/onboarding/completeOnboardingAction';
 import { generateAvatarsAction } from '@/app/onboarding/generateAvatarsAction';
-import { useAuth } from '@/lib/auth/AuthContext';
+import { useAuth } from '@/components/auth/AuthContext';
 
 export function OnboardingWizardClient() {
   const { session } = useAuth();

apps/website/app/races/all/RacesAllPageClient.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
 import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
-import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
+import { useAllRacesPageData } from '@/hooks/race/useAllRacesPageData';
 import { type RacesViewData, type RaceViewData } from '@/lib/view-data/RacesViewData';
 import { Flag } from 'lucide-react';
 
@@ -12,7 +12,7 @@ import { routes } from '@/lib/routing/RouteConfig';
 
 const ITEMS_PER_PAGE = 10;
 
-export function RacesAllPageClient({ initialViewData }: { initialViewData: unknown }) {
+export function RacesAllPageClient({ initialViewData }: { initialViewData: RacesViewData | null }) {
   const router = useRouter();
   
   // Client-side state for filters and pagination
@@ -23,38 +23,8 @@ export function RacesAllPageClient({ initialViewData }: { initialViewData: unkno
   const [showFilters, setShowFilters] = useState(false);
   const [showFilterModal, setShowFilterModal] = useState(false);
 
-  // Data state
-  const [pageData, setPageData] = useState<RacesViewData | null>(initialViewData as RacesViewData);
-  const [isLoading, setIsLoading] = useState(!initialViewData);
-  const [error, setError] = useState<Error | null>(null);
-
-  // Fetch data
-  const fetchData = useCallback(async () => {
-    if (pageData && !isLoading) return; // Already have data from server
-    setIsLoading(true);
-    setError(null);
-    
-    try {
-      const result = await RacesAllPageQuery.execute();
-      
-      if (result.isErr()) {
-        throw new globalThis.Error('Failed to fetch races');
-      }
-      
-      setPageData(result.unwrap() as unknown as RacesViewData);
-    } catch (err) {
-      setError(err instanceof globalThis.Error ? err : new globalThis.Error('Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [pageData, isLoading]);
-
-  // Fetch on mount if no initial data
-  useEffect(() => {
-    if (!initialViewData) {
-      fetchData();
-    }
-  }, [initialViewData, fetchData]);
+  // Use React Query hook
+  const { data: pageData, isLoading, error, refetch } = useAllRacesPageData(initialViewData);
 
   // Transform data
   const races: RaceViewData[] = pageData?.races ?? [];
@@ -102,8 +72,8 @@ export function RacesAllPageClient({ initialViewData }: { initialViewData: unkno
     <StatefulPageWrapper
       data={pageData}
       isLoading={isLoading}
-      error={error}
-      retry={fetchData}
+      error={error as Error | null}
+      retry={refetch}
       Template={() => pageData ? (
         <RacesAllTemplate
           viewData={pageData}

apps/website/app/teams/leaderboard/TeamLeaderboardPageWrapper.tsx

@@ -28,17 +28,22 @@ export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewMode
     router.push('/teams');
   };
 
+  const viewData = {
+    teams: data,
+    searchQuery,
+    filterLevel,
+    sortBy,
+    filteredAndSortedTeams: data,
+  };
+
   return (
     <TeamLeaderboardTemplate
-      teams={data}
-      searchQuery={searchQuery}
-      filterLevel={filterLevel}
-      sortBy={sortBy}
+      viewData={viewData}
       onSearchChange={setSearchQuery}
-      onFilterLevelChange={setFilterLevel}
+      filterLevelChange={setFilterLevel}
       onSortChange={setSortBy}
       onTeamClick={handleTeamClick}
       onBackToTeams={handleBackToTeams}
     />
   );
-}
+}