refactor: pricing filters for dynamic counting & cleaner logic

This commit introduces a unified, maintainable solution for all model-pricing filter buttons and removes redundant code.

Key points
• Added `usePricingFilterCounts` hook
  - Centralises filtering logic and returns:
    - `quotaTypeModels`, `endpointTypeModels`, `dynamicCategoryCounts`, `groupCountModels`
  - Keeps internal helpers private (removed public `modelsAfterCategory`).

• Updated components to consume the new hook
  - `PricingSidebar.jsx`
  - `FilterModalContent.jsx`

• Improved button UI/UX
  - `SelectableButtonGroup.jsx` now respects `item.disabled` and auto-disables when `tagCount === 0`.
  - `PricingGroups.jsx` counts models per group (after all other filters) and disables groups with zero matches.
  - `PricingEndpointTypes.jsx` enumerates all endpoint types, computes filtered counts, and disables entries with zero matches.

• Removed obsolete / duplicate calculations and comments to keep components lean.

The result is consistent, real-time tag counts across all filter groups, automatic disabling of unavailable options, and a single source of truth for filter computations, making future extensions straightforward.
This commit is contained in:
t0ng7u
2025-07-26 18:38:18 +08:00
parent 9110611489
commit 75548c449b
6 changed files with 200 additions and 16 deletions

View File

@@ -25,6 +25,7 @@ import PricingQuotaTypes from '../filter/PricingQuotaTypes';
import PricingEndpointTypes from '../filter/PricingEndpointTypes';
import PricingDisplaySettings from '../filter/PricingDisplaySettings';
import { resetPricingFilters } from '../../../../helpers/utils';
import { usePricingFilterCounts } from '../../../../hooks/model-pricing/usePricingFilterCounts';
const PricingSidebar = ({
showWithRecharge,
@@ -52,6 +53,21 @@ const PricingSidebar = ({
...categoryProps
}) => {
const {
quotaTypeModels,
endpointTypeModels,
dynamicCategoryCounts,
groupCountModels,
} = usePricingFilterCounts({
models: categoryProps.models,
modelCategories: categoryProps.modelCategories,
activeKey: categoryProps.activeKey,
filterGroup,
filterQuotaType,
filterEndpointType,
searchValue: categoryProps.searchValue,
});
const handleResetFilters = () =>
resetPricingFilters({
handleChange,
@@ -101,6 +117,7 @@ const PricingSidebar = ({
<PricingCategories
{...categoryProps}
categoryCounts={dynamicCategoryCounts}
setActiveKey={setActiveKey}
loading={loading}
t={t}
@@ -111,7 +128,7 @@ const PricingSidebar = ({
setFilterGroup={setFilterGroup}
usableGroup={categoryProps.usableGroup}
groupRatio={categoryProps.groupRatio}
models={categoryProps.models}
models={groupCountModels}
loading={loading}
t={t}
/>
@@ -119,7 +136,7 @@ const PricingSidebar = ({
<PricingQuotaTypes
filterQuotaType={filterQuotaType}
setFilterQuotaType={setFilterQuotaType}
models={categoryProps.models}
models={quotaTypeModels}
loading={loading}
t={t}
/>
@@ -127,7 +144,8 @@ const PricingSidebar = ({
<PricingEndpointTypes
filterEndpointType={filterEndpointType}
setFilterEndpointType={setFilterEndpointType}
models={categoryProps.models}
models={endpointTypeModels}
allModels={categoryProps.models}
loading={loading}
t={t}
/>