fix pagination

resources/assets/src/components/Pagination.tsx

@@ -12,7 +12,7 @@ export const labels = {
   next: '›',
 }
 
-const Pagination: React.FC<Props> = props => {
+const Pagination: React.FC<Props> = (props) => {
   const { page, totalPages, onChange } = props
 
   if (totalPages < 1) {
@@ -34,45 +34,53 @@ const Pagination: React.FC<Props> = props => {
             {i + 1}
           </PaginationItem>
         ))
-      ) : page < 3 || totalPages - page < 2 ? (
-        <>
-          {[1, 2].map(p => (
-            <PaginationItem
-              key={p}
-              active={page === p}
-              onClick={() => onChange(p)}
-            >
-              {p}
-            </PaginationItem>
-          ))}
-          <PaginationItem disabled>...</PaginationItem>
-          {[totalPages - 1, totalPages].map(p => (
-            <PaginationItem
-              key={p}
-              active={page === p}
-              onClick={() => onChange(p)}
-            >
-              {p}
-            </PaginationItem>
-          ))}
-        </>
       ) : (
         <>
-          <PaginationItem onClick={() => onChange(1)}>1</PaginationItem>
+          {page < 4 ? (
+            [1, 2, 3, 4].map((n) => (
+              <PaginationItem
+                key={n}
+                active={page === n}
+                onClick={() => onChange(n)}
+              >
+                {n}
+              </PaginationItem>
+            ))
+          ) : (
+            <PaginationItem onClick={() => onChange(1)}>1</PaginationItem>
+          )}
           <PaginationItem disabled>...</PaginationItem>
-          {[page - 1, page, page + 1].map(p => (
+          {page > 3 && page < totalPages - 2 && (
-            <PaginationItem
+            <>
-              key={p}
+              {[page - 1, page, page + 1].map((n) => (
-              active={page === p}
+                <PaginationItem
-              onClick={() => onChange(p)}
+                  key={n}
-            >
+                  active={page === n}
-              {p}
+                  onClick={() => onChange(n)}
+                >
+                  {n}
+                </PaginationItem>
+              ))}
+              <PaginationItem disabled>...</PaginationItem>
+            </>
+          )}
+          {totalPages - page < 3 ? (
+            [totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(
+              (n) => (
+                <PaginationItem
+                  key={n}
+                  active={page === n}
+                  onClick={() => onChange(n)}
+                >
+                  {n}
+                </PaginationItem>
+              ),
+            )
+          ) : (
+            <PaginationItem onClick={() => onChange(totalPages)}>
+              {totalPages}
             </PaginationItem>
-          ))}
+          )}
-          <PaginationItem disabled>...</PaginationItem>
-          <PaginationItem onClick={() => onChange(totalPages)}>
-            {totalPages}
-          </PaginationItem>
         </>
       )}
       <PaginationItem

resources/assets/tests/components/Pagination.test.tsx

@@ -80,7 +80,7 @@ describe('middle pages', () => {
   })
 
   describe('pages count greater than or equals to 8', () => {
-    it('edge', () => {
+    it('left edge', () => {
       const mock = jest.fn()
       const { getByText, queryByText } = render(
         <Pagination page={2} totalPages={10} onChange={mock} />,
@@ -90,31 +90,38 @@ describe('middle pages', () => {
       expect(mock).toBeCalledWith(1)
       expect(queryByText('1')).toBeInTheDocument()
       expect(queryByText('2')).toBeInTheDocument()
+      expect(queryByText('3')).toBeInTheDocument()
       expect(queryByText('...')).toBeInTheDocument()
-      expect(queryByText('9')).toBeInTheDocument()
       expect(queryByText('10')).toBeInTheDocument()
 
       fireEvent.click(getByText('2'))
       expect(mock).toBeCalledWith(2)
       expect(queryByText('1')).toBeInTheDocument()
       expect(queryByText('2')).toBeInTheDocument()
+      expect(queryByText('3')).toBeInTheDocument()
       expect(queryByText('...')).toBeInTheDocument()
+      expect(queryByText('10')).toBeInTheDocument()
+    })
+
+    it('right edge', () => {
+      const mock = jest.fn()
+      const { getByText, queryByText } = render(
+        <Pagination page={9} totalPages={10} onChange={mock} />,
+      )
+
+      fireEvent.click(getByText('10'))
+      expect(mock).toBeCalledWith(10)
+      expect(queryByText('1')).toBeInTheDocument()
+      expect(queryByText('...')).toBeInTheDocument()
+      expect(queryByText('8')).toBeInTheDocument()
       expect(queryByText('9')).toBeInTheDocument()
       expect(queryByText('10')).toBeInTheDocument()
 
       fireEvent.click(getByText('9'))
       expect(mock).toBeCalledWith(9)
       expect(queryByText('1')).toBeInTheDocument()
-      expect(queryByText('2')).toBeInTheDocument()
-      expect(queryByText('...')).toBeInTheDocument()
-      expect(queryByText('9')).toBeInTheDocument()
-      expect(queryByText('10')).toBeInTheDocument()
-
-      fireEvent.click(getByText('10'))
-      expect(mock).toBeCalledWith(10)
-      expect(queryByText('1')).toBeInTheDocument()
-      expect(queryByText('2')).toBeInTheDocument()
       expect(queryByText('...')).toBeInTheDocument()
+      expect(queryByText('8')).toBeInTheDocument()
       expect(queryByText('9')).toBeInTheDocument()
       expect(queryByText('10')).toBeInTheDocument()
     })