fix(transactions): search optimization and incorrect pagination displ…

…ay for coin (cherry picked from commit 7a6dec1)
trezor · Feb 17, 2021 · 73eef3b · 73eef3b
1 parent 6115f42
commit 73eef3b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/...nsactions/components/TransactionList/components/Actions/components/SearchAction/index.tsx b/...nsactions/components/TransactionList/components/Actions/components/SearchAction/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { Input, Icon, useTheme, Tooltip } from '@trezor/components';
 import { useActions } from '@suite-hooks';
@@ -47,13 +47,12 @@ const SearchAction = ({ account, search, setSearch, setSelectedPage }: Props) =>
     const wrapperRef = useRef<HTMLDivElement | null>(null);
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [expanded, setExpanded] = useState(false);
+    const [hasFetchedAll, setHasFetchedAll] = useState(false);
     const { translationString } = useTranslation();
     const { addToast, fetchTransactions } = useActions({
         addToast: notificationActions.addToast,
         fetchTransactions: transactionActions.fetchTransactions,
     });
-    // const [isSearchFetching, setIsSearchFetching] = useState(false);
-    const [, setIsSearchFetching] = useState(false);
 
     const onFocus = useCallback(() => {
         setExpanded(true);
@@ -84,37 +83,40 @@ const SearchAction = ({ account, search, setSearch, setSelectedPage }: Props) =>
     });
 
     const onSearch = useCallback(
-        async e => {
-            const { value } = e.target;
-            if (search === '' && value !== '') {
-                // Fetch all transactions
-                setIsSearchFetching(true);
+        async ({ target }) => {
+            setSelectedPage(1);
+            setSearch(target.value);
+
+            if (!hasFetchedAll) {
+                setHasFetchedAll(true);
+
                 try {
                     await fetchTransactions(account, 2, SETTINGS.TXS_PER_PAGE, true, true);
                 } catch (err) {
                     addToast({
                         type: 'error',
                         error: translationString('TR_SEARCH_FAIL'),
                     });
-                } finally {
-                    setIsSearchFetching(false);
                 }
             }
-
-            setSelectedPage(1);
-            setSearch(value);
         },
         [
             account,
             addToast,
             fetchTransactions,
-            search,
+            hasFetchedAll,
             setSearch,
             setSelectedPage,
             translationString,
         ],
     );
 
+    useEffect(() => {
+        setHasFetchedAll(false);
+        setExpanded(false);
+        setSearch('');
+    }, [account.symbol, account.index, account.accountType, setSearch]);
+
     if (!isEnabled('SEARCH_TRANSACTIONS')) {
         return null;
     }

diff --git a/packages/suite/src/views/wallet/transactions/components/TransactionList/index.tsx b/packages/suite/src/views/wallet/transactions/components/TransactionList/index.tsx
@@ -173,7 +173,7 @@ const TransactionList = ({ transactions, isLoading, account, ...props }: Props)
             {showPagination && (
                 <PaginationWrapper>
                     <Pagination
-                        hasPages={isRipple}
+                        hasPages={!isRipple}
                         currentPage={currentPage}
                         totalPages={total}
                         isOnLastPage={isOnLastPage}