chore: added fixes

Author: pietro-maximoff

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.stories.tsx

@@ -2,7 +2,6 @@ import { Story } from '@storybook/react';
 
 import React, { ComponentProps } from 'react';
 
-import { noop } from '../../utils';
 import { AddressTablePagination } from './AddressTablePagination';
 
 export default {
@@ -12,14 +11,16 @@ export default {
 
 const Template: Story<ComponentProps<typeof AddressTablePagination>> = args => (
   <>
-    <AddressTablePagination {...args} />
+    <AddressTablePagination
+      {...args}
+      onPageChange={offset => alert('offset - ' + offset)}
+    />
   </>
 );
 
 export const Basic = Template.bind({});
 Basic.args = {
   className: '',
   dataLayoutId: '',
-  limit: 5,
-  onPageChange: noop,
+  itemsPerPage: 5,
 };

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.test.tsx

@@ -1,21 +1,25 @@
-import { screen, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import React from 'react';
 
 import { AddressTablePagination } from './AddressTablePagination';
 
 describe('AddressTablePagination', () => {
-  it('renders a AddressTablePagination', () => {
+  it('renders AddressTablePagination', () => {
     const onPageChange = jest.fn();
-    render(<AddressTablePagination onPageChange={onPageChange} />);
-    expect(screen.findAllByRole('svg[data-icon="arrow-back"]')).toBeDefined();
+    const { findAllByRole } = render(
+      <AddressTablePagination onPageChange={onPageChange} />,
+    );
+    expect(findAllByRole('svg[data-icon="arrow-back"]')).toBeDefined();
   });
 
-  it('does not allow to click on a disabled button', () => {
+  it('does not allow to click Previous without clicking Next first', () => {
     const onPageChange = jest.fn();
-    render(<AddressTablePagination onPageChange={onPageChange} />);
-    screen.getAllByRole('button').forEach(element => {
+    const { getAllByRole } = render(
+      <AddressTablePagination onPageChange={onPageChange} />,
+    );
+    getAllByRole('button').forEach(element => {
       userEvent.click(element);
     });
     expect(onPageChange).toBeCalledTimes(1);

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.tsx

@@ -9,28 +9,29 @@ type AddressTablePaginationProps = {
   onPageChange: (value: number) => void;
   className?: string;
   dataLayoutId?: string;
-  limit?: number;
+  itemsPerPage?: number;
 };
 
-const DEFAULT_LIMIT = 5;
+const DEFAULT_ITEMS_PER_PAGE = 5;
 
 export const AddressTablePagination: FC<AddressTablePaginationProps> = ({
   onPageChange,
   className,
   dataLayoutId,
-  limit = DEFAULT_LIMIT,
+  itemsPerPage = DEFAULT_ITEMS_PER_PAGE,
 }) => {
   const [offset, setOffset] = useState(0);
+  console.log(offset);
 
-  const handleMoveRight = useCallback(() => {
-    setOffset(offset + limit);
-    onPageChange(offset);
-  }, [setOffset, offset, limit, onPageChange]);
+  const handleClickNext = useCallback(() => {
+    setOffset(offset + itemsPerPage);
+    onPageChange(offset + itemsPerPage);
+  }, [setOffset, offset, itemsPerPage, onPageChange]);
 
-  const handleMoveLeft = useCallback(() => {
-    setOffset(offset - limit);
-    onPageChange(offset);
-  }, [setOffset, offset, limit, onPageChange]);
+  const handleClickPrevious = useCallback(() => {
+    setOffset(offset - itemsPerPage);
+    onPageChange(offset - itemsPerPage);
+  }, [setOffset, offset, itemsPerPage, onPageChange]);
 
   const isDisabled = useMemo(() => offset <= 0, [offset]);
 
@@ -39,10 +40,10 @@ export const AddressTablePagination: FC<AddressTablePaginationProps> = ({
       data-layout-id={dataLayoutId}
       className={classnames(styles.AddressTablePagination, className)}
     >
-      <button type="button" disabled={isDisabled} onClick={handleMoveLeft}>
+      <button type="button" disabled={isDisabled} onClick={handleClickPrevious}>
         <Icon icon="arrow-back" size={12} />
       </button>
-      <button type="button" onClick={handleMoveRight}>
+      <button type="button" onClick={handleClickNext}>
         <Icon icon="arrow-forward" size={12} />
       </button>
     </div>