mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-30 22:21:46 +00:00
c05d6f7cdf
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
90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import CardPro from '../../common/ui/CardPro';
|
|
import RedemptionsTable from './RedemptionsTable.jsx';
|
|
import RedemptionsActions from './RedemptionsActions.jsx';
|
|
import RedemptionsFilters from './RedemptionsFilters.jsx';
|
|
import RedemptionsDescription from './RedemptionsDescription.jsx';
|
|
import EditRedemptionModal from './modals/EditRedemptionModal';
|
|
import { useRedemptionsData } from '../../../hooks/redemptions/useRedemptionsData';
|
|
|
|
const RedemptionsPage = () => {
|
|
const redemptionsData = useRedemptionsData();
|
|
|
|
const {
|
|
// Edit state
|
|
showEdit,
|
|
editingRedemption,
|
|
closeEdit,
|
|
refresh,
|
|
|
|
// Actions state
|
|
selectedKeys,
|
|
setEditingRedemption,
|
|
setShowEdit,
|
|
batchCopyRedemptions,
|
|
batchDeleteRedemptions,
|
|
|
|
// Filters state
|
|
formInitValues,
|
|
setFormApi,
|
|
searchRedemptions,
|
|
loading,
|
|
searching,
|
|
|
|
// UI state
|
|
compactMode,
|
|
setCompactMode,
|
|
|
|
// Translation
|
|
t,
|
|
} = redemptionsData;
|
|
|
|
return (
|
|
<>
|
|
<EditRedemptionModal
|
|
refresh={refresh}
|
|
editingRedemption={editingRedemption}
|
|
visiable={showEdit}
|
|
handleClose={closeEdit}
|
|
/>
|
|
|
|
<CardPro
|
|
type="type1"
|
|
descriptionArea={
|
|
<RedemptionsDescription
|
|
compactMode={compactMode}
|
|
setCompactMode={setCompactMode}
|
|
t={t}
|
|
/>
|
|
}
|
|
actionsArea={
|
|
<div className="flex flex-col md:flex-row justify-between items-center gap-2 w-full">
|
|
<RedemptionsActions
|
|
selectedKeys={selectedKeys}
|
|
setEditingRedemption={setEditingRedemption}
|
|
setShowEdit={setShowEdit}
|
|
batchCopyRedemptions={batchCopyRedemptions}
|
|
batchDeleteRedemptions={batchDeleteRedemptions}
|
|
t={t}
|
|
/>
|
|
|
|
<div className="w-full md:w-full lg:w-auto order-1 md:order-2">
|
|
<RedemptionsFilters
|
|
formInitValues={formInitValues}
|
|
setFormApi={setFormApi}
|
|
searchRedemptions={searchRedemptions}
|
|
loading={loading}
|
|
searching={searching}
|
|
t={t}
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<RedemptionsTable {...redemptionsData} />
|
|
</CardPro>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default RedemptionsPage;
|