♻️ 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:
@@ -3,3 +3,4 @@ export * from './user.constants';
|
||||
export * from './toast.constants';
|
||||
export * from './common.constant';
|
||||
export * from './playground.constants';
|
||||
export * from './redemption.constants';
|
||||
|
||||
29
web/src/constants/redemption.constants.js
Normal file
29
web/src/constants/redemption.constants.js
Normal 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'
|
||||
};
|
||||
Reference in New Issue
Block a user