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={