♻️ refactor(components): restructure RedemptionsTable to modular architecture

Refactor the monolithic RedemptionsTable component (614 lines) into a clean,
modular structure following the established tokens component pattern.

### Changes Made:

**New Components:**
- `RedemptionsColumnDefs.js` - Extract table column definitions and render logic
- `RedemptionsActions.jsx` - Extract action buttons (add, batch copy, clear invalid)
- `RedemptionsFilters.jsx` - Extract search and filter form components
- `RedemptionsDescription.jsx` - Extract description area component
- `redemptions/index.jsx` - Main container component managing state and composition

**New Hook:**
- `useRedemptionsData.js` - Extract all data management, CRUD operations, and business logic

**New Constants:**
- `redemption.constants.js` - Extract redemption status, actions, and form constants

**Architecture Changes:**
- Transform RedemptionsTable.jsx into pure table rendering component
- Move state management and component composition to index.jsx
- Implement consistent prop drilling pattern matching tokens module
- Add memoization for performance optimization
- Centralize translation function distribution

### Benefits:
- **Maintainability**: Each component has single responsibility
- **Reusability**: Components and hooks can be used elsewhere
- **Testability**: Individual modules can be unit tested
- **Team Collaboration**: Multiple developers can work on different modules
- **Consistency**: Follows established architectural patterns

### File Structure:
```
redemptions/
├── index.jsx                    # Main container (state + composition)
├── RedemptionsTable.jsx        # Pure table component
├── RedemptionsActions.jsx      # Action buttons
├── RedemptionsFilters.jsx      # Search/filter form
├── RedemptionsDescription.jsx  # Description area
└── RedemptionsColumnDefs.js    # Column definitions
This commit is contained in:
t0ng7u
2025-07-19 00:12:04 +08:00
parent 42a26f076a
commit c05d6f7cdf
19 changed files with 1117 additions and 730 deletions

View File

@@ -3,3 +3,4 @@ export * from './user.constants';
export * from './toast.constants';
export * from './common.constant';
export * from './playground.constants';
export * from './redemption.constants';

View File

@@ -0,0 +1,29 @@
// Redemption code status constants
export const REDEMPTION_STATUS = {
UNUSED: 1, // Unused
DISABLED: 2, // Disabled
USED: 3, // Used
};
// Redemption code status display mapping
export const REDEMPTION_STATUS_MAP = {
[REDEMPTION_STATUS.UNUSED]: {
color: 'green',
text: '未使用'
},
[REDEMPTION_STATUS.DISABLED]: {
color: 'red',
text: '已禁用'
},
[REDEMPTION_STATUS.USED]: {
color: 'grey',
text: '已使用'
}
};
// Action type constants
export const REDEMPTION_ACTIONS = {
DELETE: 'delete',
ENABLE: 'enable',
DISABLE: 'disable'
};