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 118 | 263x 1136x 1136x 1136x 1136x 1136x 1136x 1136x 1136x 1136x 1136x 1136x 60x 1136x 572x 512x 60x 1136x 572x 1136x 1136x 572x 1136x 263x | import { useMemo } from "react";
import { useAppDispatch, useAppSelector } from "@redux/hooks";
import {
addDisputeStatusFilter,
resetDisputeStatusFilter,
selectDisputeTab,
setDisputeTab,
} from "@redux/slices/transactions";
import { TDisputeTabs } from "@components/Disputes/utils/data.types";
import { useDisputesStats } from "./useDisputesStats";
import { resetFilters } from "@redux/slices/tableFilters";
import Skeleton from "@components/animation/Skeleton";
export const useDisputeTableNewTable = () => {
const dispatch = useAppDispatch();
const tab = useAppSelector(selectDisputeTab);
const { tabStats, isLoading } = useDisputesStats();
const isAllTabSelected = tab === TDisputeTabs.ALL;
const isClosedTabSelected = tab === TDisputeTabs.CLOSED;
const isOpenTabSelected = tab === TDisputeTabs.OPEN;
const isUnderReviewTabSelected = tab === TDisputeTabs.UNDER_REVIEW;
const onTabClick = () => {
dispatch(resetFilters());
};
// Map tab → count
const countsMap = {
[TDisputeTabs.ALL]: tabStats?.disputeCount ?? 0,
[TDisputeTabs.OPEN]: tabStats?.openCount ?? 0,
[TDisputeTabs.UNDER_REVIEW]: tabStats?.underReviewCount ?? 0,
[TDisputeTabs.CLOSED]: tabStats?.closedCount ?? 0,
} as const;
const dataIsNotReady = typeof tabStats === "undefined" || isLoading;
const formatCount = (tab: TDisputeTabs) =>
countsMap[tab]?.toLocaleString() ?? "0";
// helper to get the count indicator as endItem (either skeleton or nothing since count is in label)
const getCountEndItem = () => {
if (dataIsNotReady) {
return <Skeleton width={40} height={18} />;
}
return undefined;
};
const getTabLabel = (name: string, tab: TDisputeTabs) =>
dataIsNotReady ? name : `${name} (${formatCount(tab)})`;
// simple config → avoids repeating yourself
const FILTER_CONFIG: {
name: string;
key: TDisputeTabs;
statuses: null | string | string[];
}[] = [
{
name: "All",
key: TDisputeTabs.ALL,
statuses: null,
},
{
name: "Open",
key: TDisputeTabs.OPEN,
statuses: "pending",
},
{
name: "Under Review",
key: TDisputeTabs.UNDER_REVIEW,
statuses: "under_review",
},
{
name: "Closed",
key: TDisputeTabs.CLOSED,
statuses: ["closed", "prevented"], // readonly tuple but allowed now
},
];
const tableFilters = useMemo(
() =>
FILTER_CONFIG.map(({ name, key, statuses }) => ({
label: getTabLabel(name, key),
endItem: getCountEndItem(),
value: key,
onClickItem: () => {
onTabClick();
dispatch(setDisputeTab(key));
if (statuses) {
dispatch(addDisputeStatusFilter(statuses));
} else {
dispatch(resetDisputeStatusFilter());
}
},
})),
[tabStats, isLoading],
);
return {
tableFilters,
tabs: {
isClosedTabSelected,
isOpenTabSelected,
isUnderReviewTabSelected,
isAllTabSelected,
},
};
};
// TODO: check with BE which values to use in filter
export const tabNames = {
all: "-all",
open: "-open",
under_review: "-under_review",
closed: "-closed",
};
|