Add event detail/form components and page routes

2026-04-03 21:26:58 +02:00
parent 71ba829d6c
commit e6430e855b
7 changed files with 410 additions and 0 deletions
@@ -0,0 +1,187 @@
+'use client';
+
+import { useState } from 'react';
+import { api, Event } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface EventFormProps {
+  event?: Event;
+}
+
+export function EventForm({ event }: EventFormProps) {
+  const [name, setName] = useState(event?.name || '');
+  const [description, setDescription] = useState(event?.description || '');
+  const [eventDate, setEventDate] = useState(event ? new Date(event.eventDate).toISOString().slice(0, 16) : '');
+  const [location, setLocation] = useState(event?.location || '');
+  const [category, setCategory] = useState(event?.category || '');
+  const [maxParticipants, setMaxParticipants] = useState(event?.maxParticipants?.toString() || '');
+  const [tags, setTags] = useState(event?.tags.join(', ') || '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const categories = ['Running', 'Cycling', 'Triathlon', 'Trail', 'Road'];
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const eventData = {
+        name,
+        description,
+        eventDate: new Date(eventDate).toISOString(),
+        location,
+        category: category || undefined,
+        maxParticipants: maxParticipants ? parseInt(maxParticipants) : undefined,
+        tags: tags.split(',').map(t => t.trim()).filter(t => t),
+      };
+
+      if (event) {
+        await api.updateEvent(event.id, eventData);
+      } else {
+        await api.createEvent(eventData);
+      }
+
+      router.push('/events');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save event');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6 bg-white rounded-lg shadow-md p-6">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+            Event Name *
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={4}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="eventDate" className="block text-sm font-medium text-gray-700 mb-1">
+              Event Date & Time *
+            </label>
+            <input
+              id="eventDate"
+              type="datetime-local"
+              value={eventDate}
+              onChange={(e) => setEventDate(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="location" className="block text-sm font-medium text-gray-700 mb-1">
+              Location *
+            </label>
+            <input
+              id="location"
+              type="text"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="category" className="block text-sm font-medium text-gray-700 mb-1">
+              Category
+            </label>
+            <select
+              id="category"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Select Category</option>
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="maxParticipants" className="block text-sm font-medium text-gray-700 mb-1">
+              Max Participants
+            </label>
+            <input
+              id="maxParticipants"
+              type="number"
+              min="1"
+              value={maxParticipants}
+              onChange={(e) => setMaxParticipants(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
+            Tags (comma-separated)
+          </label>
+          <input
+            id="tags"
+            type="text"
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+            placeholder="e.g., beginner, competitive, charity"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="flex gap-4">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="flex-1 py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+          >
+            {isSubmitting ? 'Saving...' : (event ? 'Update Event' : 'Create Event')}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.push('/events')}
+            className="py-2 px-4 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}