Merge pull request #383 from b-hok/feature/localize-pagination-total

Feat: Add pagination total results

public/locales/en/pagination.json

@@ -1,10 +1,10 @@
 {
   "results_one": "1 {{item}}",
-  "results_other": "{{start}} to {{end}} of {{count}} {{item}}s",
+  "results_other": "{{start}} to {{end}} of {{formattedCount}} {{item}}s",
   "accumulated": {
-    "one": "{{count}} {{item}}",
-    "lessThanPageSize": "{{count}} {{item}}s",
-    "moreThanPageSize": "{{accumulated}} of {{count}} {{item}}s seen"
+    "one": "{{formattedCount}} {{item}}",
+    "lessThanPageSize": "{{formattedCount}} {{item}}s",
+    "moreThanPageSize": "{{accumulated}} of {{formattedCount}} {{item}}s seen"
   },
   "pageSize": "{{item}}s per page"
-}
+}

src/sections/shared/pagination/PaginationResultsInfo.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import styles from './Pagination.module.scss'
 import { PaginationInfo } from '../../../shared/pagination/domain/models/PaginationInfo'
 import { useTranslation } from 'react-i18next'
@@ -18,25 +18,32 @@ export function PaginationResultsInfo({ paginationInfo, accumulated }: Paginatio
       accumulated === 1
         ? 'accumulated.one'
         : accumulated < paginationInfo.pageSize
-        ? 'accumulated.lessThanPageSize'
-        : 'accumulated.moreThanPageSize',
+          ? 'accumulated.lessThanPageSize'
+          : 'accumulated.moreThanPageSize',
     [accumulated, paginationInfo.pageSize]
   )
 
+  const formattedCount = useMemo(
+    () => new Intl.NumberFormat().format(paginationInfo.totalItems),
+    [paginationInfo.totalItems]
+  )
+
   return (
     <span className={styles.results}>
       {typeof accumulated === 'number'
         ? t(defineLocale(accumulated), {
-            accumulated: accumulated,
-            count: paginationInfo.totalItems,
-            item: paginationInfo.itemName
-          })
+          accumulated: accumulated,
+          count: paginationInfo.totalItems,
+          formattedCount: formattedCount,
+          item: paginationInfo.itemName
+        })
         : t('results', {
-            start: paginationInfo.pageStartItem,
-            end: paginationInfo.pageEndItem,
-            item: paginationInfo.itemName,
-            count: paginationInfo.totalItems
-          })}
+          start: paginationInfo.pageStartItem,
+          end: paginationInfo.pageEndItem,
+          item: paginationInfo.itemName,
+          count: paginationInfo.totalItems,
+          formattedCount: formattedCount,
+        })}
     </span>
   )
-}
+}

tests/component/sections/shared/pagination/PaginationResultsInfo.spec.tsx

@@ -53,4 +53,17 @@ describe('PaginationResultsInfo', () => {
     )
     cy.findByText('10 of 15 Items seen').should('exist')
   })
-})
+
+  it('shows the correct formatted results when accumulated prop passed and results are more than page size', () => {
+    const totalCount = 1500
+    const expectedFormattedTotalCount = new Intl.NumberFormat().format(totalCount)
+
+    cy.customMount(
+      <PaginationResultsInfo
+        paginationInfo={new PaginationInfo<DatasetPaginationInfo>(1, 100, totalCount)}
+        accumulated={500}
+      />
+    )
+    cy.findByText(`500 of ${expectedFormattedTotalCount} Items seen`).should('exist')
+  })
+})