website refactor

apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import type { Mocked } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import type { LeagueAdminRosterJoinRequestViewModel } from '@/lib/view-models/LeagueAdminRosterJoinRequestViewModel';
 import type { LeagueAdminRosterMemberViewModel } from '@/lib/view-models/LeagueAdminRosterMemberViewModel';
@@ -26,61 +27,68 @@ vi.mock('next/navigation', () => ({
 let mockJoinRequests: any[] = [];
 let mockMembers: any[] = [];
 
-// Mock the new DI hooks
-vi.mock('@/hooks/league/useLeagueRosterAdmin', () => ({
-  useLeagueRosterJoinRequests: (leagueId: string) => ({
+// Mock the hooks directly
+vi.mock('@/lib/hooks/league/useLeagueRosterAdmin', () => ({
+  useLeagueJoinRequests: (leagueId: string) => ({
     data: [...mockJoinRequests],
     isLoading: false,
     isError: false,
     isSuccess: true,
     refetch: vi.fn(),
   }),
-  useLeagueRosterMembers: (leagueId: string) => ({
+  useLeagueRosterAdmin: (leagueId: string) => ({
     data: [...mockMembers],
     isLoading: false,
     isError: false,
     isSuccess: true,
     refetch: vi.fn(),
   }),
-  useApproveJoinRequest: () => ({
+  useApproveJoinRequest: (options?: any) => ({
     mutate: (params: any) => {
-      // Remove from join requests
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
     },
     mutateAsync: async (params: any) => {
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
       return { success: true };
     },
     isPending: false,
   }),
-  useRejectJoinRequest: () => ({
+  useRejectJoinRequest: (options?: any) => ({
     mutate: (params: any) => {
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
     },
     mutateAsync: async (params: any) => {
-      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.joinRequestId);
+      mockJoinRequests = mockJoinRequests.filter(req => req.id !== params.requestId);
+      if (options?.onSuccess) options.onSuccess();
       return { success: true };
     },
     isPending: false,
   }),
-  useUpdateMemberRole: () => ({
+  useUpdateMemberRole: (options?: any) => ({
     mutate: (params: any) => {
       const member = mockMembers.find(m => m.driverId === params.driverId);
-      if (member) member.role = params.role;
+      if (member) member.role = params.newRole;
+      if (options?.onError) options.onError();
     },
     mutateAsync: async (params: any) => {
       const member = mockMembers.find(m => m.driverId === params.driverId);
-      if (member) member.role = params.role;
+      if (member) member.role = params.newRole;
+      if (options?.onError) options.onError();
       return { success: true };
     },
     isPending: false,
   }),
-  useRemoveMember: () => ({
+  useRemoveMember: (options?: any) => ({
     mutate: (params: any) => {
       mockMembers = mockMembers.filter(m => m.driverId !== params.driverId);
+      if (options?.onSuccess) options.onSuccess();
     },
     mutateAsync: async (params: any) => {
       mockMembers = mockMembers.filter(m => m.driverId !== params.driverId);
+      if (options?.onSuccess) options.onSuccess();
       return { success: true };
     },
     isPending: false,
@@ -91,9 +99,11 @@ function makeJoinRequest(overrides: Partial<LeagueAdminRosterJoinRequestViewMode
   return {
     id: 'jr-1',
     leagueId: 'league-1',
-    driverId: 'driver-1',
-    driverName: 'Driver One',
-    requestedAtIso: '2025-01-01T00:00:00.000Z',
+    driver: {
+      id: 'driver-1',
+      name: 'Driver One',
+    },
+    requestedAt: '2025-01-01T00:00:00.000Z',
     message: 'Please let me in',
     ...overrides,
   };
@@ -102,14 +112,19 @@ function makeJoinRequest(overrides: Partial<LeagueAdminRosterJoinRequestViewMode
 function makeMember(overrides: Partial<LeagueAdminRosterMemberViewModel> = {}): LeagueAdminRosterMemberViewModel {
   return {
     driverId: 'driver-10',
-    driverName: 'Member Ten',
+    driver: {
+      id: 'driver-10',
+      name: 'Member Ten',
+    },
     role: 'member',
-    joinedAtIso: '2025-01-01T00:00:00.000Z',
+    joinedAt: '2025-01-01T00:00:00.000Z',
     ...overrides,
   };
 }
 
 describe('RosterAdminPage', () => {
+  let queryClient: QueryClient;
+
   beforeEach(() => {
     // Reset mock data
     mockJoinRequests = [];
@@ -123,24 +138,44 @@ describe('RosterAdminPage', () => {
       updateMemberRole: vi.fn(),
       removeMember: vi.fn(),
     } as any;
+
+    // Create a new QueryClient for each test
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+        mutations: {
+          retry: false,
+        },
+      },
+    });
   });
 
+  const renderWithProviders = (component: React.ReactNode) => {
+    return render(
+      <QueryClientProvider client={queryClient}>
+        {component}
+      </QueryClientProvider>
+    );
+  };
+
   it('renders join requests + members from service ViewModels', async () => {
     const joinRequests: LeagueAdminRosterJoinRequestViewModel[] = [
-      makeJoinRequest({ id: 'jr-1', driverName: 'Driver One' }),
-      makeJoinRequest({ id: 'jr-2', driverName: 'Driver Two', driverId: 'driver-2' }),
+      makeJoinRequest({ id: 'jr-1', driver: { id: 'driver-1', name: 'Driver One' } }),
+      makeJoinRequest({ id: 'jr-2', driver: { id: 'driver-2', name: 'Driver Two' } }),
     ];
 
     const members: LeagueAdminRosterMemberViewModel[] = [
-      makeMember({ driverId: 'driver-10', driverName: 'Member Ten', role: 'member' }),
-      makeMember({ driverId: 'driver-11', driverName: 'Member Eleven', role: 'admin' }),
+      makeMember({ driverId: 'driver-10', driver: { id: 'driver-10', name: 'Member Ten' }, role: 'member' }),
+      makeMember({ driverId: 'driver-11', driver: { id: 'driver-11', name: 'Member Eleven' }, role: 'admin' }),
     ];
 
     // Set mock data for hooks
     mockJoinRequests = joinRequests;
     mockMembers = members;
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Roster Admin')).toBeInTheDocument();
 
@@ -152,10 +187,10 @@ describe('RosterAdminPage', () => {
   });
 
   it('approves a join request and removes it from the pending list', async () => {
-    mockJoinRequests = [makeJoinRequest({ id: 'jr-1', driverName: 'Driver One' })];
-    mockMembers = [makeMember({ driverId: 'driver-10', driverName: 'Member Ten' })];
+    mockJoinRequests = [makeJoinRequest({ id: 'jr-1', driver: { id: 'driver-1', name: 'Driver One' } })];
+    mockMembers = [makeMember({ driverId: 'driver-10', driver: { id: 'driver-10', name: 'Member Ten' } })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Driver One')).toBeInTheDocument();
 
@@ -167,10 +202,10 @@ describe('RosterAdminPage', () => {
   });
 
   it('rejects a join request and removes it from the pending list', async () => {
-    mockJoinRequests = [makeJoinRequest({ id: 'jr-2', driverName: 'Driver Two' })];
-    mockMembers = [makeMember({ driverId: 'driver-10', driverName: 'Member Ten' })];
+    mockJoinRequests = [makeJoinRequest({ id: 'jr-2', driver: { id: 'driver-2', name: 'Driver Two' } })];
+    mockMembers = [makeMember({ driverId: 'driver-10', driver: { id: 'driver-10', name: 'Member Ten' } })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Driver Two')).toBeInTheDocument();
 
@@ -183,9 +218,9 @@ describe('RosterAdminPage', () => {
 
   it('changes a member role via service and updates the displayed role', async () => {
     mockJoinRequests = [];
-    mockMembers = [makeMember({ driverId: 'driver-11', driverName: 'Member Eleven', role: 'member' })];
+    mockMembers = [makeMember({ driverId: 'driver-11', driver: { id: 'driver-11', name: 'Member Eleven' }, role: 'member' })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Member Eleven')).toBeInTheDocument();
 
@@ -201,9 +236,9 @@ describe('RosterAdminPage', () => {
 
   it('removes a member via service and removes them from the list', async () => {
     mockJoinRequests = [];
-    mockMembers = [makeMember({ driverId: 'driver-12', driverName: 'Member Twelve', role: 'member' })];
+    mockMembers = [makeMember({ driverId: 'driver-12', driver: { id: 'driver-12', name: 'Member Twelve' }, role: 'member' })];
 
-    render(<RosterAdminPage />);
+    renderWithProviders(<RosterAdminPage />);
 
     expect(await screen.findByText('Member Twelve')).toBeInTheDocument();
 

apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Card from '@/components/ui/Card';
 import type { MembershipRole } from '@/lib/types/MembershipRole';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
@@ -12,6 +11,7 @@ import {
   useUpdateMemberRole,
   useRemoveMember,
 } from "@/lib/hooks/league/useLeagueRosterAdmin";
+import { RosterAdminTemplate } from '@/templates/RosterAdminTemplate';
 
 const ROLE_OPTIONS: MembershipRole[] = ['owner', 'admin', 'steward', 'member'];
 
@@ -72,114 +72,16 @@ export function RosterAdminPage() {
   };
 
   return (
-    <div className="space-y-6">
-      <Card>
-        <div className="space-y-4">
-          <div>
-            <h1 className="text-2xl font-bold text-white">Roster Admin</h1>
-            <p className="text-sm text-gray-400">Manage join requests and member roles.</p>
-          </div>
-
-          <div className="border-t border-charcoal-outline pt-4 space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <h2 className="text-lg font-semibold text-white">Pending join requests</h2>
-              <p className="text-xs text-gray-500">{pendingCountLabel}</p>
-            </div>
-
-            {loading ? (
-              <div className="py-4 text-sm text-gray-400">Loading…</div>
-            ) : joinRequests.length ? (
-              <div className="space-y-2">
-                {joinRequests.map((req) => (
-                  <div
-                    key={req.id}
-                    className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
-                  >
-                    <div className="min-w-0">
-                      <p className="text-white font-medium truncate">{(req.driver as any)?.name || 'Unknown'}</p>
-                      <p className="text-xs text-gray-400 truncate">{req.requestedAt}</p>
-                      {req.message ? <p className="text-xs text-gray-500 truncate">{req.message}</p> : null}
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        data-testid={`join-request-${req.id}-approve`}
-                        onClick={() => handleApprove(req.id)}
-                        className="px-3 py-1.5 rounded bg-primary-blue text-white"
-                      >
-                        Approve
-                      </button>
-                      <button
-                        type="button"
-                        data-testid={`join-request-${req.id}-reject`}
-                        onClick={() => handleReject(req.id)}
-                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
-                      >
-                        Reject
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="py-4 text-sm text-gray-500">No pending join requests.</div>
-            )}
-          </div>
-
-          <div className="border-t border-charcoal-outline pt-4 space-y-3">
-            <h2 className="text-lg font-semibold text-white">Members</h2>
-
-            {loading ? (
-              <div className="py-4 text-sm text-gray-400">Loading…</div>
-            ) : members.length ? (
-              <div className="space-y-2">
-                {members.map((member) => (
-                  <div
-                    key={member.driverId}
-                    className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
-                  >
-                    <div className="min-w-0">
-                      <p className="text-white font-medium truncate">{member.driver.name}</p>
-                      <p className="text-xs text-gray-400 truncate">{member.joinedAt}</p>
-                    </div>
-
-                    <div className="flex flex-col md:flex-row md:items-center gap-2">
-                      <label className="text-xs text-gray-400" htmlFor={`role-${member.driverId}`}>
-                        Role for {member.driver.name}
-                      </label>
-                      <select
-                        id={`role-${member.driverId}`}
-                        aria-label={`Role for ${member.driver.name}`}
-                        value={member.role}
-                        onChange={(e) => handleRoleChange(member.driverId, e.target.value as MembershipRole)}
-                        className="bg-iron-gray text-white px-3 py-2 rounded"
-                      >
-                        {ROLE_OPTIONS.map((role) => (
-                          <option key={role} value={role}>
-                            {role}
-                          </option>
-                        ))}
-                      </select>
-
-                      <button
-                        type="button"
-                        data-testid={`member-${member.driverId}-remove`}
-                        onClick={() => handleRemove(member.driverId)}
-                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
-                      >
-                        Remove
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="py-4 text-sm text-gray-500">No members found.</div>
-            )}
-          </div>
-        </div>
-      </Card>
-    </div>
+    <RosterAdminTemplate
+      joinRequests={joinRequests}
+      members={members}
+      loading={loading}
+      pendingCountLabel={pendingCountLabel}
+      onApprove={handleApprove}
+      onReject={handleReject}
+      onRoleChange={handleRoleChange}
+      onRemove={handleRemove}
+      roleOptions={ROLE_OPTIONS}
+    />
   );
 }