79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
# 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]
|
||
- [x] Locate @repo/sdk package and understand its API structure
|
||
- [x] Identify all frontend pages/screens that need backend integration
|
||
- [x] Map out current state management structure (Zustand stores)
|
||
- [x] 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]
|
||
- [x] ~~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)
|