little tweaks

Author: JoeChenJ

src/components/FindWalletProductTable/index.tsx

@@ -1,13 +1,20 @@
 import { useEffect, useMemo, useState } from "react"
 
-import { ChainName, FilterOption, Lang, Wallet } from "@/lib/types"
+import {
+  ChainName,
+  FilterOption,
+  Lang,
+  Wallet,
+  WalletFilter,
+} from "@/lib/types"
 
 import { useWalletColumns } from "@/components/FindWalletProductTable/hooks/useWalletColumns"
 import { useWalletFilters } from "@/components/FindWalletProductTable/hooks/useWalletFilters"
 import { useWalletPersonaPresets } from "@/components/FindWalletProductTable/hooks/useWalletPersonaPresets"
 import ProductTable from "@/components/ProductTable"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { getFilteredWalletsCount } from "@/lib/utils/wallets"
 
 import FindWalletsNoResults from "./FindWalletsNoResults"
 import WalletSubComponent from "./WalletSubComponent"
@@ -76,20 +83,10 @@ const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
   }, [wallets, filters, activeFilterKeys])
 
   const personasWalletCounts = useMemo(() => {
-    if (!Array.isArray(wallets)) return []
-
-    return walletPersonas.map((persona) => {
-      const trueKeys = Object.keys(persona.presetFilters).filter(
-        (key) => persona.presetFilters[key] === true
-      )
-
-      return wallets.reduce(
-        (count, wallet) =>
-          count + (trueKeys.every((key) => wallet[key]) ? 1 : 0),
-        0
-      )
-    })
-  }, [wallets, walletPersonas])
+    return walletPersonas.map((persona) =>
+      getFilteredWalletsCount(persona.presetFilters as WalletFilter)
+    )
+  }, [walletPersonas])
 
   // Reset filters
   const resetFilters = () => {

src/components/ProductTable/MobileFilters.tsx

@@ -25,6 +25,7 @@ interface MobileFiltersProps {
   filters: FilterOption[]
   setFilters: React.Dispatch<React.SetStateAction<FilterOption[]>>
   presets: TPresetFilters
+  presetFiltersCounts?: number[]
   activePresets: number[]
   handleSelectPreset: (index: number) => void
   dataCount: number
@@ -39,6 +40,7 @@ const MobileFilters = ({
   filters,
   setFilters,
   presets,
+  presetFiltersCounts,
   activePresets,
   handleSelectPreset,
   dataCount,
@@ -84,6 +86,7 @@ const MobileFilters = ({
           <div className="flex-1 overflow-y-auto">
             <PresetFilters
               presets={presets}
+              presetFiltersCounts={presetFiltersCounts}
               activePresets={activePresets}
               handleSelectPreset={handleSelectPreset}
               showMobileSidebar={true}

src/components/ProductTable/PresetFilters.tsx

@@ -7,15 +7,15 @@ export interface PresetFiltersProps {
   activePresets: number[]
   handleSelectPreset: (index: number) => void
   showMobileSidebar?: boolean
-  presetFilterCounts?: number[]
+  presetFiltersCounts?: number[]
 }
 
 const PresetFilters = ({
   presets,
   activePresets,
   handleSelectPreset,
   showMobileSidebar = false,
-  presetFilterCounts,
+  presetFiltersCounts,
 }: PresetFiltersProps) => {
   const colors = {
     text: [
@@ -97,9 +97,9 @@ const PresetFilters = ({
                     )}
                   >
                     {preset.title}{" "}
-                    {presetFilterCounts?.[idx] && (
+                    {presetFiltersCounts?.[idx] && (
                       <span className="font-normal">
-                        ({presetFilterCounts[idx]})
+                        ({presetFiltersCounts[idx]})
                       </span>
                     )}
                   </h3>

src/components/ProductTable/index.tsx

@@ -269,7 +269,7 @@ const ProductTable = <T,>({
           presets={presetFilters}
           activePresets={activePresets}
           handleSelectPreset={handleSelectPreset}
-          presetFilterCounts={presetFiltersCounts}
+          presetFiltersCounts={presetFiltersCounts}
         />
       ) : (
         <></>
@@ -281,6 +281,7 @@ const ProductTable = <T,>({
               filters={filters}
               setFilters={setFilters}
               presets={presetFilters}
+              presetFiltersCounts={presetFiltersCounts}
               activePresets={activePresets}
               handleSelectPreset={handleSelectPreset}
               dataCount={data.length}

src/lib/utils/wallets.ts

@@ -195,3 +195,13 @@ export const getLanguageCountWalletsData = (locale: string) => {
   languageCountWalletsData.sort((a, b) => a.name.localeCompare(b.name))
   return languageCountWalletsData
 }
+
+export const getFilteredWalletsCount = (filters: WalletFilter) => {
+  return walletsData.filter((wallet) => {
+    const activeFilters = Object.entries(filters).filter(
+      ([_, value]) => value === true
+    )
+
+    return activeFilters.every(([feature]) => wallet[feature] === true)
+  }).length
+}