114 lines
4.1 KiB
Markdown
114 lines
4.1 KiB
Markdown
# State Management Consolidation Plan
|
|
|
|
## Problem Analysis
|
|
|
|
### Current Mess
|
|
The codebase has **multiple competing state management solutions** causing confusion and redundancy:
|
|
|
|
#### 1. `/apps/website/components/shared/state/` (The "New" Solution)
|
|
- **StateContainer.tsx** - Combined wrapper for all states (loading, error, empty, success)
|
|
- **LoadingWrapper.tsx** - 5 variants: spinner, skeleton, full-screen, inline, card
|
|
- **ErrorDisplay.tsx** - 4 variants: full-screen, inline, card, toast
|
|
- **EmptyState.tsx** - 3 variants + pre-configured states + illustrations
|
|
- **❌ Missing types file**: `../types/state.types` (deleted but still imported)
|
|
|
|
#### 2. `/apps/website/components/shared/` (Legacy Simple Components)
|
|
- **EmptyState.tsx** - Simple empty state (39 lines)
|
|
- **LoadingState.tsx** - Simple loading spinner (15 lines)
|
|
|
|
#### 3. `/apps/website/components/errors/` (Alternative Error Solutions)
|
|
- **ErrorDisplay.tsx** - API error focused (different API than shared/state)
|
|
- **EnhancedErrorBoundary.tsx** - React error boundary
|
|
- **ApiErrorBoundary.tsx** - API error boundary
|
|
- **EnhancedFormError.tsx** - Form error handling
|
|
|
|
#### 4. Domain-Specific Solutions
|
|
- **FeedEmptyState.tsx** - Feed-specific empty state
|
|
- **EmptyState.tsx** in leagues - Different design system
|
|
|
|
### Core Issues
|
|
1. **Missing types file** causing import errors in all state components
|
|
2. **Multiple similar components** with different APIs
|
|
3. **Inconsistent naming patterns**
|
|
4. **Redundant functionality**
|
|
5. **No single source of truth**
|
|
6. **Mixed concerns** between generic and domain-specific
|
|
|
|
## Solution Strategy
|
|
|
|
### Phase 1: Create Unified Types
|
|
Create `apps/website/components/shared/state/types.ts` with all type definitions:
|
|
- EmptyState types
|
|
- LoadingState types
|
|
- ErrorDisplay types
|
|
- StateContainer types
|
|
- Convenience prop types
|
|
|
|
### Phase 2: Consolidate Components
|
|
Keep only the comprehensive solution in `/apps/website/components/shared/state/`:
|
|
- Update imports to use new types file
|
|
- Ensure all components work with unified types
|
|
- Remove any redundant internal type definitions
|
|
|
|
### Phase 3: Remove Redundant Files
|
|
Delete:
|
|
- `/apps/website/components/shared/EmptyState.tsx` (legacy)
|
|
- `/apps/website/components/shared/LoadingState.tsx` (legacy)
|
|
- Keep domain-specific ones if they serve unique purposes
|
|
|
|
### Phase 4: Update All Imports
|
|
Find and update all imports across the codebase to use the consolidated solution.
|
|
|
|
## Detailed Implementation
|
|
|
|
### Step 1: Create Types File
|
|
**File**: `apps/website/components/shared/state/types.ts`
|
|
|
|
```typescript
|
|
// All type definitions for state management
|
|
// EmptyState, LoadingWrapper, ErrorDisplay, StateContainer props
|
|
// Plus convenience types
|
|
```
|
|
|
|
### Step 2: Update State Components
|
|
**Files to update**:
|
|
- `EmptyState.tsx` - Import from `./types.ts`
|
|
- `LoadingWrapper.tsx` - Import from `./types.ts`
|
|
- `ErrorDisplay.tsx` - Import from `./types.ts`
|
|
- `StateContainer.tsx` - Import from `./types.ts`
|
|
|
|
### Step 3: Remove Legacy Files
|
|
**Delete**:
|
|
- `apps/website/components/shared/EmptyState.tsx`
|
|
- `apps/website/components/shared/LoadingState.tsx`
|
|
|
|
### Step 4: Update External Imports
|
|
**Search for**: `from '@/components/shared/EmptyState'` or `from '@/components/shared/LoadingState'`
|
|
**Replace with**: `from '@/components/shared/state/EmptyState'` or `from '@/components/shared/state/LoadingWrapper'`
|
|
|
|
## Files to Modify
|
|
|
|
### Create:
|
|
1. `apps/website/components/shared/state/types.ts`
|
|
|
|
### Update:
|
|
1. `apps/website/components/shared/state/EmptyState.tsx`
|
|
2. `apps/website/components/shared/state/LoadingWrapper.tsx`
|
|
3. `apps/website/components/shared/state/ErrorDisplay.tsx`
|
|
4. `apps/website/components/shared/state/StateContainer.tsx`
|
|
|
|
### Delete:
|
|
1. `apps/website/components/shared/EmptyState.tsx`
|
|
2. `apps/website/components/shared/LoadingState.tsx`
|
|
|
|
### Update Imports in:
|
|
- Multiple app pages and templates
|
|
- Components that use the old paths
|
|
|
|
## Expected Benefits
|
|
1. ✅ Single source of truth for state types
|
|
2. ✅ Consistent API across all state components
|
|
3. ✅ No import errors
|
|
4. ✅ Reduced file count and complexity
|
|
5. ✅ Better maintainability
|
|
6. ✅ Clear separation between generic and domain-specific solutions |