fix: added translation interpolation and plurality

okta · Jun 13, 2023 · 39ee64d · 39ee64d
1 parent 5e3e216
commit 39ee64d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/packages/odyssey-react-mui/src/InfinitelyScrolledDataGrid.tsx b/packages/odyssey-react-mui/src/InfinitelyScrolledDataGrid.tsx
@@ -27,7 +27,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 export type DefaultMaterialReactTableData = Record<string, unknown>;
 
@@ -130,11 +130,23 @@ const InfinitelyScrolledDataGrid = <
     () =>
       fetchMoreData ? (
         <Typography>
-          {t("datagrid.fetchedrows.text", String(totalFetchedRows))}
+          <Trans
+            count={totalFetchedRows}
+            i18nKey="datagrid.fetchedrows.text"
+            values={{
+              totalRows: totalFetchedRows,
+            }}
+          />
         </Typography>
       ) : (
         <Typography>
-          {t("datagrid.rows.text", String(totalFetchedRows))}
+          <Trans
+            count={totalFetchedRows}
+            i18nKey="datagrid.rows.text"
+            values={{
+              totalRows: totalFetchedRows,
+            }}
+          />
         </Typography>
       ),
     [fetchMoreData, totalFetchedRows]

diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -1,6 +1,8 @@
 datagrid.error = Error loading data.
-datagrid.fetchedrows.text = Fetched {0} total rows
-datagrid.rows.text = {0} rows
+datagrid.fetchedrows.text = Fetched {{totalRows}} row
+datagrid.fetchedrows.text_plural = Fetched {{totalRows}} total rows
+datagrid.rows.text = {{totalRows}} row
+datagrid.rows.text_plural = {{totalRows}} rows
 fielderror.screenreader.text = Error
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Required