website refactor

apps/website/app/leagues/[id]/layout.tsx

@@ -1,45 +1,40 @@
-'use client';
+import { notFound } from 'next/navigation';
+import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
+import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import LeagueHeader from '@/components/leagues/LeagueHeader';
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useLeagueDetail } from "@/lib/hooks/league/useLeagueDetail";
-import { useParams, usePathname, useRouter } from 'next/navigation';
-import React from 'react';
-
-export default function LeagueLayout({
+export default async function LeagueLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: { id: string };
 }) {
-  const params = useParams();
-  const pathname = usePathname();
-  const router = useRouter();
-  const leagueId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-
-  const { data: leagueDetail, isLoading: loading } = useLeagueDetail({ leagueId });
-
-  if (loading) {
+  const leagueId = params.id;
+  
+  // Execute PageQuery to get league data
+  const result = await LeagueDetailPageQuery.execute(leagueId);
+  
+  if (result.isErr()) {
+    const error = result.getError();
+    if (error === 'notFound' || error === 'redirect') {
+      notFound();
+    }
+    // Return error state
     return (
-      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center text-gray-400">Loading league...</div>
-        </div>
-      </div>
+      <LeagueDetailTemplate
+        leagueId={leagueId}
+        leagueName="Error"
+        leagueDescription="Failed to load league"
+        tabs={[]}
+      >
+        <div className="text-center text-gray-400">Failed to load league</div>
+      </LeagueDetailTemplate>
     );
   }
-
-  if (!leagueDetail) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center text-gray-400">League not found</div>
-        </div>
-      </div>
-    );
-  }
-
+  
+  const data = result.unwrap();
+  const league = data.league;
+  
   // Define tab configuration
   const baseTabs = [
     { label: 'Overview', href: `/leagues/${leagueId}`, exact: true },
@@ -61,46 +56,13 @@ export default function LeagueLayout({
   const tabs = [...baseTabs, ...adminTabs];
 
   return (
-    <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-6xl mx-auto">
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Leagues', href: '/leagues' },
-            { label: leagueDetail.name },
-          ]}
-        />
-
-        <LeagueHeader
-          leagueId={leagueDetail.id}
-          leagueName={leagueDetail.name}
-          description={leagueDetail.description}
-          ownerId={leagueDetail.ownerId}
-          ownerName={''}
-          mainSponsor={null}
-        />
-
-        {/* Tab Navigation */}
-        <div className="mb-6 border-b border-charcoal-outline">
-          <div className="flex gap-6 overflow-x-auto">
-            {tabs.map((tab) => (
-              <button
-                key={tab.href}
-                onClick={() => router.push(tab.href)}
-                className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                  (tab.exact ? pathname === tab.href : pathname.startsWith(tab.href))
-                    ? 'text-primary-blue border-b-2 border-primary-blue'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div>{children}</div>
-      </div>
-    </div>
+    <LeagueDetailTemplate
+      leagueId={leagueId}
+      leagueName={league.name}
+      leagueDescription={league.description}
+      tabs={tabs}
+    >
+      {children}
+    </LeagueDetailTemplate>
   );
-}
+}