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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user