WAGERBABE DOCS
All Stories
1-5-1-sidebar-integration-fix-broken-sidebarDoneEpic 1.5

Story 1.5.1: Fix Broken Sidebar - Optic Odds Integration

Status: done

Tasks

  • **Task 1: Verify Server Endpoint** (AC: #1)
    • 1.1: Test existing POST `/api/v1/optic-odds/fixtures` endpoint via API docs
    • 1.2: Verify endpoint accepts filters: league_id, limit, is_main, status
    • 1.3: Confirm response format matches OpticOddsFixturesResponse model
    • 1.4: Test with sample request (league_id="nfl", limit=50, status="unplayed")
    • 1.5: Verify JWT authentication requirement works correctly
  • **Task 2: Create/Update SportsSidebar Component** (AC: #1, #2, #3, #4)
    • 2.1: Locate existing `client/src/components/composite/sports-sidebar/SportsSidebar.tsx`
    • 2.2: Add TanStack Query integration with queryKey ['optic-odds-fixtures']
    • 2.3: Implement fixture fetching via POST to `/api/v1/optic-odds/fixtures`
    • 2.4: Add loading state with Skeleton components (5 cards)
    • 2.5: Add error state with retry button functionality
    • 2.6: Add empty state messaging ("No upcoming games")
    • 2.7: Implement league grouping logic (group fixtures by league.id)
    • 2.8: Add click handler to navigate to betting page with fixture ID
  • **Task 3: Implement TypeScript Types** (AC: #1)
    • 3.1: Define Fixture interface matching server response
    • 3.2: Define FixturesResponse interface with data and meta
    • 3.3: Add proper type annotations to component props and state
    • 3.4: Ensure TypeScript strict mode compliance
  • **Task 4: Configure TanStack Query** (AC: #5)
    • 4.1: Set staleTime to 60 seconds (1 minute)
    • 4.2: Set refetchInterval to 300 seconds (5 minutes)
    • 4.3: Enable background refetching on window focus
    • 4.4: Configure automatic retry (3 attempts with exponential backoff)
    • 4.5: Add query key dependency on selectedLeague state
  • **Task 5: Add Timezone Conversion** (AC: #1)
    • 5.1: Convert start_date ISO string to user's local timezone
    • 5.2: Format display as: "Jan 20, 5:00 PM" using toLocaleString()
    • 5.3: Test with games in different timezones
  • **Task 6: Styling & Responsiveness** (AC: #6)
    • 6.1: Apply Tailwind classes: w-64 (desktop), full width (mobile)
    • 6.2: Use bg-gray-50 for sidebar background (neutral)
    • 6.3: Game cards: bg-white p-3 rounded-lg shadow-sm hover:shadow-md
    • 6.4: Ensure minimum 44px touch targets for mobile
    • 6.5: Add overflow-y-auto for scrollable game list
    • 6.6: Test responsive behavior on mobile viewport
  • **Task 7: Integration Testing** (AC: #1, #2, #3, #4, #5)
    • 7.1: Test successful fixture loading with real API data
    • 7.2: Test loading state renders correctly
    • 7.3: Test error state and retry functionality
    • 7.4: Test empty state when no games available
    • 7.5: Test navigation to betting page on game click
    • 7.6: Test background refetch behavior
    • 7.7: Verify performance: <1 second initial load
  • **Task 8: Error Logging & Monitoring** (AC: #3)
    • 8.1: Add console.error logging for API failures (dev mode only)
    • 8.2: Include error context: endpoint, status code, error message
    • 8.3: Test error logging with simulated API failure

Progress

Tasks8/8
Acceptance Criteria0
Total Tasks8

Navigation

View Epic 1.5All Stories