diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx new file mode 100644 index 00000000000..baa799ab7c1 --- /dev/null +++ b/ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { H2, VSpacer } from "@pagopa/io-app-design-system"; +import { LayoutChangeEvent, View } from "react-native"; +import I18n from "../../../../i18n"; +import { PaymentBizEventsCategoryFilter } from "../types"; +import { PaymentsBizEventsFilterTabs } from "./PaymentsBizEventsFilterTabs"; + +type PaymentBizEventsSectionListHeaderProps = { + onLayout: (event: LayoutChangeEvent) => void; + selectedCategory: PaymentBizEventsCategoryFilter; + onCategorySelected: (category: PaymentBizEventsCategoryFilter) => void; +}; + +export const PaymentBizEventsSectionListHeader = React.memo( + ({ + onLayout, + selectedCategory, + onCategorySelected + }: PaymentBizEventsSectionListHeaderProps) => ( + +

+ {I18n.t("features.payments.transactions.title")} +

+ + +
+ ), + (prevProps, nextProps) => + prevProps.selectedCategory === nextProps.selectedCategory +); diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx index b8f9d2da1e5..0eedbaabd49 100644 --- a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx +++ b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx @@ -26,7 +26,9 @@ const PaymentsBizEventsFilterTabs = ({ const handleFilterSelected = (index: number) => { const categoryByIndex = paymentsBizEventsCategoryFilters[index]; - onCategorySelected?.(categoryByIndex); + if (categoryByIndex !== selectedCategory) { + onCategorySelected?.(categoryByIndex); + } }; return ( diff --git a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx index 7eb39287251..ab1dbec3b1b 100644 --- a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx +++ b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx @@ -1,7 +1,6 @@ import { ButtonLink, Divider, - H2, IOStyles, ListItemHeader, VSpacer @@ -35,11 +34,11 @@ import { PaymentsTransactionBizEventsRoutes } from "../navigation/routes"; import { PaymentsTransactionRoutes } from "../../transaction/navigation/routes"; import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem"; import * as analytics from "../analytics"; -import { PaymentsBizEventsFilterTabs } from "../components/PaymentsBizEventsFilterTabs"; import { PaymentBizEventsCategoryFilter } from "../types"; import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; import { PaymentsBizEventsFadeInOutAnimationView } from "../components/PaymentsBizEventsFadeInOutAnimationView"; import { PaymentsBizEventsTransactionLoadingList } from "../components/PaymentsBizEventsTransactionLoadingList"; +import { PaymentBizEventsSectionListHeader } from "../components/PaymentBizEventsSectionListHeader"; export type PaymentsTransactionBizEventsListScreenProps = RouteProp< PaymentsTransactionBizEventsParamsList, @@ -139,16 +138,19 @@ const PaymentsTransactionBizEventsListScreen = () => { ); }; - const handleCategorySelected = (category: PaymentBizEventsCategoryFilter) => { - setNoticeCategory(category); - dispatch( - getPaymentsBizEventsTransactionsAction.request({ - firstLoad: true, - noticeCategory: category, - onSuccess: handleOnSuccess - }) - ); - }; + const handleCategorySelected = React.useCallback( + (category: PaymentBizEventsCategoryFilter) => { + setNoticeCategory(category); + dispatch( + getPaymentsBizEventsTransactionsAction.request({ + firstLoad: true, + noticeCategory: category, + onSuccess: handleOnSuccess + }) + ); + }, + [setNoticeCategory, dispatch] + ); useOnFirstRender( React.useCallback(() => { @@ -177,22 +179,6 @@ const PaymentsTransactionBizEventsListScreen = () => { } }, [transactionsPot]); - const SectionListHeaderTitle = ( - -

- {I18n.t("features.payments.transactions.title")} -

- - -
- ); - const ShowLegacyTransactionsButton = () => ( @@ -240,7 +226,13 @@ const PaymentsTransactionBizEventsListScreen = () => { }} onEndReached={fetchNextPage} onEndReachedThreshold={0.25} - ListHeaderComponent={SectionListHeaderTitle} + ListHeaderComponent={ + + } onScroll={scrollHandler} stickySectionHeadersEnabled={false} sections={