Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x | /**
* @file useSuppliersBoardState.ts
* @module pages/suppliers/hooks/useSuppliersBoardState
*
* @summary
* Centralized state management for suppliers board page.
* Manages search, pagination, sorting, dialog toggles, and selection.
*
* @enterprise
* - Single source of truth for UI state
* - Separated from data fetching and processing logic
* - Allows components to be pure and testable
*/
import * as React from 'react';
import type { GridPaginationModel, GridSortModel } from '@mui/x-data-grid';
import type { SupplierRow } from '../../../api/suppliers';
/**
* Complete suppliers board page state interface.
*
* @interface SuppliersBoardState
*/
export interface SuppliersBoardState {
// Search & Filter
searchQuery: string;
showAllSuppliers: boolean;
// Pagination & Sorting
paginationModel: GridPaginationModel;
sortModel: GridSortModel;
// Selection
selectedId: string | null;
selectedSearchResult: SupplierRow | null;
// Dialog toggles
openCreate: boolean;
openEdit: boolean;
openDelete: boolean;
}
/**
* State setter functions.
*/
export interface SuppliersBoardStateSetters {
setSearchQuery: (query: string) => void;
setShowAllSuppliers: (show: boolean) => void;
setPaginationModel: (model: GridPaginationModel) => void;
setSortModel: (model: GridSortModel) => void;
setSelectedId: (id: string | null) => void;
setSelectedSearchResult: (result: SupplierRow | null) => void;
setOpenCreate: (open: boolean) => void;
setOpenEdit: (open: boolean) => void;
setOpenDelete: (open: boolean) => void;
}
/**
* Return type of useSuppliersBoardState hook.
*/
export type UseSuppliersBoardStateReturn = SuppliersBoardState & SuppliersBoardStateSetters;
/**
* Hook for managing suppliers board page state.
*
* Returns unified state object and setter functions.
*
* @returns State and setter functions
*/
export const useSuppliersBoardState = (): UseSuppliersBoardStateReturn => {
const renderCount = React.useRef(0);
renderCount.current++;
if (renderCount.current > 100) {
console.error('[SUPPLIERS STATE] INFINITE RENDER DETECTED - over 100 renders!');
}
const [searchQuery, setSearchQuery] = React.useState('');
const [showAllSuppliers, setShowAllSuppliers] = React.useState(false);
const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
page: 0,
pageSize: 6,
});
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: 'name', sort: 'asc' },
]);
const [selectedId, setSelectedId] = React.useState<string | null>(null);
const [selectedSearchResult, setSelectedSearchResult] = React.useState<SupplierRow | null>(null);
const [openCreate, setOpenCreate] = React.useState(false);
const [openEdit, setOpenEdit] = React.useState(false);
const [openDelete, setOpenDelete] = React.useState(false);
const stateObject = {
searchQuery,
showAllSuppliers,
paginationModel,
sortModel,
selectedId,
selectedSearchResult,
openCreate,
openEdit,
openDelete,
setSearchQuery,
setShowAllSuppliers,
setPaginationModel,
setSortModel,
setSelectedId,
setSelectedSearchResult,
setOpenCreate,
setOpenEdit,
setOpenDelete,
};
console.log(`[SUPPLIERS STATE RENDER #${renderCount.current}] paginationModel:`, paginationModel);
return stateObject;
};
|