add dynamic tab count

LedgerHQ · Oct 3, 2024 · 6ce7e99 · 6ce7e99
1 parent db8dc31
commit 6ce7e99
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/...er-live-mobile/src/newArch/features/Web3Hub/__integrations__/web3hub.integration.test.tsx b/...er-live-mobile/src/newArch/features/Web3Hub/__integrations__/web3hub.integration.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { screen, waitForElementToBeRemoved } from "@testing-library/react-native";
+import { screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react-native";
 import { render } from "@tests/test-renderer";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
 import { Web3HubTest } from "./shared";
@@ -17,6 +17,10 @@ jest.mock(
     ),
 );
 
+jest.mock("react-native-view-shot", () => ({
+  captureScreen: jest.fn().mockResolvedValue("mock-uri.jpg"),
+}));
+
 async function waitForLoader() {
   expect(await screen.findByRole("progressbar")).toBeOnTheScreen();
   await waitForElementToBeRemoved(() => screen.getByRole("progressbar"), {
@@ -330,10 +334,12 @@ describe("Web3Hub integration test", () => {
 
     expect(await screen.findByRole("button", { name: /2/i })).toBeOnTheScreen();
     await user.press(screen.getByRole("button", { name: /2/i }));
-    expect(await screen.findByText("1 tab")).toBeOnTheScreen();
-    expect((await screen.findAllByTestId("web3hub-tab-item-dummy"))[0]).toBeOnTheScreen();
     expect(await screen.findByText("New tab")).toBeOnTheScreen();
 
+    expect(await screen.findByText("New tab")).toBeOnTheScreen();
+    await waitFor(() => expect(screen.getByText("1 tab")).toBeOnTheScreen());
+    await waitFor(() => expect(screen.getByTestId("web3hub-tab-item-dummy-0")).toBeOnTheScreen());
+
     expect(await screen.findByRole("button", { name: /back/i })).toBeOnTheScreen();
     await user.press(screen.getByRole("button", { name: /back/i }));
     expect(await screen.findByRole("button", { name: /back/i })).toBeOnTheScreen();
@@ -342,17 +348,14 @@ describe("Web3Hub integration test", () => {
 
     expect((await screen.findAllByText("Wallet API Tools"))[0]).toBeOnTheScreen();
     await user.press(screen.getAllByText("Wallet API Tools")[0]);
-    expect(await screen.findByText("Open Wallet API Tools")).toBeOnTheScreen();
-    await user.press(screen.getByText("Open Dummy Wallet App"));
     expect(await screen.findByText("wallet-api-tools-0")).toBeOnTheScreen();
     expect(await screen.findByText("Wallet API Tools")).toBeOnTheScreen();
 
     expect(await screen.findByRole("button", { name: /2/i })).toBeOnTheScreen();
     await user.press(screen.getByRole("button", { name: /2/i }));
-    expect(await screen.findByText("2 tabs")).toBeOnTheScreen();
-    expect(
-      (await screen.findAllByTestId("web3hub-tab-item-wallet-api-tools"))[0],
-    ).toBeOnTheScreen();
+
     expect(await screen.findByText("New tab")).toBeOnTheScreen();
+    await waitFor(() => expect(screen.getByText("2 tabs")).toBeOnTheScreen());
+    await waitFor(() => expect(screen.getByTestId(/wallet-api-tools-0/)).toBeOnTheScreen());
   });
 });
diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx
@@ -1,19 +1,33 @@
-import React from "react";
-import { useTheme } from "@react-navigation/native";
+import React, { useCallback, useState } from "react";
+import { useTheme, useFocusEffect } from "@react-navigation/native";
 import { View, StyleSheet } from "react-native";
 import { Text } from "@ledgerhq/native-ui";
 import { BorderlessButton } from "react-native-gesture-handler";
 import type { AppProps, MainProps, SearchProps } from "LLM/features/Web3Hub/types";
 import { NavigatorName, ScreenName } from "~/const";
+import { Web3HubTabType } from "../../screens/Web3HubTabs/components/TabItem";
+import deviceStorage from "~/logic/storeWrapper";
 
 type Props = {
-  count: number;
+  count?: number;
   onclick?: () => void;
   navigation: MainProps["navigation"] | SearchProps["navigation"] | AppProps["navigation"];
 };
 
-export default function TabButton({ count, navigation, onclick }: Props) {
+export default function TabButton({ navigation, onclick }: Props) {
   const { colors } = useTheme();
+  const [count, setCount] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      const getTabCount = async () => {
+        const tabCount = (await deviceStorage.get("web3hubTabHistory")) as Web3HubTabType[];
+        setCount(tabCount.length.toString());
+      };
+
+      getTabCount();
+    }, []),
+  );
 
   const handleClick = () => {
     if (onclick) {

diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/index.tsx
@@ -51,7 +51,7 @@ export default function Web3HubTabs({ navigation }: TabsProps) {
     }, 400);
 
     return () => clearTimeout(timer);
-  }, [navigation]);
+  }, []);
 
   return (
     <SafeAreaView edges={edges} style={{ flex: 1 }}>