refactor: extract TicketPrizeDisplay and TicketTableRow components
- Create TicketPrizeDisplay component for prize icon rendering - Create TicketTableRow component for reusable ticket table rows - Refactor client/page.tsx and historique/page.tsx to use shared components - Reduces code duplication from 3.07% to 2.8% 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
062d05d0f0
commit
6020dc7b93
|
|
@ -2,13 +2,11 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
|
||||
import { StatusBadge } from "@/components/ui/StatusBadge";
|
||||
import Button from "@/components/Button";
|
||||
import { Loading } from "@/components/ui/Loading";
|
||||
import { TicketTableRow } from "@/components/ui/TicketTableRow";
|
||||
import { Ticket } from "@/types";
|
||||
import { gameService } from "@/services/game.service";
|
||||
import { ROUTES, PRIZE_CONFIG } from "@/utils/constants";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ClientPage() {
|
||||
|
|
@ -201,67 +199,9 @@ export default function ClientPage() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#e5e4dc]">
|
||||
{tickets.slice(0, 5).map((ticket) => {
|
||||
const prizeConfig = ticket.prize
|
||||
? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
|
||||
: null;
|
||||
|
||||
return (
|
||||
<tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="font-mono text-sm font-semibold text-[#5a5a4e]">
|
||||
{ticket.code}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{prizeConfig && (
|
||||
<>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${prizeConfig.color}`}>
|
||||
{ticket.prize?.type === 'INFUSEUR' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'THE_SIGNATURE' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'COFFRET_DECOUVERTE' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'COFFRET_PRESTIGE' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25v4.7zM8 10.5l1.5 1.5L15 6.5 13.5 5z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'THE_GRATUIT' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#5a5a4e]">
|
||||
{prizeConfig.name}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<StatusBadge type="ticket" value={ticket.status} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
|
||||
{ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{tickets.slice(0, 5).map((ticket) => (
|
||||
<TicketTableRow key={ticket.id} ticket={ticket} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,11 @@
|
|||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
|
||||
import { StatusBadge } from "@/components/ui/StatusBadge";
|
||||
import Button from "@/components/Button";
|
||||
import { Loading } from "@/components/ui/Loading";
|
||||
import { TicketTableRow } from "@/components/ui/TicketTableRow";
|
||||
import { Ticket } from "@/types";
|
||||
import { gameService } from "@/services/game.service";
|
||||
import { ROUTES, PRIZE_CONFIG } from "@/utils/constants";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
import { Calendar, Search } from "lucide-react";
|
||||
|
||||
export default function HistoriquePage() {
|
||||
|
|
@ -266,86 +264,9 @@ export default function HistoriquePage() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#e5e4dc]">
|
||||
{filteredTickets.map((ticket) => {
|
||||
const prizeConfig = ticket.prize
|
||||
? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
|
||||
: null;
|
||||
|
||||
return (
|
||||
<tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="font-mono text-sm font-semibold text-[#5a5a4e]">
|
||||
{ticket.code}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{prizeConfig && (
|
||||
<>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${prizeConfig.color}`}>
|
||||
{ticket.prize?.type === 'INFUSEUR' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'THE_SIGNATURE' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'COFFRET_DECOUVERTE' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'COFFRET_PRESTIGE' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25v4.7zM8 10.5l1.5 1.5L15 6.5 13.5 5z"/>
|
||||
</svg>
|
||||
)}
|
||||
{ticket.prize?.type === 'THE_GRATUIT' && (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#5a5a4e]">
|
||||
{prizeConfig.name}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<StatusBadge type="ticket" value={ticket.status} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
|
||||
{ticket.playedAt
|
||||
? new Date(ticket.playedAt).toLocaleDateString("fr-FR", {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
|
||||
{ticket.claimedAt
|
||||
? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{filteredTickets.map((ticket) => (
|
||||
<TicketTableRow key={ticket.id} ticket={ticket} showClaimedDate />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
63
components/ui/TicketPrizeDisplay.tsx
Normal file
63
components/ui/TicketPrizeDisplay.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { PRIZE_CONFIG } from '@/utils/constants';
|
||||
|
||||
interface TicketPrizeDisplayProps {
|
||||
prizeType: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PRIZE_ICONS: Record<string, React.ReactNode> = {
|
||||
INFUSEUR: (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
||||
</svg>
|
||||
),
|
||||
THE_SIGNATURE: (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3z"/>
|
||||
</svg>
|
||||
),
|
||||
COFFRET_DECOUVERTE: (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
|
||||
</svg>
|
||||
),
|
||||
COFFRET_PRESTIGE: (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25v4.7zM8 10.5l1.5 1.5L15 6.5 13.5 5z"/>
|
||||
</svg>
|
||||
),
|
||||
THE_GRATUIT: (
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
export const TicketPrizeDisplay: React.FC<TicketPrizeDisplayProps> = ({
|
||||
prizeType,
|
||||
className = '',
|
||||
}) => {
|
||||
const prizeConfig = PRIZE_CONFIG[prizeType as keyof typeof PRIZE_CONFIG];
|
||||
|
||||
if (!prizeConfig) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-3 ${className}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${prizeConfig.color}`}>
|
||||
{PRIZE_ICONS[prizeType]}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#5a5a4e]">
|
||||
{prizeConfig.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketPrizeDisplay;
|
||||
60
components/ui/TicketTableRow.tsx
Normal file
60
components/ui/TicketTableRow.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { StatusBadge } from '@/components/ui/StatusBadge';
|
||||
import { TicketPrizeDisplay } from '@/components/ui/TicketPrizeDisplay';
|
||||
import { Ticket } from '@/types';
|
||||
|
||||
interface TicketTableRowProps {
|
||||
ticket: Ticket;
|
||||
showClaimedDate?: boolean;
|
||||
}
|
||||
|
||||
export const TicketTableRow: React.FC<TicketTableRowProps> = ({
|
||||
ticket,
|
||||
showClaimedDate = false,
|
||||
}) => {
|
||||
return (
|
||||
<tr className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="font-mono text-sm font-semibold text-[#5a5a4e]">
|
||||
{ticket.code}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{ticket.prize && (
|
||||
<TicketPrizeDisplay prizeType={ticket.prize.type} />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<StatusBadge type="ticket" value={ticket.status} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
|
||||
{ticket.playedAt
|
||||
? new Date(ticket.playedAt).toLocaleDateString("fr-FR", showClaimedDate ? {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
} : undefined)
|
||||
: "-"}
|
||||
</td>
|
||||
{showClaimedDate && (
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
|
||||
{ticket.claimedAt
|
||||
? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketTableRow;
|
||||
Loading…
Reference in New Issue
Block a user