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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -220,4 +220,48 @@ export const eventsAPI = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Divisions API (Phase 1.6)
|
||||||
|
export const divisionsAPI = {
|
||||||
|
async getAll() {
|
||||||
|
const data = await fetchAPI('/divisions');
|
||||||
|
return data.data;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Competition Types API (Phase 1.6)
|
||||||
|
export const competitionTypesAPI = {
|
||||||
|
async getAll() {
|
||||||
|
const data = await fetchAPI('/competition-types');
|
||||||
|
return data.data;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Heats API (Phase 1.6)
|
||||||
|
export const heatsAPI = {
|
||||||
|
async saveHeats(slug, heats) {
|
||||||
|
const data = await fetchAPI(`/events/${slug}/heats`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ heats }),
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getMyHeats(slug) {
|
||||||
|
const data = await fetchAPI(`/events/${slug}/heats/me`);
|
||||||
|
return data.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getAllHeats(slug) {
|
||||||
|
const data = await fetchAPI(`/events/${slug}/heats/all`);
|
||||||
|
return data.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteHeat(slug, heatId) {
|
||||||
|
const data = await fetchAPI(`/events/${slug}/heats/${heatId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export { ApiError };
|
export { ApiError };
|
||||||
|
|||||||
Reference in New Issue
Block a user