From 508ddd30d4d6614d7020ed63169a1a987cb5bad9 Mon Sep 17 00:00:00 2001
From: shahin-hq <132887516+shahin-hq@users.noreply.github.com>
Date: Fri, 15 Nov 2024 19:52:44 +0400
Subject: [PATCH] fix: disable transaction type filter when there are no
 transactions (#818)

---
 .../Transactions/Transactions.test.tsx        | 32 ++++++++++++++++++-
 .../components/Transactions/Transactions.tsx  | 10 ++++++
 .../__snapshots__/Transactions.test.tsx.snap  |  3 +-
 .../hooks/use-profile-transactions.ts         |  1 +
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/domains/transaction/components/Transactions/Transactions.test.tsx b/src/domains/transaction/components/Transactions/Transactions.test.tsx
index 2bfe7afe02..9e245e51d9 100644
--- a/src/domains/transaction/components/Transactions/Transactions.test.tsx
+++ b/src/domains/transaction/components/Transactions/Transactions.test.tsx
@@ -200,6 +200,33 @@ describe("Transactions", () => {
 		);
 	});
 
+	it("should disable type filter when there are no transactions", async () => {
+		const emptyProfile = await env.profiles().create("test9");
+
+		const wallet = await emptyProfile.walletFactory().fromMnemonicWithBIP39({
+			coin: "ARK",
+			mnemonic: MNEMONICS[2],
+			network: "ark.devnet",
+		});
+
+		emptyProfile.wallets().push(wallet);
+
+		render(
+			<Route path="/profiles/:profileId/dashboard">
+				<Transactions profile={emptyProfile} wallets={[wallet]} />
+			</Route>,
+			{
+				history,
+				route: dashboardURL,
+			},
+		);
+
+		await expect(screen.findByTestId("EmptyBlock")).resolves.toBeVisible();
+
+		const button = screen.getAllByRole("button", { name: /Type/ })[0];
+		expect(button).toBeDisabled();
+	});
+
 	it("should filter by type and see empty screen", async () => {
 		render(
 			<Route path="/profiles/:profileId/dashboard">
@@ -215,7 +242,7 @@ describe("Transactions", () => {
 			expect(within(screen.getByTestId("TransactionTable")).getAllByTestId("TableRow")).toHaveLength(15),
 		);
 
-		const button = screen.getAllByRole("button", { name: /Type/ })[0];
+		let button = screen.getAllByRole("button", { name: /Type/ })[0];
 
 		expect(button).toBeInTheDocument();
 
@@ -235,6 +262,9 @@ describe("Transactions", () => {
 		await userEvent.click(options.at(-1));
 
 		await expect(screen.findByTestId("EmptyBlock")).resolves.toBeVisible();
+
+		button = screen.getAllByRole("button", { name: /Type/ })[0];
+		expect(button).not.toBeDisabled();
 	});
 
 	it("should open detail modal on transaction row click", async () => {
diff --git a/src/domains/transaction/components/Transactions/Transactions.tsx b/src/domains/transaction/components/Transactions/Transactions.tsx
index 12cf96ece0..220e2e989c 100644
--- a/src/domains/transaction/components/Transactions/Transactions.tsx
+++ b/src/domains/transaction/components/Transactions/Transactions.tsx
@@ -55,6 +55,7 @@ export const Transactions = memo(function Transactions({
 		selectedTransactionTypes,
 		fetchMore,
 		hasEmptyResults,
+		hasFilter,
 		hasMore,
 	} = useProfileTransactions({ limit: 30, profile, wallets });
 
@@ -148,6 +149,14 @@ export const Transactions = memo(function Transactions({
 		return !hasEmptyResults || hasFilter || hasMore;
 	}, [activeMode, hasEmptyResults, activeTransactionType, isLoadingTransactions, hasMore]);
 
+	const enableFilter = useMemo(() => {
+		if (isLoadingTransactions || hasFilter) {
+			return true;
+		}
+
+		return !hasEmptyResults || hasMore;
+	}, [hasEmptyResults, hasMore, isLoadingTransactions, hasFilter]);
+
 	if (!isVisible) {
 		return <></>;
 	}
@@ -221,6 +230,7 @@ export const Transactions = memo(function Transactions({
 						wallets={wallets}
 						onSelect={filterChangeHandler}
 						selectedTransactionTypes={selectedTransactionTypes}
+						isDisabled={!enableFilter}
 					/>
 				</div>
 
diff --git a/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap b/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap
index 5b723e9d15..32fe84af86 100644
--- a/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap
+++ b/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap
@@ -20877,8 +20877,9 @@ exports[`Transactions > should update wallet filters 1`] = `
           data-testid="dropdown__toggle"
         >
           <button
-            class="space-x-2 relative items-center inline-flex justify-center font-semibold text-center transition-colors-shadow duration-100 ease-linear outline-none rounded focus:outline-none focus:ring-2 focus:ring-theme-primary-400 disabled:cursor-not-allowed dark:bg-theme-secondary-800 dark:text-theme-secondary-200 bg-theme-primary-100 text-theme-primary-600 hover:bg-theme-primary-800 green:hover:bg-theme-primary-700 hover:text-white dark:hover:bg-theme-primary-500 w-full px-4 py-1.5 text-base sm:w-fit"
+            class="space-x-2 relative items-center inline-flex justify-center font-semibold text-center transition-colors-shadow duration-100 ease-linear outline-none rounded focus:outline-none focus:ring-2 focus:ring-theme-primary-400 disabled:cursor-not-allowed disabled:bg-theme-secondary-200 disabled:text-theme-secondary-400 dark:disabled:bg-theme-secondary-800 dark:disabled:text-theme-secondary-700 w-full px-4 py-1.5 text-base sm:w-fit"
             data-testid="CollapseToggleButton"
+            disabled=""
             type="button"
           >
             <div
diff --git a/src/domains/transaction/hooks/use-profile-transactions.ts b/src/domains/transaction/hooks/use-profile-transactions.ts
index ef68be6882..0054906ed5 100644
--- a/src/domains/transaction/hooks/use-profile-transactions.ts
+++ b/src/domains/transaction/hooks/use-profile-transactions.ts
@@ -286,6 +286,7 @@ export const useProfileTransactions = ({ profile, wallets, limit = 30 }: Profile
 		fetchMore,
 		fetchTransactions,
 		hasEmptyResults,
+		hasFilter: (selectedTransactionTypes?.length ?? 0) < allTransactionTypes.length,
 		hasMore,
 		isLoadingMore,
 		isLoadingTransactions,