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 | 4x 3x 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 3x 1x 1x 1x 3x 1x 1x 15x 3x 1x 1x 1x 1x 1x 1x 1x 1x 3x 1x 1x 1x 1x 3x | import React, { Dispatch, SetStateAction, useEffect } from "react";
import { useAppDispatch } from "@redux/hooks";
import { TableColumnType, TableData, TableOrder } from "@common/Table/helpers";
import {
setTableSortingOrder,
disableTableSortingOrder,
setTableSortingOrderProperty,
disableTableSortingOrderProperty,
} from "@redux/slices/app";
import { updateSorting } from "@redux/slices/fundraisers";
type Props = {
small?: boolean;
setSorting?: Dispatch<SetStateAction<string>>;
initialSortingProperty?: string;
defaultSort?: { key: string; isDesc?: boolean };
};
export const useTableSort = ({
small,
setSorting,
initialSortingProperty = "id",
defaultSort = { key: "createdAt", isDesc: true },
}: Props) => {
const dispatch = useAppDispatch();
const { key: defaultKey, isDesc: isDefaultDesc } = defaultSort || {};
const [sortKey, setSortKey] = React.useState<null | keyof TableData>(null);
const [order, setOrder] = React.useState<TableOrder>("desc");
const [orderBy, setOrderBy] = React.useState<keyof TableData>(
initialSortingProperty,
);
const getNewOrder = (columnKey: keyof TableData) => {
let newOrder: TableOrder = "asc";
if (!sortKey || sortKey !== columnKey) {
newOrder = "asc";
Eif (defaultKey === columnKey && isDefaultDesc) {
newOrder = "desc";
}
} else E{
newOrder = order === "asc" ? "desc" : "asc";
}
return newOrder;
};
useEffect(() => {
setSortKey("createdAt");
setOrder("desc");
setOrderBy("createdAt");
}, []);
useEffect(() => {
Eif (sortKey !== defaultKey) {
setSortingData(defaultKey);
}
}, [defaultKey, isDefaultDesc]);
const handleOpenMenu =
(column: TableColumnType) => (event: React.MouseEvent<HTMLElement>) => {
setSortingData(column.key);
};
const setSortingData = (key: string) => {
setSortKey(key);
setOrderBy(key);
const newOrder = getNewOrder(key);
setOrder(newOrder);
const newSorting = (newOrder === "asc" ? key : `-${key}`) as TableOrder;
Iif (setSorting) {
setSorting(newSorting);
return;
}
Iif (small) {
dispatch(setTableSortingOrderProperty(key));
dispatch(setTableSortingOrder(newSorting));
return;
}
dispatch(updateSorting(newSorting));
};
React.useEffect(() => {
return () => {
dispatch(disableTableSortingOrder());
dispatch(disableTableSortingOrderProperty());
dispatch(updateSorting("-createdAt")); //set back to initial value
};
}, []);
return { handleOpenMenu, orderBy, sortKey, order };
};
|