96 lines
4.0 KiB
Markdown
96 lines
4.0 KiB
Markdown
# Scheduling Component Refactoring Summary
|
|
|
|
## Overview
|
|
|
|
The `Scheduling.tsx` file (originally 1832 lines) has been refactored into a modular structure with reusable components, hooks, and better organization.
|
|
|
|
## New Structure
|
|
|
|
```
|
|
scheduling-remote/src/components/
|
|
├── Scheduling.tsx # Backward compatibility re-export
|
|
└── scheduling/
|
|
├── types.ts # Shared types and interfaces
|
|
├── Scheduling.tsx # Main router component (~100 lines)
|
|
├── AvailabilityCalendar.tsx # Availability calendar component
|
|
├── ui/ # Reusable UI components
|
|
│ ├── BackButton.tsx # Back navigation button
|
|
│ ├── SchedulingCard.tsx # Card component for main view
|
|
│ ├── TimeSlotModal.tsx # Modal for adding time slots
|
|
│ └── DropdownCurtain.tsx # Reusable dropdown/accordion
|
|
├── views/ # Main view components
|
|
│ ├── ViewSchedule.tsx # View schedule component
|
|
│ ├── IndicateAvailability.tsx # Indicate availability view
|
|
│ └── ScheduleExperimentImpl.tsx # Temporary wrapper (TODO: further refactor)
|
|
└── hooks/ # Custom hooks
|
|
└── useConductors.ts # Conductor management hook
|
|
```
|
|
|
|
## What Was Extracted
|
|
|
|
### 1. **Shared Types** (`types.ts`)
|
|
- `CalendarEvent` interface
|
|
- `SchedulingProps` interface
|
|
- `SchedulingView` type
|
|
- `ScheduledRepetition` interface
|
|
- Re-exports of service types
|
|
|
|
### 2. **Reusable UI Components** (`ui/`)
|
|
- **BackButton**: Consistent back navigation
|
|
- **SchedulingCard**: Reusable card component for the main scheduling view
|
|
- **TimeSlotModal**: Modal for adding/editing time slots
|
|
- **DropdownCurtain**: Reusable accordion/dropdown component
|
|
|
|
### 3. **View Components** (`views/`)
|
|
- **ViewSchedule**: Complete schedule view (simplified, placeholder)
|
|
- **IndicateAvailability**: Wrapper for availability calendar
|
|
- **ScheduleExperimentImpl**: Temporary wrapper (original implementation still in old file)
|
|
|
|
### 4. **Custom Hooks** (`hooks/`)
|
|
- **useConductors**: Manages conductor data, selection, colors, and availability
|
|
|
|
### 5. **Main Components**
|
|
- **Scheduling.tsx**: Main router component (reduced from ~220 lines to ~100 lines)
|
|
- **AvailabilityCalendar.tsx**: Extracted availability calendar (moved from inline component)
|
|
|
|
## Benefits
|
|
|
|
1. **Maintainability**: Each component has a single, clear responsibility
|
|
2. **Reusability**: UI components can be reused across different views
|
|
3. **Testability**: Smaller units are easier to test in isolation
|
|
4. **Readability**: Easier to understand and navigate the codebase
|
|
5. **Organization**: Clear separation of concerns
|
|
|
|
## File Size Reduction
|
|
|
|
- **Original Scheduling.tsx**: 1832 lines
|
|
- **New main Scheduling.tsx**: ~100 lines (95% reduction)
|
|
- **Total new structure**: Better organized across multiple focused files
|
|
|
|
## Backward Compatibility
|
|
|
|
The original `Scheduling.tsx` file is maintained for backward compatibility and re-exports the new modular component. The `ScheduleExperiment` function is still exported from the original file location.
|
|
|
|
## TODO / Future Improvements
|
|
|
|
1. **Further refactor ScheduleExperiment**:
|
|
- Extract into smaller subcomponents (ConductorPanel, ExperimentPhasePanel, etc.)
|
|
- Create additional hooks (useExperimentPhases, useScheduling, useCalendarEvents)
|
|
- Move implementation from old file to new structure
|
|
|
|
2. **Additional reusable components**:
|
|
- Experiment item component
|
|
- Repetition item component
|
|
- Calendar controls component
|
|
|
|
3. **Testing**:
|
|
- Add unit tests for extracted components
|
|
- Add integration tests for hooks
|
|
|
|
## Migration Notes
|
|
|
|
- All imports from `./components/Scheduling` continue to work
|
|
- The new structure is in `./components/scheduling/`
|
|
- No breaking changes to the public API
|
|
|