mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
Increase build
This commit is contained in:
Jamie Brunton committed
1 parent
5bbc324290
commit
df4c4d486b
3 files changed
+908
No files matched your search
@@ -0,0 +1,233 @@
|
||||
# Mobile App Refactoring Tasks
|
||||
|
||||
Track progress by checking off completed items.
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Extract Shared Hooks
|
||||
|
||||
### 1.1 Ambient Orb Animation Hook
|
||||
- [ ] Create `src/hooks/useAmbientOrbAnimation.ts`
|
||||
- [ ] Extract animation logic from `app/(app)/swipe.tsx`
|
||||
- [ ] Update `app/(app)/swipe.tsx` to use hook
|
||||
- [ ] Update `app/(app)/chat/[id].tsx` to use hook
|
||||
- [ ] Update `src/components/SwipeCard.native.tsx` to use hook
|
||||
- [ ] Remove duplicate animation code from all files
|
||||
|
||||
### 1.2 Media Picker Hook
|
||||
- [ ] Create `src/hooks/useMediaPicker.ts`
|
||||
- [ ] Extract image picker logic from chat screen
|
||||
- [ ] Extract video picker logic from chat screen
|
||||
- [ ] Extract camera logic from chat screen
|
||||
- [ ] Update chat screen to use hook
|
||||
|
||||
### 1.3 Typing Indicator Hook
|
||||
- [ ] Create `src/hooks/useTypingIndicator.ts`
|
||||
- [ ] Extract broadcast channel logic from chat
|
||||
- [ ] Extract typing state management
|
||||
- [ ] Update chat screen to use hook
|
||||
|
||||
### 1.4 Message Subscription Hook
|
||||
- [ ] Create `src/hooks/useMessageSubscription.ts`
|
||||
- [ ] Extract real-time subscription logic
|
||||
- [ ] Extract message status update logic
|
||||
- [ ] Extract optimistic update logic
|
||||
- [ ] Update chat screen to use hook
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Shared UI Components
|
||||
|
||||
### 2.1 Decorative Separator
|
||||
- [ ] Create `src/components/ui/DecorativeSeparator.tsx`
|
||||
- [ ] Support diamond, dot, and line variants
|
||||
- [ ] Update `app/(app)/swipe.tsx` (6+ instances)
|
||||
- [ ] Update `app/(app)/chat/[id].tsx`
|
||||
- [ ] Update `src/components/SwipeTutorial.tsx`
|
||||
- [ ] Remove duplicate separator styles
|
||||
|
||||
### 2.2 Loading Overlay
|
||||
- [ ] Create `src/components/ui/LoadingOverlay.tsx`
|
||||
- [ ] Support spinner, shimmer, and progress variants
|
||||
- [ ] Extract UploadingSkeleton from chat screen
|
||||
- [ ] Update usage across app
|
||||
|
||||
### 2.3 Read Receipt
|
||||
- [ ] Create `src/components/ui/ReadReceipt.tsx`
|
||||
- [ ] Support sent, delivered, read states
|
||||
- [ ] Update chat screen MessageMeta
|
||||
- [ ] Remove inline receipt logic
|
||||
|
||||
### 2.4 Ambient Orbs Component
|
||||
- [ ] Create `src/components/ui/AmbientOrbs.tsx`
|
||||
- [ ] Use `useAmbientOrbAnimation` hook
|
||||
- [ ] Support default, chat, premium variants
|
||||
- [ ] Update swipe screen to use component
|
||||
- [ ] Update chat screen to use component
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Split Zustand Store
|
||||
|
||||
### 3.1 Create Store Structure
|
||||
- [ ] Create `src/store/` directory structure
|
||||
- [ ] Create `src/store/authStore.ts`
|
||||
- [ ] Create `src/store/matchStore.ts`
|
||||
- [ ] Create `src/store/packsStore.ts`
|
||||
- [ ] Create `src/store/messageStore.ts`
|
||||
- [ ] Create `src/store/subscriptionStore.ts`
|
||||
|
||||
### 3.2 Migrate Stores
|
||||
- [ ] Move `useAuthStore` to `authStore.ts`
|
||||
- [ ] Move `useMatchStore` to `matchStore.ts`
|
||||
- [ ] Move `usePacksStore` to `packsStore.ts`
|
||||
- [ ] Move `useMessageStore` to `messageStore.ts`
|
||||
- [ ] Move `useSubscriptionStore` to `subscriptionStore.ts`
|
||||
|
||||
### 3.3 Update Exports
|
||||
- [ ] Update `src/store/index.ts` to re-export all stores
|
||||
- [ ] Verify all imports still work
|
||||
- [ ] Delete old monolithic code from index.ts
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Decompose Chat Screen
|
||||
|
||||
### 4.1 Create Feature Structure
|
||||
- [ ] Create `src/features/chat/` directory
|
||||
- [ ] Create `src/features/chat/components/` directory
|
||||
- [ ] Create `src/features/chat/hooks/` directory
|
||||
- [ ] Create `src/features/chat/types.ts`
|
||||
|
||||
### 4.2 Extract Components
|
||||
- [ ] Extract `ChatHeader.tsx`
|
||||
- [ ] Extract `MessageContent.tsx`
|
||||
- [ ] Extract `ChatVideoPlayer.tsx`
|
||||
- [ ] Extract `MessageBubble.tsx`
|
||||
- [ ] Extract `TypingIndicator.tsx`
|
||||
- [ ] Extract `InputBar.tsx`
|
||||
- [ ] Extract `MediaMenu.tsx`
|
||||
- [ ] Extract `ChatMessages.tsx`
|
||||
- [ ] Extract `UploadProgress.tsx`
|
||||
|
||||
### 4.3 Extract Hooks
|
||||
- [ ] Create `useChatMessages.ts`
|
||||
- [ ] Create `useMediaUpload.ts`
|
||||
- [ ] Create `useVideoCache.ts`
|
||||
|
||||
### 4.4 Create Main Screen
|
||||
- [ ] Create `src/features/chat/ChatScreen.tsx`
|
||||
- [ ] Wire up all components and hooks
|
||||
- [ ] Create `src/features/chat/index.ts` exports
|
||||
- [ ] Update `app/(app)/chat/[id].tsx` to use feature
|
||||
|
||||
### 4.5 Cleanup
|
||||
- [ ] Remove old code from route file
|
||||
- [ ] Verify all functionality works
|
||||
- [ ] Test real-time messaging
|
||||
- [ ] Test media upload/download
|
||||
- [ ] Test video playback
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Decompose Profile Screen
|
||||
|
||||
### 5.1 Create Feature Structure
|
||||
- [ ] Create `src/features/profile/` directory
|
||||
- [ ] Create `src/features/profile/components/` directory
|
||||
- [ ] Create `src/features/profile/hooks/` directory
|
||||
|
||||
### 5.2 Extract Components
|
||||
- [ ] Extract `ProfileHeader.tsx`
|
||||
- [ ] Extract `CoupleStatus.tsx`
|
||||
- [ ] Extract `SettingsSection.tsx`
|
||||
- [ ] Extract `NotificationSettings.tsx`
|
||||
- [ ] Extract `PrivacySettings.tsx`
|
||||
- [ ] Extract `AppearanceSettings.tsx`
|
||||
- [ ] Extract `DangerZone.tsx`
|
||||
|
||||
### 5.3 Extract Hooks
|
||||
- [ ] Create `useProfileSettings.ts`
|
||||
- [ ] Create `useCoupleManagement.ts`
|
||||
|
||||
### 5.4 Create Main Screen
|
||||
- [ ] Create `src/features/profile/ProfileScreen.tsx`
|
||||
- [ ] Create `src/features/profile/index.ts` exports
|
||||
- [ ] Update `app/(app)/profile.tsx` to use feature
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: Component Organization
|
||||
|
||||
### 6.1 Reorganize Components
|
||||
- [ ] Create `src/components/feedback/` directory
|
||||
- [ ] Move `FeedbackModal.tsx` to feedback/
|
||||
- [ ] Move `QuestionFeedbackModal.tsx` to feedback/
|
||||
- [ ] Create `src/components/tutorials/` directory
|
||||
- [ ] Move `SwipeTutorial.tsx` to tutorials/
|
||||
- [ ] Move `MatchesTutorial.tsx` to tutorials/
|
||||
- [ ] Create `src/components/paywall/` directory
|
||||
- [ ] Move `Paywall.tsx` to paywall/
|
||||
- [ ] Create `src/components/swipe/` directory
|
||||
- [ ] Move `SwipeCard.native.tsx` to swipe/
|
||||
- [ ] Move `SwipeCard.web.tsx` to swipe/
|
||||
- [ ] Move `SwipeCardPremium.tsx` to swipe/
|
||||
|
||||
### 6.2 Update Imports
|
||||
- [ ] Update all imports for moved components
|
||||
- [ ] Create index.ts files for each directory
|
||||
- [ ] Verify no broken imports
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: Testing Infrastructure
|
||||
|
||||
### 7.1 Setup
|
||||
- [ ] Install testing dependencies (jest, testing-library)
|
||||
- [ ] Configure jest for React Native
|
||||
- [ ] Create test utilities and mocks
|
||||
|
||||
### 7.2 Hook Tests
|
||||
- [ ] Test `useAmbientOrbAnimation`
|
||||
- [ ] Test `useMediaPicker`
|
||||
- [ ] Test `useTypingIndicator`
|
||||
- [ ] Test `useMessageSubscription`
|
||||
- [ ] Test `useChatMessages`
|
||||
- [ ] Test `useMediaUpload`
|
||||
|
||||
### 7.3 Store Tests
|
||||
- [ ] Test `authStore` actions
|
||||
- [ ] Test `matchStore` actions
|
||||
- [ ] Test `packsStore` actions
|
||||
- [ ] Test `messageStore` actions
|
||||
- [ ] Test `subscriptionStore` actions
|
||||
|
||||
### 7.4 Component Tests
|
||||
- [ ] Test `DecorativeSeparator` variants
|
||||
- [ ] Test `ReadReceipt` states
|
||||
- [ ] Test `InputBar` interactions
|
||||
- [ ] Test `MessageBubble` rendering
|
||||
|
||||
---
|
||||
|
||||
## Progress Summary
|
||||
|
||||
| Phase | Status | Completion |
|
||||
|-------|--------|------------|
|
||||
| 1. Shared Hooks | Not Started | 0% |
|
||||
| 2. Shared UI Components | Not Started | 0% |
|
||||
| 3. Split Store | Not Started | 0% |
|
||||
| 4. Decompose Chat | Not Started | 0% |
|
||||
| 5. Decompose Profile | Not Started | 0% |
|
||||
| 6. Component Organization | Not Started | 0% |
|
||||
| 7. Testing | Not Started | 0% |
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Each phase can be completed independently
|
||||
- Test after each component extraction
|
||||
- Keep original files until phase is verified
|
||||
- Follow DESIGN.md for any UI changes
|
||||
- Do not modify tab bar background styling
|
||||
Reference in new issue
Block a user