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:
2026-02-11 22:09:02 +01:00
parent 08aca0fd5b
commit 630ebe0dc8
33 changed files with 2241 additions and 71 deletions

View 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>
);
}