website refactor

apps/website/app/leagues/[id]/settings/page.tsx

@@ -1,105 +1,45 @@
-'use client';
+import { LeagueSettingsPageQuery } from '@/lib/page-queries/page-queries/LeagueSettingsPageQuery';
+import { LeagueSettingsTemplate } from '@/templates/LeagueSettingsTemplate';
+import { notFound } from 'next/navigation';
 
-import { ReadonlyLeagueInfo } from '@/components/leagues/ReadonlyLeagueInfo';
-import LeagueOwnershipTransfer from '@/components/leagues/LeagueOwnershipTransfer';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useParams, useRouter } from 'next/navigation';
-
-// Shared state components
-import { StateContainer } from '@/components/shared/state/StateContainer';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
-import { useLeagueAdminStatus } from "@/lib/hooks/league/useLeagueAdminStatus";
-import { useLeagueSettings } from "@/lib/hooks/league/useLeagueSettings";
-import { useInject } from '@/lib/di/hooks/useInject';
-import { LEAGUE_SETTINGS_SERVICE_TOKEN } from '@/lib/di/tokens';
-import { AlertTriangle, Settings } from 'lucide-react';
-
-export default function LeagueSettingsPage() {
-  const params = useParams();
-  const leagueId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-  const leagueSettingsService = useInject(LEAGUE_SETTINGS_SERVICE_TOKEN);
-  const router = useRouter();
-
-  // Check admin status using DI + React-Query
-  const { data: isAdmin, isLoading: adminLoading } = useLeagueAdminStatus(leagueId, currentDriverId ?? '');
-
-  // Load settings (only if admin) using DI + React-Query
-  const { data: settings, isLoading: settingsLoading, error, retry } = useLeagueSettings(leagueId, { enabled: !!isAdmin });
-
-  const handleTransferOwnership = async (newOwnerId: string) => {
-    try {
-      await leagueSettingsService.transferOwnership(leagueId, currentDriverId ?? '', newOwnerId);
-      router.refresh();
-    } catch (err) {
-      throw err; // Let the component handle the error
-    }
-  };
-
-  // Show loading for admin check
-  if (adminLoading) {
-    return <LoadingWrapper variant="full-screen" message="Checking permissions..." />;
-  }
-
-  // Show access denied if not admin
-  if (!isAdmin) {
-    return (
-      <Card>
-        <div className="text-center py-12">
-          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
-            <AlertTriangle className="w-8 h-8 text-warning-amber" />
-          </div>
-          <h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
-          <p className="text-sm text-gray-400">
-            Only league admins can access settings.
-          </p>
-        </div>
-      </Card>
-    );
-  }
-
-  return (
-    <StateContainer
-      data={settings}
-      isLoading={settingsLoading}
-      error={error}
-      retry={retry}
-      config={{
-        loading: { variant: 'spinner', message: 'Loading settings...' },
-        error: { variant: 'full-screen' },
-        empty: {
-          icon: Settings,
-          title: 'No settings available',
-          description: 'Unable to load league configuration.',
-        }
-      }}
-    >
-      {(settingsData) => (
-        <div className="space-y-6">
-          {/* Header */}
-          <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
-              <Settings className="w-6 h-6 text-primary-blue" />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-white">League Settings</h1>
-              <p className="text-sm text-gray-400">Manage your league configuration</p>
-            </div>
-          </div>
-
-          {/* READONLY INFORMATION SECTION - Compact */}
-          <div className="space-y-4">
-            <ReadonlyLeagueInfo league={settingsData!.league} configForm={settingsData!.config} />
-
-            <LeagueOwnershipTransfer
-              settings={settingsData!}
-              currentDriverId={currentDriverId ?? ''}
-              onTransferOwnership={handleTransferOwnership}
-            />
-          </div>
-        </div>
-      )}
-    </StateContainer>
-  );
+interface Props {
+  params: { id: string };
+}
+
+export default async function LeagueSettingsPage({ params }: Props) {
+  const leagueId = params.id;
+
+  if (!leagueId) {
+    notFound();
+  }
+
+  const result = await LeagueSettingsPageQuery.execute(leagueId);
+
+  if (result.isErr()) {
+    const error = result.getError();
+    if (error.type === 'notFound') {
+      notFound();
+    }
+    // For serverError, show the template with empty data
+    return <LeagueSettingsTemplate viewData={{
+      leagueId,
+      league: {
+        id: leagueId,
+        name: 'Unknown League',
+        description: 'League information unavailable',
+        visibility: 'private',
+        ownerId: 'unknown',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+      config: {
+        maxDrivers: 0,
+        scoringPresetId: 'unknown',
+        allowLateJoin: false,
+        requireApproval: false,
+      },
+    }} />;
+  }
+
+  return <LeagueSettingsTemplate viewData={result.unwrap()} />;
 }