Fix issue with shifting account header (#976)

* Fix issue with shifting account header * Update tests
penumbra-zone · Apr 24, 2024 · e512bd1 · e512bd1
1 parent 932f7e8
commit e512bd1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 43 deletions.
diff --git a/packages/ui/components/ui/account-switcher.test.tsx b/packages/ui/components/ui/account-switcher.test.tsx
@@ -56,10 +56,10 @@ describe('<AccountSwitcher />', () => {
       expect(onChange).toHaveBeenCalledWith(122);
     });
 
-    it("does not render when we're at account 0", () => {
+    it("is disabled when we're at account 0", () => {
       const { queryByLabelText } = render(<AccountSwitcher account={0} onChange={vi.fn()} />);
 
-      expect(queryByLabelText('Previous account')).toBeNull();
+      expect(queryByLabelText('Previous account')?.parentElement).toBeDisabled();
     });
 
     describe('when a filter has been passed', () => {
@@ -74,12 +74,12 @@ describe('<AccountSwitcher />', () => {
         expect(onChange).toHaveBeenCalledWith(100);
       });
 
-      it("does not render when we're at the lowest account index in the filter", () => {
+      it("is disabled when we're at the lowest account index in the filter", () => {
         const { queryByLabelText } = render(
           <AccountSwitcher account={100} onChange={vi.fn()} filter={[123, 100]} />,
         );
 
-        expect(queryByLabelText('Previous account')).toBeNull();
+        expect(queryByLabelText('Previous account')?.parentElement).toBeDisabled();
       });
     });
   });
@@ -94,10 +94,10 @@ describe('<AccountSwitcher />', () => {
       expect(onChange).toHaveBeenCalledWith(124);
     });
 
-    it("does not render when we're at the maximum account index", () => {
+    it("is disabled when we're at the maximum account index", () => {
       const { queryByLabelText } = render(<AccountSwitcher account={2 ** 32} onChange={vi.fn()} />);
 
-      expect(queryByLabelText('Next account')).toBeNull();
+      expect(queryByLabelText('Next account')?.parentElement).toBeDisabled();
     });
 
     describe('when a filter has been passed', () => {
@@ -112,12 +112,12 @@ describe('<AccountSwitcher />', () => {
         expect(onChange).toHaveBeenCalledWith(123);
       });
 
-      it("does not render when we're at the highest account index in the filter", () => {
+      it("is disabled when we're at the highest account index in the filter", () => {
         const { queryByLabelText } = render(
           <AccountSwitcher account={123} onChange={vi.fn()} filter={[123, 100]} />,
         );
 
-        expect(queryByLabelText('Next account')).toBeNull();
+        expect(queryByLabelText('Next account')?.parentElement).toBeDisabled();
       });
     });
   });

diff --git a/packages/ui/components/ui/account-switcher.tsx b/packages/ui/components/ui/account-switcher.tsx
@@ -50,29 +50,26 @@ export const AccountSwitcher = ({
     }
   };
 
-  const shouldShowPreviousButton =
+  const previousButtonEnabled =
     account !== 0 && (!sortedFilter || sortedFilter.indexOf(account) > 0);
-  const shouldShowNextButton =
+  const nextButtonEnabled =
     account !== MAX_INDEX &&
     (!sortedFilter || sortedFilter.indexOf(account) < sortedFilter.length - 1);
 
   return (
     <div className='flex items-center justify-between'>
-      {shouldShowPreviousButton ? (
-        <Button
-          variant='ghost'
-          className={cn('hover:bg-inherit hover:text-slate-400', account === 0 && 'cursor-default')}
-        >
-          <ArrowLeftIcon
-            aria-label='Previous account'
-            role='button'
-            onClick={handleClickPrevious}
-            className='size-6 hover:cursor-pointer'
-          />
-        </Button>
-      ) : (
-        <span className='size-6' />
-      )}
+      <Button
+        variant='ghost'
+        className={cn('hover:bg-inherit hover:text-slate-400', account === 0 && 'cursor-default')}
+        disabled={!previousButtonEnabled}
+      >
+        <ArrowLeftIcon
+          aria-label='Previous account'
+          role='button'
+          onClick={handleClickPrevious}
+          className='size-6 hover:cursor-pointer'
+        />
+      </Button>
       <div className='select-none text-center font-headline text-xl font-semibold leading-[30px]'>
         <div className='flex flex-row flex-wrap items-end gap-[6px]'>
           <span>Account</span>
@@ -109,24 +106,21 @@ export const AccountSwitcher = ({
           </div>
         </div>
       </div>
-      {shouldShowNextButton ? (
-        <Button
-          variant='ghost'
-          className={cn(
-            'hover:bg-inherit hover:text-slate-400',
-            account === MAX_INDEX && 'cursor-default',
-          )}
-        >
-          <ArrowRightIcon
-            aria-label='Next account'
-            role='button'
-            onClick={handleClickNext}
-            className='size-6 hover:cursor-pointer'
-          />
-        </Button>
-      ) : (
-        <span className='size-6' />
-      )}
+      <Button
+        variant='ghost'
+        className={cn(
+          'hover:bg-inherit hover:text-slate-400',
+          account === MAX_INDEX && 'cursor-default',
+        )}
+        disabled={!nextButtonEnabled}
+      >
+        <ArrowRightIcon
+          aria-label='Next account'
+          role='button'
+          onClick={handleClickNext}
+          className='size-6 hover:cursor-pointer'
+        />
+      </Button>
     </div>
   );
 };