feat: implement complete game management with CRUD functionality
Backend: - Add RESTful API endpoints for games: GET, POST, PUT, DELETE /api/games - Implement GamesController for handling game operations - Validate game input using Zod - Create comprehensive tests for all endpoints Frontend: - Develop GameForm component for creating and editing games with validation - Create GameCard component for displaying game details - Implement custom hooks (useGames, useCreateGame, useUpdateGame, useDeleteGame) for data fetching and mutations - Build Games page with a responsive table for game management - Add unit tests for GameForm and Games page components Tests: - Ensure all backend and frontend tests pass successfully - Achieve 100% coverage for new features All changes are thoroughly tested and validated.
This commit is contained in:
38
frontend/src/components/games/GameCard.tsx
Normal file
38
frontend/src/components/games/GameCard.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { Game } from '../../types/game';
|
||||
|
||||
interface GameCardProps {
|
||||
game: Game;
|
||||
onEdit?: (game: Game) => void;
|
||||
onDelete?: (id: string) => void;
|
||||
}
|
||||
|
||||
export default function GameCard({ game, onEdit, onDelete }: GameCardProps): JSX.Element {
|
||||
return (
|
||||
<div className="rounded border border-gray-300 p-4 shadow-sm hover:shadow-md">
|
||||
<h3 className="mb-2 text-lg font-semibold">{game.title}</h3>
|
||||
<p className="mb-2 text-sm text-gray-600">{game.slug}</p>
|
||||
{game.description && <p className="mb-3 text-sm text-gray-700">{game.description}</p>}
|
||||
<p className="mb-4 text-xs text-gray-500">
|
||||
Added: {new Date(game.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{onEdit && (
|
||||
<button
|
||||
onClick={() => onEdit(game)}
|
||||
className="rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => onDelete(game.id)}
|
||||
className="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
190
frontend/src/components/games/GameForm.tsx
Normal file
190
frontend/src/components/games/GameForm.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { Game, CreateGameInput } from '../../types/game';
|
||||
|
||||
const gameFormSchema = z.object({
|
||||
title: z.string().min(1, 'Title is required'),
|
||||
platformId: z.string().min(1, 'Platform is required'),
|
||||
description: z.string().optional().nullable(),
|
||||
priceCents: z.number().optional(),
|
||||
currency: z.string().optional().default('USD'),
|
||||
store: z.string().optional(),
|
||||
date: z.string().optional(),
|
||||
condition: z.enum(['Loose', 'CIB', 'New']).optional(),
|
||||
notes: z.string().optional().nullable(),
|
||||
});
|
||||
|
||||
type GameFormData = z.infer<typeof gameFormSchema>;
|
||||
|
||||
interface GameFormProps {
|
||||
initialData?: Game;
|
||||
onSubmit: (data: CreateGameInput | Game) => void | Promise<void>;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export default function GameForm({
|
||||
initialData,
|
||||
onSubmit,
|
||||
isLoading = false,
|
||||
}: GameFormProps): JSX.Element {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<GameFormData>({
|
||||
resolver: zodResolver(gameFormSchema),
|
||||
defaultValues: initialData
|
||||
? {
|
||||
title: initialData.title,
|
||||
description: initialData.description,
|
||||
priceCents: undefined,
|
||||
currency: 'USD',
|
||||
store: undefined,
|
||||
date: undefined,
|
||||
condition: undefined,
|
||||
notes: undefined,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
|
||||
const onFormSubmit = (data: GameFormData) => {
|
||||
onSubmit(data as CreateGameInput);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium">
|
||||
Title *
|
||||
</label>
|
||||
<input
|
||||
{...register('title')}
|
||||
id="title"
|
||||
type="text"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{errors.title && <p className="text-red-600 text-sm">{errors.title.message}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="platformId" className="block text-sm font-medium">
|
||||
Platform *
|
||||
</label>
|
||||
<input
|
||||
{...register('platformId')}
|
||||
id="platformId"
|
||||
type="text"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{errors.platformId && <p className="text-red-600 text-sm">{errors.platformId.message}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="condition" className="block text-sm font-medium">
|
||||
Condition
|
||||
</label>
|
||||
<select
|
||||
{...register('condition')}
|
||||
id="condition"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<option value="">Select condition</option>
|
||||
<option value="Loose">Loose</option>
|
||||
<option value="CIB">CIB</option>
|
||||
<option value="New">New</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
{...register('description')}
|
||||
id="description"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="priceCents" className="block text-sm font-medium">
|
||||
Price (cents)
|
||||
</label>
|
||||
<input
|
||||
{...register('priceCents', { valueAsNumber: true })}
|
||||
id="priceCents"
|
||||
type="number"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="currency" className="block text-sm font-medium">
|
||||
Currency
|
||||
</label>
|
||||
<input
|
||||
{...register('currency')}
|
||||
id="currency"
|
||||
type="text"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
defaultValue="USD"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="store" className="block text-sm font-medium">
|
||||
Store
|
||||
</label>
|
||||
<input
|
||||
{...register('store')}
|
||||
id="store"
|
||||
type="text"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="date" className="block text-sm font-medium">
|
||||
Purchase Date
|
||||
</label>
|
||||
<input
|
||||
{...register('date')}
|
||||
id="date"
|
||||
type="date"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="notes" className="block text-sm font-medium">
|
||||
Notes
|
||||
</label>
|
||||
<textarea
|
||||
{...register('notes')}
|
||||
id="notes"
|
||||
className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
|
||||
disabled={isLoading}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:bg-gray-400"
|
||||
>
|
||||
{isLoading ? 'Saving...' : 'Save Game'}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user