bowong
/
expo-popcore-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
expo-popcore-app/task_plan.md

2.7 KiB
Raw Blame History

Task Plan: Backend Integration & UI Optimization

Goal

Integrate @repo/sdk backend APIs into the existing Expo frontend and add essential UI optimizations (loading states, refresh, pagination).

Context

  • Frontend pages are complete
  • Need to connect to @repo/sdk backend
  • Add loading/refresh/nextPage logic
  • Tech stack: Expo + React Native + Zustand + TailwindCSS

Phases

Phase 1: Discovery [completed]

  • Locate @repo/sdk package and understand its API structure
  • Identify all frontend pages/screens that need backend integration
  • Map out current state management structure (Zustand stores)
  • Document API endpoints and data models

Key Findings:

  • 23 controllers available in @repo/sdk
  • 19 screens total (15 need API, 4 static)
  • Only 1 Zustand store (categories)
  • 15 custom hooks already exist
  • Some screens have partial integration

Phase 2: Enhance Existing Hooks [pending]

  • Review existing hooks (use-templates, use-template-detail, etc.)
  • Add missing loading states where needed
  • Add refresh functionality to hooks
  • Ensure pagination is properly implemented
  • Add error retry mechanisms

Phase 3: Create Missing Hooks [pending]

  • Video list hook - 不需要，video.tsx已使用useTemplates
  • ⚠️ Messages/chat hook - SDK无消息列表接口，需要与后端确认或定制开发
  • ⚠️ User profile hook - 需要确认SDK中是否有用户信息接口
  • Works list hook enhancements (for worksList.tsx)
  • 审查其他页面是否需要新的hooks

Phase 4: UI Integration - Tab Screens [pending]

  • Home tab: Add refresh, loading states
  • Video tab: Add pagination, loading, refresh
  • Message tab: Add real-time updates, loading
  • My Profile tab: Add refresh, loading states

Phase 5: UI Integration - Main Screens [pending]

  • Generation Record: Add pagination, refresh
  • Works List: Add pagination, refresh
  • Search screens: Add debounce, pagination, loading
  • Template Detail: Add loading states
  • Generate Video: Add progress tracking

Phase 6: Global UI Components [pending]

  • Create reusable RefreshControl component
  • Create reusable LoadingState component
  • Create reusable ErrorState component with retry
  • Create reusable PaginationLoader component

Phase 7: Testing & Validation [pending]

  • Test all API integrations
  • Verify loading states
  • Test refresh functionality
  • Validate pagination behavior
  • Test error handling and retry

Decisions Log

Decision Rationale Date
- - -

Errors Encountered

Error Attempt Resolution
- - -

Files Modified

  • (To be populated as work progresses)