♻️ 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:
@@ -4,7 +4,7 @@ import TokensTable from './TokensTable.jsx';
|
||||
import TokensActions from './TokensActions.jsx';
|
||||
import TokensFilters from './TokensFilters.jsx';
|
||||
import TokensDescription from './TokensDescription.jsx';
|
||||
import EditToken from '../../../pages/Token/EditToken';
|
||||
import EditTokenModal from './modals/EditTokenModal';
|
||||
import { useTokensData } from '../../../hooks/tokens/useTokensData';
|
||||
|
||||
const TokensPage = () => {
|
||||
@@ -21,6 +21,7 @@ const TokensPage = () => {
|
||||
selectedKeys,
|
||||
setEditingToken,
|
||||
setShowEdit,
|
||||
batchCopyTokens,
|
||||
batchDeleteTokens,
|
||||
copyText,
|
||||
|
||||
@@ -41,7 +42,7 @@ const TokensPage = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<EditToken
|
||||
<EditTokenModal
|
||||
refresh={refresh}
|
||||
editingToken={editingToken}
|
||||
visiable={showEdit}
|
||||
@@ -63,6 +64,7 @@ const TokensPage = () => {
|
||||
selectedKeys={selectedKeys}
|
||||
setEditingToken={setEditingToken}
|
||||
setShowEdit={setShowEdit}
|
||||
batchCopyTokens={batchCopyTokens}
|
||||
batchDeleteTokens={batchDeleteTokens}
|
||||
copyText={copyText}
|
||||
t={t}
|
||||
|
||||
Reference in New Issue
Block a user