fix: Filter tabs behavior into biz events notices list

pagopa · Nov 5, 2024 · 7ab4a5f · 7ab4a5f
1 parent f620db4
commit 7ab4a5f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git 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
@@ -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 = () => (