MyClub/DOCS/BLOG_MATCH_LINK_FIX.md

Blog Match Link Fix

Problem

When creating a new blog article with a match link in the admin panel, the match link was not being saved to the database. The article was created successfully, but the association with the FACR match was lost.

Root Cause

The match linking logic was placed in the React Query mutation's onSuccess callback. When the page re-rendered after article creation (especially when invalidating queries), a React error #310 was occurring, which interrupted the onSuccess callback before the match linking API call could complete.

Solution

Moved the match linking logic from the mutation's onSuccess callback directly into the onSubmit function. This ensures the match linking happens synchronously after article creation, before the modal closes and queries are invalidated.

Changes Made

1. Match Linking in onSubmit Function

File: frontend/src/pages/admin/ArticlesAdminPage.tsx

• For new articles: After createArticle() completes, immediately call putArticleMatchLink() with the new article ID
• For existing articles: After updateArticle() completes, call putArticleMatchLink() to update or create the link
• All match linking now happens within the same try-catch block as article creation/update
• Modal only closes after all operations complete successfully

2. Simplified Mutation Callbacks

• createMut.onSuccess: Only handles query invalidation and state cleanup
• updateMut.onSuccess: Only handles query invalidation
• Removed duplicate match linking code from callbacks
• Success toasts moved to onSubmit after all operations complete

3. Enhanced Error Handling

• Added try-catch blocks around match linking API calls
• Separate error messages for article creation vs. match linking failures
• If article creation succeeds but match linking fails, user gets a warning toast with instructions
• All errors logged to console for debugging

4. Added Debug Logging

• Log match link state before submission
• Log article creation success
• Log match linking attempts and results
• Helps diagnose issues in production

5. Fixed MatchLinkBadge Loading State

• Added loading state check to prevent React errors when refetching
• Shows "Načítání..." badge while match link data is loading

Testing Instructions

Test 1: Create New Article with Match Link

1. Go to Admin → Články
2. Click "Nový článek"
3. Fill in required fields (Název, Kategorie)
4. Switch to "Základní" tab
5. Select a match from the picker
6. Click "Uložit"
7. Expected: Toast shows "Článek vytvořen a propojen se zápasem"
8. Verify: Article list shows match badge with match details

Test 2: Create Article Without Match Link

1. Create article without selecting a match
2. Expected: Toast shows "Článek byl úspěšně vytvořen"
3. Verify: Article list shows "Nepropojeno" badge

Test 3: Update Existing Article Match Link

1. Open existing article for editing
2. Select a different match
3. Click "Uložit"
4. Expected: Toast shows "Článek aktualizován a propojen se zápasem"
5. Verify: Badge updates to show new match

Test 4: Match Linking Failure (Backend Error)

1. Simulate backend error (e.g., stop backend)
2. Try to create article with match link
3. Expected: Toast shows "Článek vytvořen, ale propojení se zápasem selhalo"
4. Verify: Article is created but without match link

API Endpoints Used

• POST /api/v1/articles - Create article
• PUT /api/v1/articles/:id - Update article
• POST /api/v1/articles/:id/match-link - Create/update match link
• GET /api/v1/articles/:id/match-link - Get match link (for badge display)
• DELETE /api/v1/articles/:id/match-link - Delete match link

Database Tables

• articles - Main article data
• article_match_links - Junction table linking articles to FACR match IDs

State Management

• tempMatchLink - Stores selected match ID for new articles
• matchIdInput - Stores selected match ID (UI input)
• linkedMatchId - Stores confirmed linked match ID after successful save

Future Improvements

• Consider adding optimistic updates to show match link immediately
• Add bulk match linking for multiple articles
• Show match preview in article form before saving
• Add match link history/audit log