Add goToIndex

trilitech · Sep 9, 2024 · 743c928 · 743c928
1 parent c61f9ef
commit 743c928
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 55 deletions.
diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
@@ -24,7 +24,7 @@ import { PlusIcon, TrashIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AccountTile } from "../AccountTile";
 import { ModalCloseButton } from "../CloseButton";
-import { DeriveMnemonicAccount } from "../DeriveMnemonicAccount";
+import { DeriveMnemonicAccountModal } from "../DeriveMnemonicAccountModal";
 import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
 import { useIsAccountVerified } from "../Onboarding/VerificationFlow";
 
@@ -46,7 +46,7 @@ export const AccountSelectorModal = () => {
 
     switch (account.type) {
       case "mnemonic":
-        return openWith(<DeriveMnemonicAccount account={account as MnemonicAccount} />);
+        return openWith(<DeriveMnemonicAccountModal account={account as MnemonicAccount} />);
       default:
         break;
     }

diff --git a/apps/web/src/components/BackButton/ModalBackButton.tsx b/apps/web/src/components/BackButton/ModalBackButton.tsx
@@ -5,5 +5,5 @@ import { BaseBackButton } from "./BaseBackButton";
 export const ModalBackButton = () => {
   const { hasPrevious, goBack } = useDynamicModalContext();
 
-  return hasPrevious ? <BaseBackButton onClick={() => goBack()} /> : null;
+  return hasPrevious ? <BaseBackButton onClick={goBack} /> : null;
 };
diff --git a/apps/web/src/components/DeriveMnemonicAccount/index.ts b/apps/web/src/components/DeriveMnemonicAccount/index.ts
diff --git a/...MnemonicAccount/DeriveMnemonicAccount.tsx → ...countModal/DeriveMnemonicAccountModal.tsx b/...MnemonicAccount/DeriveMnemonicAccount.tsx → ...countModal/DeriveMnemonicAccountModal.tsx
@@ -6,19 +6,17 @@ import { useAsyncActionHandler, useDeriveMnemonicAccount } from "@umami/state";
 import { MasterPasswordModal } from "../MasterPasswordModal";
 import { NameAccountModal } from "../NameAccountModal";
 
-type DeriveMnemonicAccountProps = {
+type DeriveMnemonicAccountModalProps = {
   account: MnemonicAccount;
 };
 
-export const DeriveMnemonicAccount = ({ account }: DeriveMnemonicAccountProps) => {
-  const { goBack, allFormValues, openWith } = useDynamicModalContext();
+export const DeriveMnemonicAccountModal = ({ account }: DeriveMnemonicAccountModalProps) => {
+  const { goToIndex, openWith } = useDynamicModalContext();
 
   const { handleAsyncAction } = useAsyncActionHandler();
   const toast = useToast();
   const deriveMnemonicAccount = useDeriveMnemonicAccount();
 
-  console.log("allFormValues", allFormValues);
-
   const handleNameSubmit = ({ accountName }: { accountName: string }) => {
     const handlePasswordSubmit = ({ password }: { password: string }) =>
       handleAsyncAction(
@@ -28,7 +26,7 @@ export const DeriveMnemonicAccount = ({ account }: DeriveMnemonicAccountProps) =
             password,
             label: accountName.trim() || DEFAULT_ACCOUNT_LABEL,
           });
-          goBack(0);
+          goToIndex(0);
 
           toast({
             description: `New account created! Successfully derived account from ${account.seedFingerPrint}`,

diff --git a/apps/web/src/components/DeriveMnemonicAccountModal/index.ts b/apps/web/src/components/DeriveMnemonicAccountModal/index.ts
@@ -0,0 +1 @@
+export { DeriveMnemonicAccountModal } from "./DeriveMnemonicAccountModal";
diff --git a/apps/web/src/components/NameAccountModal/NameAccountModal.tsx b/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
@@ -13,7 +13,6 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useMultiForm } from "@umami/components";
-import { type ReactElement } from "react";
 
 import { UserIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";

diff --git a/packages/components/src/DynamicDisclosure/DynamicDisclosure.test.tsx b/packages/components/src/DynamicDisclosure/DynamicDisclosure.test.tsx
@@ -1,5 +1,5 @@
 import { useDynamicDrawer, useDynamicModal, useDynamicModalContext } from "./DynamicDisclosure";
-import { act, render, renderHook, screen, waitFor } from "../testUtils";
+import { act, render, renderHook, screen } from "../testUtils";
 
 describe("DynamicDisclosure", () => {
   describe("useDynamicModal", () => {
@@ -89,7 +89,7 @@ describe("DynamicDisclosure", () => {
       const onClose = jest.fn();
       const view = renderHook(() => useDynamicDrawer());
       await act(() => view.result.current.openWith(<div>test data</div>, { onClose }));
-      act(() => view.result.current.onClose());
+      await act(() => view.result.current.onClose());
       expect(onClose).toHaveBeenCalled();
     });
   });
@@ -114,74 +114,76 @@ describe("DynamicDisclosure", () => {
       expect(result.current.hasPrevious).toBe(false);
     });
 
-    it("should go back to specific index when goBack is called with a valid index", async () => {
+    it("should update hasPrevious correctly", () => {
       const { result } = renderHook(() => useDynamicModalContext());
 
+      expect(result.current.hasPrevious).toBe(false);
+
       act(() => {
         result.current.openWith(<div>First</div>);
       });
 
-      act(() => {
-        result.current.openWith(<div>Second</div>);
-      });
+      expect(result.current.hasPrevious).toBe(false);
 
       act(() => {
-        result.current.openWith(<div>Third</div>);
+        result.current.openWith(<div>Second</div>);
       });
 
       expect(result.current.hasPrevious).toBe(true);
 
       act(() => {
-        result.current.goBack(0);
+        result.current.goBack();
       });
 
       expect(result.current.hasPrevious).toBe(false);
-      expect(screen.getByText("First")).toBeVisible();
     });
 
-    it("should update hasPrevious correctly", () => {
-      const { result } = renderHook(() => useDynamicModalContext());
+    describe("goToIndex functionality", () => {
+      it("goToIndex should go back to specific index when is called with a valid index", async () => {
+        const { result } = renderHook(() => useDynamicModalContext());
 
-      expect(result.current.hasPrevious).toBe(false);
+        act(() => {
+          result.current.openWith(<div>First</div>);
+        });
 
-      act(() => {
-        result.current.openWith(<div>First</div>);
-      });
+        act(() => {
+          result.current.openWith(<div>Second</div>);
+        });
 
-      expect(result.current.hasPrevious).toBe(false);
+        act(() => {
+          result.current.openWith(<div>Third</div>);
+        });
 
-      act(() => {
-        result.current.openWith(<div>Second</div>);
-      });
+        expect(result.current.hasPrevious).toBe(true);
 
-      expect(result.current.hasPrevious).toBe(true);
+        act(() => {
+          result.current.goToIndex(0);
+        });
 
-      act(() => {
-        result.current.goBack();
+        expect(result.current.hasPrevious).toBe(false);
+        expect(screen.getByText("First")).toBeVisible();
       });
 
-      expect(result.current.hasPrevious).toBe(false);
-    });
+      it("goToIndex should go back one step when is called with out-of-bounds index", async () => {
+        const { result } = renderHook(() => useDynamicModalContext());
 
-    it("should go back one step when goBack is called with out-of-bounds index", async () => {
-      const { result } = renderHook(() => useDynamicModalContext());
+        act(() => {
+          result.current.openWith(<div>First</div>);
+          result.current.openWith(<div>Second</div>);
+          result.current.openWith(<div>Third</div>);
+        });
 
-      act(() => {
-        result.current.openWith(<div>First</div>);
-        result.current.openWith(<div>Second</div>);
-        result.current.openWith(<div>Third</div>);
-      });
+        expect(result.current.isOpen).toBe(true);
+        expect(result.current.hasPrevious).toBe(true);
 
-      expect(result.current.isOpen).toBe(true);
-      expect(result.current.hasPrevious).toBe(true);
+        act(() => {
+          result.current.goToIndex(5);
+        });
 
-      act(() => {
-        result.current.goBack(5);
+        expect(result.current.isOpen).toBe(true);
+        expect(result.current.hasPrevious).toBe(true);
+        expect(screen.getByText("Second")).toBeVisible();
       });
-
-      expect(result.current.isOpen).toBe(true);
-      expect(result.current.hasPrevious).toBe(true);
-      expect(screen.getByText("Second")).toBeVisible();
     });
   });
 });
diff --git a/packages/components/src/DynamicDisclosure/DynamicDisclosure.tsx b/packages/components/src/DynamicDisclosure/DynamicDisclosure.tsx
@@ -27,7 +27,8 @@ interface DynamicDisclosureContextType {
   ) => Promise<void>;
   onClose: () => void;
   isOpen: boolean;
-  goBack: (index?: number) => void;
+  goBack: () => void;
+  goToIndex: (index: number) => void;
   hasPrevious: boolean;
   formValues: Record<string, any>;
   allFormValues: RefObject<Record<string, any>>;
@@ -37,6 +38,7 @@ const defaultContextValue = {
   openWith: async () => {},
   onClose: () => {},
   goBack: () => {},
+  goToIndex: () => {},
   isOpen: false,
   hasPrevious: false,
   formValues: {},
@@ -100,7 +102,12 @@ export const useDynamicDisclosure = () => {
     return Promise.resolve();
   };
 
-  const goBack = (index = -1) => {
+  const goBack = () => {
+    setCurrentIndex(current => current - 1);
+    stackRef.current.pop();
+  };
+
+  const goToIndex = (index = -1) => {
     if (index >= 0 && index < stackRef.current.length) {
       // Go to specific index
       const itemsToRemove = stackRef.current.length - index - 1;
@@ -128,6 +135,7 @@ export const useDynamicDisclosure = () => {
     onClose: currentItem?.props.onClose || (() => {}),
     openWith,
     goBack,
+    goToIndex,
     content: currentItem?.content,
     props: currentItem?.props || {},
     formValues: currentItem?.formValues || {},

diff --git a/packages/components/src/DynamicDisclosure/useMultiForm.test.tsx b/packages/components/src/DynamicDisclosure/useMultiForm.test.tsx
@@ -19,7 +19,7 @@ const Page3 = () => {
   return (
     <ModalContent>
       <ModalHeader>
-        <Button onClick={() => goBack()}>Go back</Button>
+        <Button onClick={goBack}>Go back</Button>
       </ModalHeader>
       <ModalBody>
         <Box data-testid="all-form-values">{JSON.stringify(allFormValues.current)}</Box>
@@ -35,7 +35,7 @@ const Page2 = () => {
   return (
     <ModalContent>
       <ModalHeader>
-        <Button onClick={() => goBack()}>Go back</Button>
+        <Button onClick={goBack}>Go back</Button>
       </ModalHeader>
       <ModalBody>
         <form data-testid="form2" onSubmit={form.handleSubmit(() => openWith(<Page3 />))}>

diff --git a/packages/core/src/getAccountGroupLabel.ts b/packages/core/src/getAccountGroupLabel.ts
@@ -1,4 +1,4 @@
-import { Account } from "./Account";
+import { type Account } from "./Account";
 
 export const getAccountGroupLabel = (account: Account) => {
   switch (account.type) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { DeriveMnemonicAccountModal } from "./DeriveMnemonicAccountModal";