From 7ab4a5fa0dc2b69069f650602c28270c9de89acb Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo998@gmail.com>
Date: Tue, 5 Nov 2024 10:47:58 +0100
Subject: [PATCH 1/2] fix: Filter tabs behavior into biz events notices list

---
 .../PaymentsBizEventsFilterTabs.tsx           |  4 +-
 ...PaymentsTransactionBizEventsListScreen.tsx | 54 ++++++++++---------
 2 files changed, 33 insertions(+), 25 deletions(-)

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..36a3fe9ed51 100644
--- a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx
+++ b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx
@@ -139,16 +139,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,20 +180,23 @@ const PaymentsTransactionBizEventsListScreen = () => {
     }
   }, [transactionsPot]);
 
-  const SectionListHeaderTitle = (
-    <View onLayout={getTitleHeight}>
-      <H2
-        accessibilityLabel={I18n.t("features.payments.transactions.title")}
-        accessibilityRole="header"
-      >
-        {I18n.t("features.payments.transactions.title")}
-      </H2>
-      <VSpacer size={16} />
-      <PaymentsBizEventsFilterTabs
-        selectedCategory={noticeCategory}
-        onCategorySelected={handleCategorySelected}
-      />
-    </View>
+  const SectionListHeaderTitle = React.useMemo(
+    () => (
+      <View onLayout={getTitleHeight}>
+        <H2
+          accessibilityLabel={I18n.t("features.payments.transactions.title")}
+          accessibilityRole="header"
+        >
+          {I18n.t("features.payments.transactions.title")}
+        </H2>
+        <VSpacer size={16} />
+        <PaymentsBizEventsFilterTabs
+          selectedCategory={noticeCategory}
+          onCategorySelected={handleCategorySelected}
+        />
+      </View>
+    ),
+    [noticeCategory, handleCategorySelected]
   );
 
   const ShowLegacyTransactionsButton = () => (

From af9482764cee32c86c93cb533b3d52ba52f665e9 Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo998@gmail.com>
Date: Tue, 5 Nov 2024 12:11:22 +0100
Subject: [PATCH 2/2] chore: Extracted section list header into another file

---
 .../PaymentBizEventsSectionListHeader.tsx     | 36 +++++++++++++++++++
 ...PaymentsTransactionBizEventsListScreen.tsx | 30 +++++-----------
 2 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx

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) => (
+    <View onLayout={onLayout}>
+      <H2
+        accessibilityLabel={I18n.t("features.payments.transactions.title")}
+        accessibilityRole="header"
+      >
+        {I18n.t("features.payments.transactions.title")}
+      </H2>
+      <VSpacer size={16} />
+      <PaymentsBizEventsFilterTabs
+        selectedCategory={selectedCategory}
+        onCategorySelected={onCategorySelected}
+      />
+    </View>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.selectedCategory === nextProps.selectedCategory
+);
diff --git a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx
index 36a3fe9ed51..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,
@@ -180,25 +179,6 @@ const PaymentsTransactionBizEventsListScreen = () => {
     }
   }, [transactionsPot]);
 
-  const SectionListHeaderTitle = React.useMemo(
-    () => (
-      <View onLayout={getTitleHeight}>
-        <H2
-          accessibilityLabel={I18n.t("features.payments.transactions.title")}
-          accessibilityRole="header"
-        >
-          {I18n.t("features.payments.transactions.title")}
-        </H2>
-        <VSpacer size={16} />
-        <PaymentsBizEventsFilterTabs
-          selectedCategory={noticeCategory}
-          onCategorySelected={handleCategorySelected}
-        />
-      </View>
-    ),
-    [noticeCategory, handleCategorySelected]
-  );
-
   const ShowLegacyTransactionsButton = () => (
     <View style={{ marginTop: 12 }}>
       <VSpacer size={16} />
@@ -246,7 +226,13 @@ const PaymentsTransactionBizEventsListScreen = () => {
       }}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={0.25}
-      ListHeaderComponent={SectionListHeaderTitle}
+      ListHeaderComponent={
+        <PaymentBizEventsSectionListHeader
+          onLayout={getTitleHeight}
+          selectedCategory={noticeCategory}
+          onCategorySelected={handleCategorySelected}
+        />
+      }
       onScroll={scrollHandler}
       stickySectionHeadersEnabled={false}
       sections={