website refactor

apps/website/app/races/[id]/RaceDetailPageClient.tsx

@@ -1,83 +1,79 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { RaceDetailTemplate, type RaceDetailViewData } from '@/templates/RaceDetailTemplate';
+import React, { useState, useCallback } from 'react';
+import { RaceDetailTemplate, RaceDetailViewData } from '@/templates/RaceDetailTemplate';
+import { useRouter } from 'next/navigation';
 
-interface RaceDetailPageClientProps {
-  viewData: RaceDetailViewData;
-  onBack: () => void;
-  onRegister: () => void;
-  onWithdraw: () => void;
-  onCancel: () => void;
-  onReopen: () => void;
-  onEndRace: () => void;
-  onFileProtest: () => void;
-  onResultsClick: () => void;
-  onStewardingClick: () => void;
-  onLeagueClick: (id: string) => void;
-  onDriverClick: (id: string) => void;
-  isOwnerOrAdmin: boolean;
+interface Props {
+  data: RaceDetailViewData;
 }
 
-export function RaceDetailPageClient({
-  viewData,
-  onBack,
-  onRegister,
-  onWithdraw,
-  onCancel,
-  onReopen,
-  onEndRace,
-  onFileProtest,
-  onResultsClick,
-  onStewardingClick,
-  onLeagueClick,
-  onDriverClick,
-  isOwnerOrAdmin
-}: RaceDetailPageClientProps) {
-  const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
+export default function RaceDetailPageClient({ data: viewData }: Props) {
+  const router = useRouter();
+  const [animatedRatingChange] = useState(0);
 
-  const ratingChange = viewData.userResult?.ratingChange ?? null;
+  const handleBack = useCallback(() => {
+    router.back();
+  }, [router]);
 
-  useEffect(() => {
-    if (ratingChange !== null) {
-      let start = 0;
-      const end = ratingChange;
-      const duration = 1000;
-      const startTime = performance.now();
+  const handleRegister = useCallback(() => {
+    console.log('Register');
+  }, []);
 
-      const animate = (currentTime: number) => {
-        const elapsed = currentTime - startTime;
-        const progress = Math.min(elapsed / duration, 1);
-        const eased = 1 - Math.pow(1 - progress, 3);
-        const current = Math.round(start + (end - start) * eased);
-        setAnimatedRatingChange(current);
+  const handleWithdraw = useCallback(() => {
+    console.log('Withdraw');
+  }, []);
 
-        if (progress < 1) {
-          requestAnimationFrame(animate);
-        }
-      };
+  const handleCancel = useCallback(() => {
+    console.log('Cancel');
+  }, []);
 
-      requestAnimationFrame(animate);
-    }
-  }, [ratingChange]);
+  const handleReopen = useCallback(() => {
+    console.log('Reopen');
+  }, []);
+
+  const handleEndRace = useCallback(() => {
+    console.log('End Race');
+  }, []);
+
+  const handleFileProtest = useCallback(() => {
+    console.log('File Protest');
+  }, []);
+
+  const handleResultsClick = useCallback(() => {
+    router.push(`/races/${viewData.race.id}/results`);
+  }, [router, viewData.race.id]);
+
+  const handleStewardingClick = useCallback(() => {
+    router.push(`/races/${viewData.race.id}/stewarding`);
+  }, [router, viewData.race.id]);
+
+  const handleLeagueClick = useCallback((leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  }, [router]);
+
+  const handleDriverClick = useCallback((driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  }, [router]);
 
   return (
     <RaceDetailTemplate
       viewData={viewData}
       isLoading={false}
-      onBack={onBack}
-      onRegister={onRegister}
-      onWithdraw={onWithdraw}
-      onCancel={onCancel}
-      onReopen={onReopen}
-      onEndRace={onEndRace}
-      onFileProtest={onFileProtest}
-      onResultsClick={onResultsClick}
-      onStewardingClick={onStewardingClick}
-      onLeagueClick={onLeagueClick}
-      onDriverClick={onDriverClick}
-      isOwnerOrAdmin={isOwnerOrAdmin}
+      error={null}
+      onBack={handleBack}
+      onRegister={handleRegister}
+      onWithdraw={handleWithdraw}
+      onCancel={handleCancel}
+      onReopen={handleReopen}
+      onEndRace={handleEndRace}
+      onFileProtest={handleFileProtest}
+      onResultsClick={handleResultsClick}
+      onStewardingClick={handleStewardingClick}
+      onLeagueClick={handleLeagueClick}
+      onDriverClick={handleDriverClick}
       animatedRatingChange={animatedRatingChange}
+      mutationLoading={{}}
     />
   );
 }