MyClub/DOCS/LOGO_API_IMPLEMENTATION.md

Logo API Implementation Summary

Overview

Updated the HomePage to prioritize logoapi.sportcreative.eu for all team logos with FACR as fallback.

Changes Made

1. HomePage.tsx - State Management

• Added clubId state to store the club's UUID
• Extract club_id from settings and store it

2. Logo URL Generation Strategy

Priority Order:

1. LogoAPI (if team_id available): http://logoapi.sportcreative.eu/logos/{team_id}?format=svg
2. Local Overrides (from team logo overrides table)
3. FACR Original (fallback when logoapi doesn't have the logo)

3. Updated Functions

displayClubLogo (memoized)

// Now generates logoapi URL for main club logo
if (clubId) {
  return `http://logoapi.sportcreative.eu/logos/${clubId}?format=svg`;
}

getOverrideLogo(teamName?, teamId?, original?)

• Takes team ID as second parameter
• Returns logoapi URL if team_id is available
• Falls back to local overrides or FACR URL

getFallbackLogo(teamName?, original?)

• Helper function to get fallback logo
• Checks local overrides first
• Returns FACR original as final fallback

4. Data Structure Updates

Matches Data

• Now extracts home_id and away_id from FACR API
• Passes team IDs to getOverrideLogo()
• Logo URLs now point to logoapi with fallback chain

Tables/Standings Data

• Extracts team_id from FACR table data
• Stores both team_name and team_id
• Logo URLs use logoapi when team_id is available

5. Logo Usage Points

All logo <img> tags throughout the homepage now use:

• Club logo header: Uses displayClubLogo (logoapi)
• Match cards: Uses home_logo_url/away_logo_url with logoapi
• Tables/Standings: Uses logo_url with logoapi
• Next match section: All team logos use logoapi pattern

How It Works

Example Flow:

1. User visits homepage
2. Settings load → club_id extracted (7eacd9f0-bfa0-4928-a9b6-936140168f58)
3. Club logo displays: http://logoapi.sportcreative.eu/logos/7eacd9f0-bfa0-4928-a9b6-936140168f58?format=svg
4. Browser requests logo from logoapi
5. If logoapi has it → ✓ Displays
6. If logoapi doesn't have it → Browser's native error handling would need fallback

Browser Behavior

• When logoapi returns 404, the browser shows broken image
• Note: For full fallback support, onError handlers should be added to <img> tags
• This would require storing fallback URL alongside primary URL

Testing Checklist

• Club logo displays in header (logoapi)
• Match team logos display (logoapi with team IDs)
• Table team logos display (logoapi with team IDs)
• Logos fallback to FACR when logoapi doesn't have them
• Local overrides still work correctly
• All layouts (unified, magazine, pro, edge) work correctly

Future Enhancements

Add onError handlers to images for automatic fallback:

<img 
  src={logoapi_url} 
  onError={(e) => { 
    e.currentTarget.src = facr_fallback_url; 
  }} 
/>

Files Modified

• frontend/src/pages/HomePage.tsx

Related Systems

• Logo API: utils/sportLogosAPI.ts
• Team Logo Overrides: Admin matches/teams pages
• FACR Integration: Fetches team IDs automatically