refactor: fix hook and disable button when loading

ArkEcosystem · Sep 2, 2020 · 545885d · 545885d
1 parent e1137c0
commit 545885d
Show file tree

Hide file tree

Showing 6 changed files with 586 additions and 16 deletions.
diff --git a/src/app/i18n/common/i18n.ts b/src/app/i18n/common/i18n.ts
@@ -79,6 +79,7 @@ export const translations: { [key: string]: any } = {
 	LEDGER: "Ledger",
 	LINK: "Link",
 	LOAD: "Load",
+	LOADING: "Loading ...",
 	MARKETSQUARE: "MarketSquare",
 	MOST_POPULAR: "Most popular",
 	MULTISIGNATURE: "Multisignature",

diff --git a/src/domains/dashboard/components/Transactions/Transactions.tsx b/src/domains/dashboard/components/Transactions/Transactions.tsx
@@ -41,9 +41,10 @@ export const Transactions = ({
 						data-testid="transactions__fetch-more-button"
 						variant="plain"
 						className="w-full mt-10 mb-5"
+						disabled={isLoading}
 						onClick={() => fetchMoreAction && fetchMoreAction()}
 					>
-						{t("COMMON.VIEW_MORE")}
+						{isLoading ? t("COMMON.LOADING") : t("COMMON.VIEW_MORE")}
 					</Button>
 				)}
 			</div>

diff --git a/src/domains/dashboard/pages/Dashboard/Dashboard.test.tsx b/src/domains/dashboard/pages/Dashboard/Dashboard.test.tsx
@@ -1,4 +1,5 @@
 import { Profile } from "@arkecosystem/platform-sdk-profiles";
+import { translations as commonTranslations } from "app/i18n/common/i18n";
 import { createMemoryHistory } from "history";
 import nock from "nock";
 import React from "react";
@@ -230,21 +231,21 @@ describe("Dashboard", () => {
 			},
 		);
 
-		await waitFor(() => expect(getAllByTestId("TransactionRow")).toHaveLength(4));
-		await waitFor(() => expect(getByTestId("transactions__fetch-more-button")).toBeInTheDocument());
+		await waitFor(() => {
+			expect(getByTestId("transactions__fetch-more-button")).toHaveTextContent("View More");
+			expect(getAllByTestId("TransactionRow")).toHaveLength(4);
+		});
 
 		act(() => {
 			fireEvent.click(getByTestId("transactions__fetch-more-button"));
 		});
 
-		await waitFor(
-			() => {
-				expect(getAllByTestId("TransactionRow")).toHaveLength(4);
-			},
-			{
-				timeout: 5000,
-			},
-		);
+		expect(getByTestId("transactions__fetch-more-button")).toHaveTextContent(commonTranslations.LOADING);
+
+		await waitFor(() => {
+			expect(getByTestId("transactions__fetch-more-button")).toHaveTextContent(commonTranslations.VIEW_MORE);
+			expect(getAllByTestId("TransactionRow")).toHaveLength(8);
+		});
 
 		expect(asFragment()).toMatchSnapshot();
 	});

diff --git a/src/domains/dashboard/pages/Dashboard/Dashboard.tsx b/src/domains/dashboard/pages/Dashboard/Dashboard.tsx
@@ -38,6 +38,8 @@ export const Dashboard = ({ networks, portfolioPercentages, balances }: Dashboar
 			activeProfile.transactionAggregate().flush();
 		}
 
+		setIsLoadingTransactions(true);
+
 		const response = await activeProfile.transactionAggregate().transactions({ limit: 10 });
 		const transactions = response.items();
 
@@ -48,6 +50,7 @@ export const Dashboard = ({ networks, portfolioPercentages, balances }: Dashboar
 
 	useEffect(() => {
 		fetchTransactions(true);
+		// eslint-disable-next-line
 	}, []);
 
 	// Wallet controls data