website refactor
This commit is contained in:
84
apps/website/app/drivers/DriversPageClient.tsx
Normal file
84
apps/website/app/drivers/DriversPageClient.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { DriversTemplate } from '@/templates/DriversTemplate';
|
||||
import { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
|
||||
import type { DriversLeaderboardDTO } from '@/lib/types/generated/DriversLeaderboardDTO';
|
||||
import type { DriverLeaderboardItemDTO } from '@/lib/types/generated/DriverLeaderboardItemDTO';
|
||||
|
||||
interface DriversPageClientProps {
|
||||
pageDto: DriversLeaderboardDTO | null;
|
||||
error?: string;
|
||||
empty?: {
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* DriversPageClient
|
||||
*
|
||||
* Client component that:
|
||||
* 1. Handles state (search, filter, sort)
|
||||
* 2. Calls ViewModel to get computed display data
|
||||
* 3. Transforms ViewModel to Template-compatible format
|
||||
* 4. Passes data to Template
|
||||
*/
|
||||
export function DriversPageClient({ pageDto, error, empty }: DriversPageClientProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// Client state
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
// Event handlers
|
||||
const onSearchChange = (query: string) => setSearchQuery(query);
|
||||
const onDriverClick = (id: string) => router.push(`/drivers/${id}`);
|
||||
const onBackToLeaderboards = () => router.push('/leaderboards');
|
||||
|
||||
// Handle error/empty states
|
||||
if (error) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-12 text-center">
|
||||
<div className="text-red-400 mb-4">Error loading drivers</div>
|
||||
<p className="text-gray-400">Please try again later</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!pageDto || pageDto.drivers.length === 0) {
|
||||
if (empty) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-12 text-center">
|
||||
<h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
|
||||
<p className="text-gray-400">{empty.description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Transform DTO to ViewModel
|
||||
const dtoForViewModel: { drivers: DriverLeaderboardItemDTO[] } = {
|
||||
drivers: pageDto.drivers.map(driver => ({
|
||||
...driver,
|
||||
avatarUrl: driver.avatarUrl || '',
|
||||
})),
|
||||
};
|
||||
const viewModel = new DriverLeaderboardViewModel(dtoForViewModel);
|
||||
|
||||
// Filter drivers based on search
|
||||
let filteredDrivers = viewModel.drivers.filter(driver => {
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
const matchesSearch =
|
||||
driver.name.toLowerCase().includes(query) ||
|
||||
driver.nationality.toLowerCase().includes(query);
|
||||
if (!matchesSearch) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Pass to template
|
||||
return <DriversTemplate data={viewModel} />;
|
||||
}
|
||||
92
apps/website/app/drivers/[id]/DriverProfilePageClient.tsx
Normal file
92
apps/website/app/drivers/[id]/DriverProfilePageClient.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
|
||||
import { DriverProfileViewModelBuilder } from '@/lib/builders/view-models/DriverProfileViewModelBuilder';
|
||||
import type { GetDriverProfileOutputDTO } from '@/lib/types/generated/GetDriverProfileOutputDTO';
|
||||
|
||||
interface DriverProfilePageClientProps {
|
||||
pageDto: GetDriverProfileOutputDTO | null;
|
||||
error?: string;
|
||||
empty?: {
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* DriverProfilePageClient
|
||||
*
|
||||
* Client component that:
|
||||
* 1. Handles UI state (tabs, friend requests)
|
||||
* 2. Uses ViewModelBuilder to transform DTO
|
||||
* 3. Passes ViewModel to Template
|
||||
*/
|
||||
export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfilePageClientProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// UI State
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
|
||||
const [friendRequestSent, setFriendRequestSent] = useState(false);
|
||||
|
||||
// Event handlers
|
||||
const handleAddFriend = () => {
|
||||
setFriendRequestSent(true);
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
router.push('/drivers');
|
||||
};
|
||||
|
||||
// Handle error/empty states
|
||||
if (error) {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-4 py-12 text-center">
|
||||
<div className="text-red-400 mb-4">Error loading driver profile</div>
|
||||
<p className="text-gray-400">Please try again later</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!pageDto || !pageDto.currentDriver) {
|
||||
if (empty) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="text-center py-12">
|
||||
<h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
|
||||
<p className="text-gray-400">{empty.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Transform DTO to ViewModel using Builder
|
||||
const viewModel = DriverProfileViewModelBuilder.build(pageDto);
|
||||
|
||||
// Transform teamMemberships for template
|
||||
const allTeamMemberships = pageDto.teamMemberships.map(membership => ({
|
||||
team: {
|
||||
id: membership.teamId,
|
||||
name: membership.teamName,
|
||||
},
|
||||
role: membership.role,
|
||||
joinedAt: new Date(membership.joinedAt),
|
||||
}));
|
||||
|
||||
return (
|
||||
<DriverProfileTemplate
|
||||
driverProfile={viewModel}
|
||||
allTeamMemberships={allTeamMemberships}
|
||||
isLoading={false}
|
||||
error={null}
|
||||
onBackClick={handleBackClick}
|
||||
onAddFriend={handleAddFriend}
|
||||
friendRequestSent={friendRequestSent}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +1,45 @@
|
||||
'use client';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { DriverProfilePageQuery } from '@/lib/page-queries/page-queries/DriverProfilePageQuery';
|
||||
import { DriverProfilePageClient } from './DriverProfilePageClient';
|
||||
|
||||
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
||||
import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
|
||||
import { useDriverProfilePageData } from "@/lib/hooks/driver/useDriverProfilePageData";
|
||||
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
export default async function DriverProfilePage({ params }: { params: { id: string } }) {
|
||||
// Execute the page query
|
||||
const result = await DriverProfilePageQuery.execute(params.id);
|
||||
|
||||
interface DriverProfileData {
|
||||
driverProfile: any;
|
||||
teamMemberships: Array<{
|
||||
team: { id: string; name: string };
|
||||
role: string;
|
||||
joinedAt: Date;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default function DriverProfilePage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const driverId = params.id as string;
|
||||
const currentDriverId = useEffectiveDriverId() || '';
|
||||
|
||||
// UI State
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
|
||||
const [friendRequestSent, setFriendRequestSent] = useState(false);
|
||||
|
||||
// Fetch data using domain hook
|
||||
const { data: queries, isLoading, error, refetch } = useDriverProfilePageData(driverId);
|
||||
|
||||
// Transform data for template
|
||||
const data: DriverProfileData | undefined = queries?.driverProfile && queries?.teamMemberships
|
||||
? {
|
||||
driverProfile: queries.driverProfile,
|
||||
teamMemberships: queries.teamMemberships,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
// Actions
|
||||
const handleAddFriend = () => {
|
||||
setFriendRequestSent(true);
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
router.push('/drivers');
|
||||
};
|
||||
|
||||
return (
|
||||
<StatefulPageWrapper
|
||||
data={data}
|
||||
isLoading={isLoading}
|
||||
error={error as Error | null}
|
||||
retry={refetch}
|
||||
Template={({ data }) => {
|
||||
if (!data) return null;
|
||||
// Handle different result statuses
|
||||
switch (result.status) {
|
||||
case 'notFound':
|
||||
redirect('/404');
|
||||
case 'redirect':
|
||||
redirect(result.to);
|
||||
case 'error':
|
||||
// Pass error to client component
|
||||
return (
|
||||
<DriverProfilePageClient
|
||||
pageDto={null}
|
||||
error={result.errorId}
|
||||
/>
|
||||
);
|
||||
case 'ok':
|
||||
const pageDto = result.dto;
|
||||
const hasData = !!pageDto.currentDriver;
|
||||
|
||||
if (!hasData) {
|
||||
return (
|
||||
<DriverProfileTemplate
|
||||
driverProfile={data.driverProfile}
|
||||
allTeamMemberships={data.teamMemberships}
|
||||
isLoading={false}
|
||||
error={null}
|
||||
onBackClick={handleBackClick}
|
||||
onAddFriend={handleAddFriend}
|
||||
friendRequestSent={friendRequestSent}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
<DriverProfilePageClient
|
||||
pageDto={null}
|
||||
empty={{
|
||||
title: 'Driver not found',
|
||||
description: 'The driver profile may not exist or you may not have access',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
loading={{ variant: 'skeleton', message: 'Loading driver profile...' }}
|
||||
errorConfig={{ variant: 'full-screen' }}
|
||||
empty={{
|
||||
icon: require('lucide-react').Car,
|
||||
title: 'Driver not found',
|
||||
description: 'The driver profile may not exist or you may not have access',
|
||||
action: { label: 'Back to Drivers', onClick: handleBackClick }
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DriverProfilePageClient
|
||||
pageDto={pageDto}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,28 +1,45 @@
|
||||
import { PageWrapper } from '@/components/shared/state/PageWrapper';
|
||||
import { DriversTemplate } from '@/templates/DriversTemplate';
|
||||
import { DriverService } from '@/lib/services/drivers/DriverService';
|
||||
import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
|
||||
import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
|
||||
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
|
||||
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { DriversPageQuery } from '@/lib/page-queries/page-queries/DriversPageQuery';
|
||||
import { DriversPageClient } from './DriversPageClient';
|
||||
|
||||
export default async function Page() {
|
||||
// Manual dependency creation (consistent with /races and /teams)
|
||||
const baseUrl = getWebsiteApiBaseUrl();
|
||||
const logger = new ConsoleLogger();
|
||||
const errorReporter = new EnhancedErrorReporter(logger, {
|
||||
showUserNotifications: true,
|
||||
logToConsole: true,
|
||||
reportToExternal: process.env.NODE_ENV === 'production',
|
||||
});
|
||||
// Execute the page query
|
||||
const result = await DriversPageQuery.execute();
|
||||
|
||||
// Create API client
|
||||
const driversApiClient = new DriversApiClient(baseUrl, errorReporter, logger);
|
||||
// Handle different result statuses
|
||||
switch (result.status) {
|
||||
case 'notFound':
|
||||
redirect('/404');
|
||||
case 'redirect':
|
||||
redirect(result.to);
|
||||
case 'error':
|
||||
// Pass error to client component
|
||||
return (
|
||||
<DriversPageClient
|
||||
pageDto={null}
|
||||
error={result.errorId}
|
||||
/>
|
||||
);
|
||||
case 'ok':
|
||||
const pageDto = result.dto;
|
||||
const hasData = (pageDto.drivers?.length ?? 0) > 0;
|
||||
|
||||
if (!hasData) {
|
||||
return (
|
||||
<DriversPageClient
|
||||
pageDto={null}
|
||||
empty={{
|
||||
title: 'No drivers found',
|
||||
description: 'There are no drivers in the system yet.',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Create service
|
||||
const service = new DriverService(driversApiClient);
|
||||
|
||||
const data = await service.getDriverLeaderboard();
|
||||
|
||||
return <PageWrapper data={data} Template={DriversTemplate} />;
|
||||
return (
|
||||
<DriversPageClient
|
||||
pageDto={pageDto}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user