ray
66 lines
3.6 KiB
Markdown
66 lines
3.6 KiB
Markdown
# Reference: RepairOrders.tsx Extraction (2026-07-07)
|
|
|
|
Concrete example of the full extraction pattern on a 1,698-line file.
|
|
|
|
## Source File
|
|
|
|
`src/pages/RepairOrders.tsx` — 1,698 lines, 12 inline component definitions,
|
|
12 pure helper functions, 5 type aliases, 3 localStorage helpers.
|
|
|
|
## Created Files (15 + 1 barrel)
|
|
|
|
| File | Contents |
|
|
|------|----------|
|
|
| `src/lib/repairOrders.ts` | `calcDueTime`, `formatTimeRemaining`, `getUrgencyClass`, `formatDueDateTime`, `getCompletedMetricDate`, `isWithinCompletedRange`, `sortCompletedOrders`, `ratingLabel`, `displayCustomerName`, `sortOrders`, `normalizeRO`, `getStatusChips` |
|
|
| `src/components/repairOrders/types.ts` | `TabId`, `CompletedRangeFilter`, `CompletedStatusFilter`, `CompletedRatingFilter`, `SavedView`, `TABS`, `SAVED_VIEWS_KEY`, `loadSavedViews`, `persistSavedViews` |
|
|
| `src/components/repairOrders/StatusBadge.tsx` | Inline badge + `StatusBadgeAuto` convenience wrapper |
|
|
| `src/components/repairOrders/RowProgressBar.tsx` | Inline progress bar (depended on `roProgress` from status lib) |
|
|
| `src/components/repairOrders/TechNames.tsx` | Tech name pills display |
|
|
| `src/components/repairOrders/CustomerTypeBadge.tsx` | Waiter/drop-off toggle badge (calls `useSettings` + `getCustomerTypeLabels`) |
|
|
| `src/components/repairOrders/TimeRemainingCell.tsx` | Countdown with urgency coloring, `AlertTriangle` icon |
|
|
| `src/components/repairOrders/LoadingSkeleton.tsx` | Animated placeholder skeleton |
|
|
| `src/components/repairOrders/EmptyState.tsx` | Per-tab empty state with `Wrench` icon, conditional "Create RO" button |
|
|
| `src/components/repairOrders/ErrorState.tsx` | Delegates to shared `ListError` component |
|
|
| `src/components/repairOrders/TabButton.tsx` | Tab with active/inactive styling and optional count badge |
|
|
| `src/components/repairOrders/ROModal.tsx` | Create/edit modal wrapping shared `ROForm` |
|
|
| `src/components/repairOrders/FragmentRow.tsx` | Already `memo()`'d — active/in-progress table row, 11 columns |
|
|
| `src/components/repairOrders/CompletedRow.tsx` | Already `memo()`'d — completed table row, 9 columns |
|
|
| `src/components/repairOrders/index.ts` | Barrel: all types + all components re-exported |
|
|
|
|
## Result
|
|
|
|
- Main file: 1,698 → 923 lines (45.6% reduction)
|
|
- Build: 0 errors (382ms)
|
|
- Lint: 0 errors, 0 new warnings (18 pre-existing)
|
|
- Tests: 86 passed, 12 files (unchanged)
|
|
|
|
## Issues Encountered & Fixes
|
|
|
|
1. **`isVoided` not re-exported from lib** — `FragmentRow` and `CompletedRow`
|
|
imported `isVoided` from `../../lib/repairOrders` but `isVoided` belongs to
|
|
`roEvents`, not the new lib helpers. **Fix:** import `isVoided` directly from
|
|
`../../lib/roEvents` in the component files.
|
|
|
|
2. **Unused imports in main file** — `ShopSettings` type, `TechNames` component,
|
|
and several lucide icons (`Wrench`, `AlertTriangle`, `ChevronRight`, `UserX`,
|
|
`CheckSquare`, `Square`) were only used by now-extracted components.
|
|
**Fix:** removed them from the main file's imports.
|
|
|
|
3. **Duplicate dependency in useEffect** — `fetchTechAssignments` appeared twice
|
|
in the dependency array after the rewrite (the original had it once; the
|
|
rewrite accidentally duplicated it). **Fix:** removed the duplicate.
|
|
|
|
4. **Missing dependency in useCallback** — `handleToggleCustomerType` used
|
|
`setOrders` in its closure via `setOrders` but had an empty dependency array.
|
|
**Fix:** added `[setOrders]`.
|
|
|
|
## Timeline
|
|
|
|
- Read source file: ~2 minutes
|
|
- Create lib + types: ~1 minute
|
|
- Create 12 component files: ~4 minutes
|
|
- Create barrel: ~30 seconds
|
|
- Rewrite main file: ~5 minutes
|
|
- Fix lint errors + verify: ~2 minutes
|
|
- Total: ~15 minutes (including context gathering)
|