Cleanup filters filtering (#1052)

swan-io · Dec 10, 2024 · f37f2c3 · f37f2c3
1 parent 6bec388
commit f37f2c3
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 109 deletions.
diff --git a/clients/banking/src/components/AccountMembersDetailsCardList.tsx b/clients/banking/src/components/AccountMembersDetailsCardList.tsx
@@ -1,4 +1,3 @@
-import { Array, Option } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
@@ -12,7 +11,7 @@ import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
+import { isMatching, P } from "ts-pattern";
 import { Except } from "type-fest";
 import {
   AccountMembershipCardListPageDocument,
@@ -64,17 +63,14 @@ export const AccountMembersDetailsCardList = ({
 
   const showAddCard = canAddCard && (isUserOwnMembership || canAddCardForOtherMemberships);
 
-  const filters: CardFilters = useMemo(() => {
-    return {
-      type: isNotNullish(params.cardType)
-        ? Array.filterMap(params.cardType, item =>
-            match(item)
-              .with("Virtual", "VirtualAndPhysical", "SingleUseVirtual", item => Option.Some(item))
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
-    } as const;
-  }, [params.cardType]);
+  const filters = useMemo<CardFilters>(
+    () => ({
+      type: params.cardType?.filter(
+        isMatching(P.union("Virtual", "VirtualAndPhysical", "SingleUseVirtual")),
+      ),
+    }),
+    [params.cardType],
+  );
 
   const search = nullishOrEmptyToUndefined(params.cardSearch);
   const status = params.cardStatus === "Canceled" ? "Canceled" : "Active";

diff --git a/clients/banking/src/components/CardItemTransactionList.tsx b/clients/banking/src/components/CardItemTransactionList.tsx
@@ -1,4 +1,4 @@
-import { Array, AsyncData, Option, Result } from "@swan-io/boxed";
+import { AsyncData, Result } from "@swan-io/boxed";
 import { useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
@@ -11,7 +11,7 @@ import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
+import { isMatching, match, P } from "ts-pattern";
 import { CardTransactionsPageDocument } from "../graphql/partner";
 import { t } from "../utils/i18n";
 import { GetRouteParams, Router } from "../utils/routes";
@@ -56,22 +56,17 @@ const DEFAULT_STATUSES = [
 ];
 
 export const CardItemTransactionList = ({ params }: Props) => {
-  const filters: TransactionFilters = useMemo(() => {
-    return {
+  const filters = useMemo<TransactionFilters>(
+    () => ({
       isAfterUpdatedAt: params.isAfterUpdatedAt,
       isBeforeUpdatedAt: params.isBeforeUpdatedAt,
       paymentProduct: undefined,
-      status: isNotNullish(params.status)
-        ? Array.filterMap(params.status, item =>
-            match(item)
-              .with("Booked", "Canceled", "Pending", "Rejected", "Released", "Upcoming", item =>
-                Option.Some(item),
-              )
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
-    } as const;
-  }, [params.isAfterUpdatedAt, params.isBeforeUpdatedAt, params.status]);
+      status: params.status?.filter(
+        isMatching(P.union("Booked", "Canceled", "Pending", "Rejected", "Released", "Upcoming")),
+      ),
+    }),
+    [params.isAfterUpdatedAt, params.isBeforeUpdatedAt, params.status],
+  );
 
   const search = nullishOrEmptyToUndefined(params.search);
   const hasSearchOrFilters = isNotNullish(search) || Object.values(filters).some(isNotNullish);

diff --git a/clients/banking/src/components/MembershipsArea.tsx b/clients/banking/src/components/MembershipsArea.tsx
@@ -1,4 +1,4 @@
-import { Array, Option } from "@swan-io/boxed";
+import { Option } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { useDeferredQuery, useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
@@ -11,12 +11,12 @@ import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveCont
 import { Space } from "@swan-io/lake/src/components/Space";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { breakpoints, colors, spacings } from "@swan-io/lake/src/constants/design";
-import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
+import { nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
 import { Request } from "@swan-io/request";
 import { LakeModal } from "@swan-io/shared-business/src/components/LakeModal";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { StyleSheet, View } from "react-native";
-import { P, match } from "ts-pattern";
+import { P, isMatching, match } from "ts-pattern";
 import { Except } from "type-fest";
 import {
   AccountCountry,
@@ -62,8 +62,6 @@ type Props = {
 
 const PER_PAGE = 20;
 
-const statusList = ["BindingUserError", "Enabled", "InvitationSent", "Suspended"] as const;
-
 export const MembershipsArea = ({
   accountMembershipId,
   accountId,
@@ -77,29 +75,26 @@ export const MembershipsArea = ({
   const [, { query: queryLastCreatedMembership }] = useDeferredQuery(MembershipDetailDocument);
   const route = Router.useRoute(membershipsRoutes);
 
-  const filters: MembershipFilters = useMemo(() => {
-    return {
-      statuses: isNotNullish(params.statuses)
-        ? Array.filterMap(params.statuses, item =>
-            match(item)
-              .with(...statusList, value => Option.Some(value))
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
+  const filters = useMemo<MembershipFilters>(
+    () => ({
+      statuses: params.statuses?.filter(
+        isMatching(P.union("BindingUserError", "Enabled", "InvitationSent", "Suspended")),
+      ),
       canViewAccount: parseBooleanParam(params.canViewAccount),
       canManageCards: parseBooleanParam(params.canManageCards),
       canInitiatePayments: parseBooleanParam(params.canInitiatePayments),
       canManageAccountMembership: parseBooleanParam(params.canManageAccountMembership),
       canManageBeneficiaries: parseBooleanParam(params.canManageBeneficiaries),
-    } as const;
-  }, [
-    params.statuses,
-    params.canViewAccount,
-    params.canManageCards,
-    params.canInitiatePayments,
-    params.canManageAccountMembership,
-    params.canManageBeneficiaries,
-  ]);
+    }),
+    [
+      params.statuses,
+      params.canViewAccount,
+      params.canManageCards,
+      params.canInitiatePayments,
+      params.canManageAccountMembership,
+      params.canManageBeneficiaries,
+    ],
+  );
 
   const search = nullishOrEmptyToUndefined(params.search);
 

diff --git a/clients/banking/src/components/TransferList.tsx b/clients/banking/src/components/TransferList.tsx
@@ -1,4 +1,3 @@
-import { Array, Option } from "@swan-io/boxed";
 import { useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
@@ -12,7 +11,7 @@ import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
+import { isMatching, P } from "ts-pattern";
 import { ErrorView } from "../components/ErrorView";
 import { TransactionDetail } from "../components/TransactionDetail";
 import { TransactionList } from "../components/TransactionList";
@@ -22,9 +21,9 @@ import { t } from "../utils/i18n";
 import { Router } from "../utils/routes";
 import { Connection } from "./Connection";
 import {
+  defaultFiltersDefinition,
   TransactionFilters,
   TransactionListFilter,
-  defaultFiltersDefinition,
 } from "./TransactionListFilter";
 
 const styles = StyleSheet.create({
@@ -61,23 +60,18 @@ const DEFAULT_STATUSES = [
 ];
 
 export const TransferList = ({ accountId, accountMembershipId, params }: Props) => {
-  const filters: TransactionFilters = useMemo(() => {
-    return {
+  const filters = useMemo<TransactionFilters>(
+    () => ({
       includeRejectedWithFallback: false,
       isAfterUpdatedAt: params.isAfterUpdatedAt,
       isBeforeUpdatedAt: params.isBeforeUpdatedAt,
       paymentProduct: undefined,
-      status: isNotNullish(params.transactionStatus)
-        ? Array.filterMap(params.transactionStatus, item =>
-            match(item)
-              .with("Booked", "Canceled", "Pending", "Rejected", "Released", item =>
-                Option.Some(item),
-              )
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
-    } as const;
-  }, [params.isAfterUpdatedAt, params.isBeforeUpdatedAt, params.transactionStatus]);
+      status: params.transactionStatus?.filter(
+        isMatching(P.union("Booked", "Canceled", "Pending", "Rejected", "Released")),
+      ),
+    }),
+    [params.isAfterUpdatedAt, params.isBeforeUpdatedAt, params.transactionStatus],
+  );
 
   const paymentProduct = useMemo(() => {
     return [

diff --git a/clients/banking/src/pages/CardListPage.tsx b/clients/banking/src/pages/CardListPage.tsx
@@ -1,4 +1,3 @@
-import { Array, Option } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
@@ -11,7 +10,7 @@ import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
 import { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import { match } from "ts-pattern";
+import { isMatching, P } from "ts-pattern";
 import { Except } from "type-fest";
 import { CardList } from "../components/CardList";
 import { CardFilters, CardListFilter } from "../components/CardListFilter";
@@ -58,17 +57,15 @@ export const CardListPage = ({
   params,
 }: Props) => {
   const { canAddCard: canOrderCard } = usePermissions();
-  const filters: CardFilters = useMemo(() => {
-    return {
-      type: isNotNullish(params.type)
-        ? Array.filterMap(params.type, item =>
-            match(item)
-              .with("Virtual", "VirtualAndPhysical", "SingleUseVirtual", item => Option.Some(item))
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
-    } as const;
-  }, [params.type]);
+
+  const filters = useMemo<CardFilters>(
+    () => ({
+      type: params.type?.filter(
+        isMatching(P.union("Virtual", "VirtualAndPhysical", "SingleUseVirtual")),
+      ),
+    }),
+    [params.type],
+  );
 
   const search = nullishOrEmptyToUndefined(params.search);
   const status = params.status === "Canceled" ? "Canceled" : "Active";

diff --git a/clients/banking/src/pages/TransactionListPage.tsx b/clients/banking/src/pages/TransactionListPage.tsx
@@ -1,4 +1,4 @@
-import { Array, Option } from "@swan-io/boxed";
+import { Option } from "@swan-io/boxed";
 import { useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
@@ -15,7 +15,7 @@ import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish, nullishOrEmptyToUndefined } from "@swan-io/lake/src/utils/nullish";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
+import { isMatching, match, P } from "ts-pattern";
 import { Connection } from "../components/Connection";
 import { ErrorView } from "../components/ErrorView";
 import { TransactionDetail } from "../components/TransactionDetail";
@@ -84,36 +84,25 @@ export const TransactionListPage = ({
 
   const { canReadAccountStatement } = usePermissions();
 
-  const filters: TransactionFilters = useMemo(() => {
-    return {
+  const filters = useMemo<TransactionFilters>(
+    () => ({
       includeRejectedWithFallback: false,
       isAfterUpdatedAt: params.isAfterUpdatedAt,
       isBeforeUpdatedAt: params.isBeforeUpdatedAt,
-      paymentProduct: isNotNullish(params.paymentProduct)
-        ? Array.filterMap(params.paymentProduct, item =>
-            match(item)
-              .with("CreditTransfer", "DirectDebit", "Card", "Fees", "Check", value =>
-                Option.Some(value),
-              )
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
-      status: isNotNullish(params.transactionStatus)
-        ? Array.filterMap(params.transactionStatus, item =>
-            match(item)
-              .with("Booked", "Canceled", "Pending", "Rejected", "Released", item =>
-                Option.Some(item),
-              )
-              .otherwise(() => Option.None()),
-          )
-        : undefined,
-    } as const;
-  }, [
-    params.isAfterUpdatedAt,
-    params.isBeforeUpdatedAt,
-    params.paymentProduct,
-    params.transactionStatus,
-  ]);
+      paymentProduct: params.paymentProduct?.filter(
+        isMatching(P.union("CreditTransfer", "DirectDebit", "Card", "Fees", "Check")),
+      ),
+      status: params.transactionStatus?.filter(
+        isMatching(P.union("Booked", "Canceled", "Pending", "Rejected", "Released")),
+      ),
+    }),
+    [
+      params.isAfterUpdatedAt,
+      params.isBeforeUpdatedAt,
+      params.paymentProduct,
+      params.transactionStatus,
+    ],
+  );
 
   const paymentProduct = useMemo(() => {
     const actualPaymentProduct: PaymentProduct[] = [];