fix: update /facilities endpoint to use Build 362+ response structure
continuous-integration/drone/push Build is passing Details

Complete migration to Build 362+ facility discovery response format:

**Discovery Endpoint Changes:**
- Parse 'facilities' array instead of 'remotes' from /facilities response
- Update facility object structure to use facility_* fields exclusively
- Remove all origin_* field references from facility discovery

**Component Updates:**
- RemoteSportInfo: Update to parse facilities array and use facility_name, facility_slug, facility_logo_url
- useCourtSlots: Build remotesData with facilities array using new field structure
- Add backward compatibility fallbacks for transition period

**Response Structure Migration:**
- OLD: data.remotes[] with origin_id, origin_name, origin_slug fields
- NEW: data.facilities[] with facility_id, facility_name, facility_slug fields
- Frontend now receives pure facility/venue data, not provider/origin data

**Files Updated:**
- src/components/RemoteSportInfo.tsx (interface and parsing logic)
- src/hooks/useCourtSlots.ts (remotesData structure generation)

**Verification:**
- TypeScript compilation: ✓ No errors
- ESLint: ✓ No new issues

BREAKING CHANGES: Requires backend Build 362+ for facility-centric discovery responses
master
Guillermo Pages 1 month ago
parent 6ebc57dd36
commit d0b6c1bb35

@ -5,7 +5,7 @@ import useTranslation from '@/src/hooks/useTranslation';
import apiFetch from '@/src/utils/apiFetch';
interface RemoteInfo {
origin_name: string;
facility_name: string;
logo_url?: string;
sport_name: string;
sport_logo_url?: string;
@ -28,12 +28,14 @@ export default function RemoteInfo({ remoteSlug, sportSlug, remotesData, isLoadi
// If remotesData is provided, use it instead of fetching
if (remotesData) {
const remote = (remotesData.remotes || []).find((r: any) => r.origin_slug === remoteSlug);
const sport = remote?.sports?.find((s: any) => s.sport_slug === sportSlug);
if (remote && sport) {
const facility = (remotesData.facilities || remotesData.remotes || []).find((f: any) =>
f.facility_slug === remoteSlug || f.origin_slug === remoteSlug
);
const sport = facility?.sports?.find((s: any) => s.sport_slug === sportSlug);
if (facility && sport) {
setRemoteInfo({
origin_name: remote.origin_name,
logo_url: remote.origin_logo_url || remote.logo_url,
facility_name: facility.facility_name || facility.origin_name,
logo_url: facility.facility_logo_url || facility.origin_logo_url || facility.logo_url,
sport_name: sport.sport_name,
sport_logo_url: sport.sport_logo_url || sport.logo_url || `/images/${sportSlug}-logo.png`,
});
@ -49,14 +51,14 @@ export default function RemoteInfo({ remoteSlug, sportSlug, remotesData, isLoadi
apiFetch(`/facilities`)
.then(res => res.json())
.then(data => {
const remote = (data.remotes || []).find((r: any) => r.origin_slug === remoteSlug);
const sport = remote?.sports?.find((s: any) => s.sport_slug === sportSlug);
if (remote && sport) {
const facility = (data.facilities || []).find((f: any) => f.facility_slug === remoteSlug);
const sport = facility?.sports?.find((s: any) => s.sport_slug === sportSlug);
if (facility && sport) {
setRemoteInfo({
origin_name: remote.origin_name,
logo_url: remote.origin_logo_url || remote.logo_url,
facility_name: facility.facility_name,
logo_url: facility.facility_logo_url,
sport_name: sport.sport_name,
sport_logo_url: sport.sport_logo_url || sport.logo_url || `/images/${sportSlug}-logo.png`,
sport_logo_url: sport.sport_logo_url || `/images/${sportSlug}-logo.png`,
});
}
})
@ -83,7 +85,7 @@ export default function RemoteInfo({ remoteSlug, sportSlug, remotesData, isLoadi
<div className="w-12 h-12 rounded-lg bg-white shadow-sm p-2 border border-gray-100">
<img
src={remoteInfo.logo_url}
alt={remoteInfo.origin_name}
alt={remoteInfo.facility_name}
className="w-full h-full object-contain"
/>
</div>
@ -93,7 +95,7 @@ export default function RemoteInfo({ remoteSlug, sportSlug, remotesData, isLoadi
{/* Club name and sport */}
<div className="flex items-center flex-grow">
<h2 className="text-lg font-semibold text-gray-900">
{remoteInfo.origin_name}
{remoteInfo.facility_name}
</h2>
<span className="text-gray-400 mx-2">|</span>
<div className="flex items-center space-x-2">

@ -26,12 +26,12 @@ export default function useCourtSlots(
// Set remote info from remotesData
useEffect(() => {
if (remotesData && remoteSlug) {
const remote = (remotesData.remotes || []).find(
(r: any) => r.origin_slug === remoteSlug
const facility = (remotesData.facilities || remotesData.remotes || []).find(
(f: any) => f.facility_slug === remoteSlug || f.origin_slug === remoteSlug
);
if (remote) {
setRemoteName(remote.origin_name);
setRemoteTimezone(remote.src_timezone || 'UTC');
if (facility) {
setRemoteName(facility.facility_name || facility.origin_name);
setRemoteTimezone(facility.facility_timezone || facility.src_timezone || 'UTC');
}
}
}, [remotesData, remoteSlug]);
@ -102,11 +102,12 @@ export default function useCourtSlots(
// Create remotesData format for RemoteSportInfo component
newRemotesData = {
remotes: [{
origin_slug: facilityInfo.facility_slug || remoteSlug,
origin_name: extractedRemoteName,
origin_logo_url: facilityInfo.facility_logo_url,
src_timezone: extractedTimezone,
facilities: [{
facility_id: facilityInfo.facility_id,
facility_slug: facilityInfo.facility_slug || remoteSlug,
facility_name: extractedRemoteName,
facility_logo_url: facilityInfo.facility_logo_url,
facility_timezone: extractedTimezone,
sports: [{
sport_slug: sportInfo.sport_slug || sportSlug,
sport_name: sportInfo.sport_name,

Loading…
Cancel
Save