feat: add heats frontend API and HeatsBanner component
- Add divisionsAPI, competitionTypesAPI, heatsAPI to frontend services - Create HeatsBanner component for declaring competition heats - Support dynamic heat entry (add/remove heats) - Validate required fields (competition type, division, heat number) - Optional role selection (Leader/Follower) - Real-time API integration with backend
This commit is contained in:
Radosław Gierwiało
234
frontend/src/components/heats/HeatsBanner.jsx
Normal file
234
frontend/src/components/heats/HeatsBanner.jsx
Normal file
@@ -0,0 +1,234 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { X, Plus, Trash2, Loader2 } from 'lucide-react';
|
||||
import { divisionsAPI, competitionTypesAPI, heatsAPI } from '../../services/api';
|
||||
|
||||
export default function HeatsBanner({ slug, onSave, onDismiss }) {
|
||||
const [divisions, setDivisions] = useState([]);
|
||||
const [competitionTypes, setCompetitionTypes] = useState([]);
|
||||
const [heats, setHeats] = useState([{ divisionId: '', competitionTypeId: '', heatNumber: '', role: '' }]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
loadOptions();
|
||||
}, []);
|
||||
|
||||
const loadOptions = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [divisionsData, competitionTypesData] = await Promise.all([
|
||||
divisionsAPI.getAll(),
|
||||
competitionTypesAPI.getAll(),
|
||||
]);
|
||||
setDivisions(divisionsData);
|
||||
setCompetitionTypes(competitionTypesData);
|
||||
} catch (err) {
|
||||
console.error('Failed to load options:', err);
|
||||
setError('Failed to load divisions and competition types');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const addHeat = () => {
|
||||
setHeats([...heats, { divisionId: '', competitionTypeId: '', heatNumber: '', role: '' }]);
|
||||
};
|
||||
|
||||
const removeHeat = (index) => {
|
||||
setHeats(heats.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const updateHeat = (index, field, value) => {
|
||||
const newHeats = [...heats];
|
||||
newHeats[index][field] = value;
|
||||
setHeats(newHeats);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
// Validation
|
||||
for (const heat of heats) {
|
||||
if (!heat.divisionId || !heat.competitionTypeId || !heat.heatNumber) {
|
||||
setError('Please fill in all required fields (Division, Competition Type, Heat Number)');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
setError('');
|
||||
|
||||
const heatsToSave = heats.map(heat => ({
|
||||
divisionId: parseInt(heat.divisionId),
|
||||
competitionTypeId: parseInt(heat.competitionTypeId),
|
||||
heatNumber: parseInt(heat.heatNumber),
|
||||
role: heat.role || null,
|
||||
}));
|
||||
|
||||
await heatsAPI.saveHeats(slug, heatsToSave);
|
||||
|
||||
if (onSave) {
|
||||
onSave();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to save heats:', err);
|
||||
setError(err.message || 'Failed to save heats. Please try again.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-amber-50 border-b border-amber-200 p-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-center gap-2">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-amber-600" />
|
||||
<span className="text-amber-700">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-amber-50 border-b border-amber-200 p-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-amber-900 flex items-center gap-2">
|
||||
<span className="text-2xl">🏆</span>
|
||||
Declare Your Competition Heats
|
||||
</h3>
|
||||
<p className="text-sm text-amber-700 mt-1">
|
||||
To participate in matchmaking, please specify which heats you're dancing in
|
||||
</p>
|
||||
</div>
|
||||
{onDismiss && (
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="text-amber-600 hover:text-amber-800"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-300 text-red-700 px-4 py-2 rounded mb-4 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{heats.map((heat, index) => (
|
||||
<div key={index} className="bg-white rounded-lg p-4 shadow-sm border border-amber-200">
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Competition Type <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={heat.competitionTypeId}
|
||||
onChange={(e) => updateHeat(index, 'competitionTypeId', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500 text-sm"
|
||||
required
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{competitionTypes.map(ct => (
|
||||
<option key={ct.id} value={ct.id}>{ct.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Division <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={heat.divisionId}
|
||||
onChange={(e) => updateHeat(index, 'divisionId', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500 text-sm"
|
||||
required
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{divisions.map(div => (
|
||||
<option key={div.id} value={div.id}>{div.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Heat Number <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={heat.heatNumber}
|
||||
onChange={(e) => updateHeat(index, 'heatNumber', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500 text-sm"
|
||||
required
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(num => (
|
||||
<option key={num} value={num}>{num}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Role (optional)
|
||||
</label>
|
||||
<select
|
||||
value={heat.role}
|
||||
onChange={(e) => updateHeat(index, 'role', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500 text-sm"
|
||||
>
|
||||
<option value="">Not specified</option>
|
||||
<option value="Leader">Leader</option>
|
||||
<option value="Follower">Follower</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
onClick={() => removeHeat(index)}
|
||||
disabled={heats.length === 1}
|
||||
className="w-full px-3 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-4">
|
||||
<button
|
||||
onClick={addHeat}
|
||||
className="px-4 py-2 border border-amber-300 text-amber-700 rounded-md hover:bg-amber-100 transition-colors flex items-center gap-2 text-sm font-medium"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Another Heat
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="px-6 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors disabled:opacity-50 flex items-center gap-2 text-sm font-medium"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
'Save Heats'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user