useEffect(() => {
changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'}))
}, [JSON.stringify(columnOrder)])
What is the best way to check if array changed? Not length, but order
columnOrder is array of numbers.
export const ColumnsCustomizeModalForm: FunctionComponent<
ColumnsCustomizeModalFormProps
> = ({ columns, onClose, modalProps }) => {
const columnInitial = columns.map((column) => column.name)
const [columnOrder, setColumnOrder] =
useState<string[]>(columnInitial)
const [columnsState, changeColumnsState] = useState(mapOrder({array: columns, order: columnOrder, key: 'name'}))
useEffect(() => {
changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'}))
}, [JSON.stringify(columnOrder)])
const setColumnVisibility = (name: string) => {
const newColumnsState = columnsState.map((column) => {
if(column.name === name) {
return {...column, isHidden: !column.isHidden}
}
return column
})
changeColumnsState(newColumnsState)
}
return (
<ColumnsCustomizationModalView
columns={columnsState}
handleChangeOrder={setColumnOrder}
handleColumnVisibility={setColumnVisibility}
handleClose={onClose}
modalProps={modalProps}
/>
)
}
export const mapOrder = <ObjectType, KeyType extends keyof ObjectType>({array, order, key}: {array: ObjectType[], order: ObjectType[KeyType][], key: KeyType}) => {
const sortedArray = array.sort( function (a, b) {
var A = a[key], B = b[key];
if (order.indexOf(A) > order.indexOf(B)) {
return 1;
} else {
return -1;
}
});
return sortedArray;
};
What is the best way to check if array changed?
The best way is not to check at all. You don't need that columnOrder array state and an initialisation and an effect depending on it. Just directly set the order of your columnsState array in the handler function:
export const ColumnsCustomizeModalForm: FunctionComponent<
ColumnsCustomizeModalFormProps
> = ({ columns, onClose, modalProps }) => {
const [columnsState, changeColumnsState] = useState(columns);
const setColumnOrder = (columnOrder: string[]) => {
changeColumnsState(array => mapOrder({array, order: columnOrder, key: 'name'}))
};
const setColumnVisibility = (name: string) => {
changeColumnsState(cols => cols.map(column => {
if (column.name === name) {
return {...column, isHidden: !column.isHidden}
}
return column
}));
};
return (
<ColumnsCustomizationModalView
columns={columnsState}
handleChangeOrder={setColumnOrder}
handleColumnVisibility={setColumnVisibility}
handleClose={onClose}
modalProps={modalProps}
/>
);
}
Also fix your mapOrder function to create a new array (and use correct comparison):
export function mapOrder<ObjectType, KeyType extends keyof ObjectType>({array, order, key}: {array: ObjectType[], order: ObjectType[KeyType][], key: KeyType}) {
return array.slice().sort((a, b) =>
// ^^^^^^^^
order.indexOf(a[key]) - order.indexOf(b[key])
);
}