85 lines
3.5 KiB
Markdown
85 lines
3.5 KiB
Markdown
# UserPageEdit Refactoring Plan
|
|
|
|
The `UserPageEdit.tsx` component has grown too large (~900 lines) and handles too many responsibilities. This plan outlines the steps to decompose it into manageable, single-purpose components and custom hooks, leveraging the existing Action System for cleaner communication.
|
|
|
|
## 1. Goal
|
|
Split `UserPageEdit.tsx` to improve maintainability, verify separation of concerns, and fully utilize the `src/actions/` system to decouple UI components (like the Ribbon) from the logic.
|
|
|
|
## 2. Proposed Architecture
|
|
|
|
### 2.1. Directories
|
|
`src/pages/editor/`
|
|
- `components/`
|
|
- `hooks/`
|
|
- `UserPageEdit.tsx` (The main entry point, simplified)
|
|
|
|
### 2.2. Custom Hooks & Logic
|
|
Move state and logic into `src/pages/editor/hooks/`. Crucially, we will use `useActions` to register capabilities.
|
|
|
|
1. **`usePageEditorState.ts`**
|
|
- Manages UI state: `isSidebarCollapsed`, `showHierarchy`, `showTypeFields`, `selectedWidgetId`.
|
|
- **Action Registration**: Registers actions like `View/ToggleSidebar`, `View/ToggleHierarchy`, `View/ToggleTypeFields`.
|
|
|
|
2. **`usePageTemplates.ts`**
|
|
- Manages template state.
|
|
- **Action Registration**: Registers `File/LoadTemplate`, `File/SaveTemplate`.
|
|
|
|
3. **`useEmailActions.ts`**
|
|
- Manages email state.
|
|
- **Action Registration**: Registers `Email/SendTest`, `Email/TogglePreview`.
|
|
|
|
4. **`useEditorActions.ts` (Core Logic)**
|
|
- Wraps `useLayout` and `useLayouts` context methods.
|
|
- **Action Registration**:
|
|
- `Edit/Undo`
|
|
- `Edit/Redo`
|
|
- `File/Save`
|
|
- `File/ImportLayout`
|
|
- `File/ExportLayout`
|
|
- `Edit/AddContainer`
|
|
- `Edit/AddWidget`
|
|
- `Edit/DeletePage`
|
|
|
|
### 2.3. Components (UI Extraction)
|
|
Move UI sections into `src/pages/editor/components/`:
|
|
|
|
1. **`EditorSidebar.tsx`**
|
|
- Subscribes to UI state via context or props (managed by `UserPageEdit`).
|
|
- Handlers can trigger Actions.
|
|
- Renders `HierarchyTree`.
|
|
|
|
2. **`EditorMainArea.tsx`**
|
|
- The central workspace.
|
|
- Renders `GenericCanvas`.
|
|
|
|
3. **`EditorRightPanel.tsx`**
|
|
- The properties panel.
|
|
|
|
4. **`PageRibbonBar.tsx` (Refactor)**
|
|
- **Change**: Instead of accepting 30+ props, it will use `useActions()` to retrieve registered actions (`Save`, `Undo`, `Redo`, `ToggleVisibility`, etc.) and bind them to buttons.
|
|
- Props will be minimized to just `page` (for context) and layout specific data.
|
|
|
|
5. **`EditorDialogs.tsx`**
|
|
- A container component that renders all global dialogs (Email, Settings, Templates) based on state.
|
|
|
|
## 3. Implementation Steps
|
|
|
|
1. **Setup Directory**: Create `src/pages/editor/` structure.
|
|
2. **RefactorHooks**:
|
|
- Implement `useEditorActions` to register core actions.
|
|
- Implement `usePageEditorState` for UI toggles.
|
|
3. **Refactor `PageRibbonBar`**:
|
|
- Update it to use `useActions().getActionsByGroup('History')` etc.
|
|
- Remove prop drilling for `onUndo`, `onRedo`, `onSave`.
|
|
4. **Extract Components**:
|
|
- Move JSX to `EditorSidebar`, `EditorMainArea`, `EditorRightPanel`.
|
|
5. **Reassemble `UserPageEdit`**:
|
|
- Initialize hooks.
|
|
- Render `ActionProvider` (if not at top level) or ensure hooks run inside it.
|
|
- Pass minimal props to children.
|
|
|
|
## 4. Verification
|
|
- **Ribbon Functionality**: Verify buttons (Undo, Redo, Save) are active/disabled correctly via Action state.
|
|
- **Shortcuts**: Verify Ctrl+Z/Y work via the Action registry.
|
|
- **Layout**: Verify UI allows adding widgets/containers.
|