feat: made the tabs not controlled

hirosystems · Jan 16, 2025 · 2ec8a25 · 2ec8a25
1 parent 77e5b13
commit 2ec8a25
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/src/app/address/[principal]/TokenBalanceCard/NftAvatar.tsx b/src/app/address/[principal]/TokenBalanceCard/NftAvatar.tsx
@@ -15,7 +15,9 @@ interface NftAvatarProps {
 export function NftAvatar({ token, contractId, firstNftValue, asset }: NftAvatarProps) {
   const { data: tokenMetadata } = useNftMetadata(
     { contractId, tokenId: Number(firstNftValue) },
-    { enabled: !!firstNftValue, retry: 1, retryDelay: 2000 }
+    // { enabled: !!firstNftValue, retry: 1, retryDelay: 2000 }
+    { enabled: !!firstNftValue }
+
   );
   return <TokenAvatar metadataImageUrl={tokenMetadata?.metadata?.cached_image} asset={asset} />;
 }
diff --git a/src/app/token/[tokenId]/skeleton.tsx b/src/app/token/[tokenId]/skeleton.tsx
@@ -21,8 +21,6 @@ export default function Skeleton() {
       </StatsWrapper>
 
       <TabsContainer
-        setTabId={() => {}}
-        tabId={'confirmed'}
         tabs={[
           {
             title: 'Confirmed',

diff --git a/src/app/transactions/skeleton.tsx b/src/app/transactions/skeleton.tsx
@@ -21,8 +21,6 @@ export default function Skeleton() {
       </StatsWrapper>
 
       <TabsContainer
-        setTabId={() => {}}
-        tabId={'confirmed'}
         tabs={[
           {
             title: 'Confirmed',

diff --git a/src/common/components/TabsContainer.tsx b/src/common/components/TabsContainer.tsx
@@ -6,14 +6,21 @@ import { Section } from './Section';
 
 export const TabsContainer: FC<
   {
-    title?: string | ReactNode;
     tabs: TxListTab[];
+    onTabChange?: (id: string) => void;
+    title?: string | ReactNode;
     actions?: ReactNode;
   } & FlexProps
-> = ({ title, tabs, actions, ...props }) => {
+> = ({ onTabChange, title, tabs, actions, ...props }) => {
   return (
     <Section title={title} {...props}>
-      <Tabs.Root lazyMount defaultValue={tabs[0].id}>
+      <Tabs.Root
+        lazyMount
+        onValueChange={({ value: id }) => {
+          onTabChange?.(id);
+        }}
+        defaultValue={tabs[0].id}
+      >
         <Tabs.List width="full" border={'none'} pb={1}>
           <Flex
             gap={4}

diff --git a/src/common/components/__tests__/TabsContainer.test.tsx b/src/common/components/__tests__/TabsContainer.test.tsx
@@ -2,7 +2,6 @@ import { system } from '@/ui/theme/theme';
 import { ChakraProvider } from '@chakra-ui/react';
 import '@testing-library/jest-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
-import { useState } from 'react';
 
 import { TabsContainer } from '../TabsContainer';
 
@@ -20,11 +19,10 @@ const tabs = [
 ];
 
 describe('TabsContainer', () => {
-  // TODO: fix this test
   it('renders tabs with correct title', () => {
     const { getAllByRole } = render(
       <ChakraProvider value={system}>
-        <TabsContainer tabs={tabs} setTabId={jest.fn()} tabId="tab-1" />
+        <TabsContainer tabs={tabs} />
       </ChakraProvider>
     );
     const tabList = getAllByRole('tab');
@@ -35,11 +33,9 @@ describe('TabsContainer', () => {
 
   it('displays correct tab content when a tab is clicked', async () => {
     function TestWrapper() {
-      const [currentTabId, setCurrentTabId] = useState('tab-1');
-
       return (
         <ChakraProvider value={system}>
-          <TabsContainer tabs={tabs} setTabId={setCurrentTabId} tabId={currentTabId} />
+          <TabsContainer tabs={tabs} />
         </ChakraProvider>
       );
     }

diff --git a/src/features/txs-list/tabs/TxListTabsBase.tsx b/src/features/txs-list/tabs/TxListTabsBase.tsx
@@ -44,8 +44,7 @@ export const TxListTabsBase: FC<
   return (
     <TabsContainer
       tabs={tabs}
-      setTabId={setTabId}
-      tabId={tabId}
+      onTabChange={setTabId}
       actions={
         <Flex
           flexWrap={['wrap', 'wrap', 'nowrap', 'nowrap']}