website refactor

apps/website/components/races/FileProtestModal.tsx

@@ -1,23 +1,26 @@
 'use client';
 
 import { useState } from 'react';
-import Modal from '@/ui/Modal';
-import Button from '@/ui/Button';
-import type { FileProtestCommandDTO } from '@/lib/types/generated/FileProtestCommandDTO';
-import { useFileProtest } from "@/lib/hooks/race/useFileProtest";
+import { Modal } from '@/ui/Modal';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { InfoBox } from '@/ui/InfoBox';
+import { Input } from '@/ui/Input';
+import { TextArea } from '@/ui/TextArea';
+import { Select } from '@/ui/Select';
+import { useFileProtest } from "@/hooks/race/useFileProtest";
 import {
   AlertTriangle,
-  Video,
-  MessageSquare,
-  Hash,
-  Clock,
-  User,
-  FileText,
   CheckCircle2,
 } from 'lucide-react';
-import { useInject } from '@/lib/di/hooks/useInject';
-import { PROTEST_SERVICE_TOKEN } from '@/lib/di/tokens';
-import type { ProtestParticipant } from '@/lib/services/protests/ProtestService';
+
+export interface ProtestParticipant {
+  id: string;
+  name: string;
+}
 
 interface FileProtestModalProps {
   isOpen: boolean;
@@ -28,17 +31,15 @@ interface FileProtestModalProps {
   participants: ProtestParticipant[];
 }
 
-export default function FileProtestModal({
+export function FileProtestModal({
   isOpen,
   onClose,
   raceId,
-  leagueId,
   protestingDriverId,
   participants,
 }: FileProtestModalProps) {
   const fileProtestMutation = useFileProtest();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const protestService = useInject(PROTEST_SERVICE_TOKEN);
   
   // Form state
   const [accusedDriverId, setAccusedDriverId] = useState<string>('');
@@ -51,24 +52,26 @@ export default function FileProtestModal({
   const otherParticipants = participants.filter(p => p.id !== protestingDriverId);
 
   const handleSubmit = async () => {
-    try {
-      // Use ProtestService for validation and command construction
-      const command = protestService.constructFileProtestCommand({
-        raceId,
-        leagueId,
-        protestingDriverId,
-        accusedDriverId,
-        lap,
-        timeInRace,
-        description,
-        comment,
-        proofVideoUrl,
-      });
+    if (!accusedDriverId || !lap || !description) {
+      setErrorMessage('Please fill in all required fields');
+      return;
+    }
 
+    try {
       setErrorMessage(null);
 
-      // Use existing hook for the actual API call
-      fileProtestMutation.mutate(command, {
+      fileProtestMutation.mutate({
+        raceId,
+        protestingDriverId,
+        accusedDriverId,
+        incident: {
+          lap: parseInt(lap, 10),
+          description,
+          timeInRace: timeInRace ? parseInt(timeInRace, 10) : undefined,
+        },
+        comment,
+        proofVideoUrl,
+      }, {
         onSuccess: () => {
           // Reset form state on success
           setAccusedDriverId('');
@@ -78,7 +81,7 @@ export default function FileProtestModal({
           setComment('');
           setProofVideoUrl('');
         },
-        onError: (error) => {
+        onError: (error: Error) => {
           setErrorMessage(error.message || 'Failed to file protest');
         },
       });
@@ -109,19 +112,19 @@ export default function FileProtestModal({
         onOpenChange={handleClose}
         title="Protest Filed Successfully"
       >
-        <div className="flex flex-col items-center py-6 text-center">
-          <div className="p-4 bg-performance-green/20 rounded-full mb-4">
-            <CheckCircle2 className="w-8 h-8 text-performance-green" />
-          </div>
-          <p className="text-white font-medium mb-2">Your protest has been submitted</p>
-          <p className="text-sm text-gray-400 mb-6">
+        <Box display="flex" flexDirection="col" alignItems="center" py={6} textAlign="center">
+          <Box p={4} bg="bg-performance-green/20" rounded="full" mb={4}>
+            <Icon icon={CheckCircle2} size={8} color="rgb(16, 185, 129)" />
+          </Box>
+          <Text color="text-white" weight="medium" mb={2} block>Your protest has been submitted</Text>
+          <Text size="sm" color="text-gray-400" mb={6} block>
             The stewards will review your protest and make a decision.
-            You'll be notified of the outcome.
-          </p>
+            You&apos;ll be notified of the outcome.
+          </Text>
           <Button variant="primary" onClick={handleClose}>
             Close
           </Button>
-        </div>
+        </Box>
       </Modal>
     );
   }
@@ -133,136 +136,103 @@ export default function FileProtestModal({
       title="File a Protest"
       description="Report an incident to the stewards for review. Please provide as much detail as possible."
     >
-      <div className="space-y-5">
+      <Stack gap={5}>
         {errorMessage && (
-          <div className="flex items-start gap-3 p-3 bg-warning-amber/10 border border-warning-amber/30 rounded-lg">
-            <AlertTriangle className="w-5 h-5 text-warning-amber flex-shrink-0 mt-0.5" />
-            <p className="text-sm text-warning-amber">{errorMessage}</p>
-          </div>
+          <InfoBox 
+            variant="warning"
+            icon={AlertTriangle}
+            title="Error"
+            description={errorMessage}
+          />
         )}
 
         {/* Driver Selection */}
-        <div>
-          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-            <User className="w-4 h-4 text-primary-blue" />
-            Driver involved *
-          </label>
-          <select
+        <Box>
+          <Select
+            label="Driver involved *"
+            options={[
+              { value: '', label: 'Select driver...' },
+              ...otherParticipants.map(driver => ({ value: driver.id, label: driver.name }))
+            ]}
             value={accusedDriverId}
             onChange={(e) => setAccusedDriverId(e.target.value)}
             disabled={fileProtestMutation.isPending}
-            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
-          >
-            <option value="">Select driver...</option>
-            {otherParticipants.map((driver) => (
-              <option key={driver.id} value={driver.id}>
-                {driver.name}
-              </option>
-            ))}
-          </select>
-        </div>
+          />
+        </Box>
 
         {/* Lap and Time */}
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-              <Hash className="w-4 h-4 text-primary-blue" />
-              Lap number *
-            </label>
-            <input
-              type="number"
-              min="0"
-              value={lap}
-              onChange={(e) => setLap(e.target.value)}
-              disabled={fileProtestMutation.isPending}
-              placeholder="e.g. 5"
-              className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
-            />
-          </div>
-          <div>
-            <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-              <Clock className="w-4 h-4 text-primary-blue" />
-              Time (seconds)
-            </label>
-            <input
-              type="number"
-              min="0"
-              value={timeInRace}
-              onChange={(e) => setTimeInRace(e.target.value)}
-              disabled={fileProtestMutation.isPending}
-              placeholder="Optional"
-              className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
-            />
-          </div>
-        </div>
+        <Box display="grid" gridCols={2} gap={4}>
+          <Input
+            label="Lap number *"
+            type="number"
+            min="0"
+            value={lap}
+            onChange={(e) => setLap(e.target.value)}
+            disabled={fileProtestMutation.isPending}
+            placeholder="e.g. 5"
+          />
+          <Input
+            label="Time (seconds)"
+            type="number"
+            min="0"
+            value={timeInRace}
+            onChange={(e) => setTimeInRace(e.target.value)}
+            disabled={fileProtestMutation.isPending}
+            placeholder="Optional"
+          />
+        </Box>
 
         {/* Incident Description */}
-        <div>
-          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-            <FileText className="w-4 h-4 text-primary-blue" />
-            What happened? *
-          </label>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            disabled={fileProtestMutation.isPending}
-            placeholder="Describe the incident clearly and objectively..."
-            rows={3}
-            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50 resize-none"
-          />
-        </div>
+        <TextArea
+          label="What happened? *"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          disabled={fileProtestMutation.isPending}
+          placeholder="Describe the incident clearly and objectively..."
+          rows={3}
+        />
 
         {/* Additional Comment */}
-        <div>
-          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-            <MessageSquare className="w-4 h-4 text-primary-blue" />
-            Additional comment
-          </label>
-          <textarea
-            value={comment}
-            onChange={(e) => setComment(e.target.value)}
-            disabled={fileProtestMutation.isPending}
-            placeholder="Any additional context for the stewards..."
-            rows={2}
-            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50 resize-none"
-          />
-        </div>
+        <TextArea
+          label="Additional comment"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          disabled={fileProtestMutation.isPending}
+          placeholder="Any additional context for the stewards..."
+          rows={2}
+        />
 
         {/* Video Proof */}
-        <div>
-          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
-            <Video className="w-4 h-4 text-primary-blue" />
-            Video proof URL
-          </label>
-          <input
+        <Box>
+          <Input
+            label="Video proof URL"
             type="url"
             value={proofVideoUrl}
             onChange={(e) => setProofVideoUrl(e.target.value)}
             disabled={fileProtestMutation.isPending}
             placeholder="https://youtube.com/... or https://streamable.com/..."
-            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
           />
-          <p className="mt-1.5 text-xs text-gray-500">
+          <Text size="xs" color="text-gray-500" mt={1.5} block>
             Providing video evidence significantly helps the stewards review your protest.
-          </p>
-        </div>
+          </Text>
+        </Box>
 
         {/* Info Box */}
-        <div className="p-3 bg-iron-gray rounded-lg border border-charcoal-outline">
-          <p className="text-xs text-gray-400">
-            <strong className="text-gray-300">Note:</strong> Filing a protest does not guarantee action.
+        <Box p={3} bg="bg-iron-gray" rounded="lg" border borderColor="border-charcoal-outline">
+          <Text size="xs" color="text-gray-400" block>
+            <Text as="strong" color="text-gray-300">Note:</Text> Filing a protest does not guarantee action.
             The stewards will review the incident and may apply penalties ranging from time penalties
             to grid penalties for future races, depending on the severity.
-          </p>
-        </div>
+          </Text>
+        </Box>
 
         {/* Actions */}
-        <div className="flex gap-3 pt-2">
+        <Box display="flex" gap={3} pt={2}>
           <Button
             variant="secondary"
             onClick={handleClose}
             disabled={fileProtestMutation.isPending}
-            className="flex-1"
+            fullWidth
           >
             Cancel
           </Button>
@@ -270,12 +240,12 @@ export default function FileProtestModal({
             variant="primary"
             onClick={handleSubmit}
             disabled={fileProtestMutation.isPending}
-            className="flex-1"
+            fullWidth
           >
             {fileProtestMutation.isPending ? 'Submitting...' : 'Submit Protest'}
           </Button>
-        </div>
-      </div>
+        </Box>
+      </Stack>
     </Modal>
   );
-}
+}