Translate frontend with i18next

package.json

@@ -29,6 +29,9 @@
     "bootstrap": "^4.2.1",
     "excerpts": "0.0.3",
     "html-to-react": "^1.7.0",
+    "i18next": "^23.11.4",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "immutability-helper": "^3.0.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "qs": "^6.11.2",
@@ -37,6 +40,7 @@
     "react-content-loader": "^6.0.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
+    "react-i18next": "^12.2.0",
     "react-js-pagination": "^3.0.2",
     "react-router-dom": "^6.10.0",
     "reactstrap": "^9.2.1",

src/components/DataTable/DataTablePageResults/index.jsx

@@ -1,12 +1,15 @@
 import React, { useContext } from 'react';
 import { ResourceDispatch } from '../../../services/resource/resource_defaults';
 import PropTypes from 'prop-types';
+import '../../../i18n';
+import { useTranslation } from 'react-i18next';
 
 const DataTablePageResults = ({
   total,
   className,
   viewing = false
 }) => {
+  const { t, i18n } = useTranslation();
   const { resourceState } = useContext(ResourceDispatch);
   const pageSize = resourceState.pageSize;
   const currentPage = resourceState.currentPage
@@ -34,11 +37,11 @@ const DataTablePageResults = ({
         {' '}
         <span className="high-result">{currentHighestResult}</span>
         {' '}
-        of
+        {t('of')}
         {' '}
         <span className="total">{displayTotal}</span>
         {' '}
-        rows
+        {t('rows')}
       </p>
     </div>
   );

src/components/PublisherDatasetCountByName/doc.mdx

@@ -24,15 +24,15 @@ import PublisherDatasetCountByName from './index'
 ### With a count of 1.
 <Playground>
   <PublisherDatasetCountByName
-      datasetCount="1"
+      datasetCount={1}
       name="State Economic Council"
   />
 </Playground>
 
 With a count of more than 1.
 <Playground>
     <PublisherDatasetCountByName
-      datasetCount="3"
+      datasetCount={3}
       name="State Economic Council"
   />
 </Playground>

src/components/PublisherDatasetCountByName/index.jsx

@@ -1,27 +1,37 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
+import "../../i18n";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 const PublisherDatasetCountByName = (props) => {
-  const { name, searchUrl, datasetCount} = props;
-  const link = searchUrl ? searchUrl : `/search/?publisher__name=${name}`;
+  const { t, i18n } = useTranslation();
+  const { name, searchUrl, datasetCount } = props;
+  const link = searchUrl || `/search/?publisher__name=${name}`;
   let str;
   if (datasetCount) {
-    str = (datasetCount === 1) ? '1 dataset' : `${datasetCount} datasets`;
+    str =
+      datasetCount === 1
+        ? `1 ${t("dataset")}`
+        : `${datasetCount} ${t("datasets")}`;
   } else {
-    str = 'datasets';
+    str = t("datasets");
   }
   return (
-    <Link to={link} className="publisher-datasets-link" alt="Publisher datasets">
+    <Link
+      to={link}
+      className="publisher-datasets-link"
+      alt="Publisher datasets"
+    >
       {str}
     </Link>
   );
 };
 
-export default PublisherDatasetCountByName;
-
 PublisherDatasetCountByName.propTypes = {
   name: PropTypes.string,
   searchUrl: PropTypes.string,
-  datasetCount: PropTypes.string
+  datasetCount: PropTypes.number,
 };
+
+export default PublisherDatasetCountByName;

src/components/SearchFacets/SearchFacet/index.jsx

@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty } from 'lodash';
+import '../../../i18n';
+import { useTranslation } from 'react-i18next';
 
 import { resetSelectedFacets } from '../../../services/search/search_functions';
 import ToggleBlock from '../../ToggleBlock';
@@ -29,6 +31,7 @@ const SearchFacet = ({
   onMore,
   onLess
 }) => {
+  const { t, i18n } = useTranslation();
 
   let myLabel = '';
   if (!label) {
@@ -123,7 +126,7 @@ const SearchFacet = ({
           {(resetIcon) && (
             <span className="undo-icon">{resetIcon}</span>
           )}
-          Reset
+          {t('reset')}
         </button>
       ) : null}
       <ToggleBlock

src/components/SearchPaginationResults/index.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import '../../i18n';
+import { useTranslation } from 'react-i18next';
 
 const SearchPaginationResults = ({
   className,
   currentPage,
   pageSize,
   total,
 }) => {
+  const { t, i18n } = useTranslation();
   const startingNumber = total > 0 ? 1 : 0;
   const currentLowestResult = startingNumber + ((pageSize * currentPage) - pageSize);
   let currentHighestResult = (pageSize * currentPage);
@@ -19,11 +22,11 @@ const SearchPaginationResults = ({
       -
       {currentHighestResult}
       {' '}
-      of
+      {t('of')}
       {' '}
       {total}
       {' '}
-      datasets
+      {t('datasets')}
     </div>
   );
 };

src/components/SearchResultsMessage/revisions/SearchResultsMessage2/index.jsx

@@ -1,7 +1,10 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import '../../../../i18n';
+import { useTranslation } from 'react-i18next';
 
 const SearchResultsMessage2 = ({ className, total, searchTerm, searchClass, facets, facetTitleClass, facetListClass, facetDelimiter, facetTypeDelimiter, facetLimit }) => {
+  const { t, i18n } = useTranslation();
 
   const totalInfo = getTotalInfo(total);
   const searchInfo = getSearchInfo(searchTerm, searchClass);
@@ -20,8 +23,8 @@ const SearchResultsMessage2 = ({ className, total, searchTerm, searchClass, face
   function getTotalInfo(total) {
     let text = []
     text.push(total.toLocaleString('en'));
-    text.push(total !== 1 ? 'datasets' : 'dataset');
-    text.push('found');
+    text.push(total !== 1 ? t('datasets') : t('dataset'));
+    text.push(t('found'));
     return text.join(" ");
   }
 

src/components/ShowMoreContainer/index.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import '../../i18n';
+import { useTranslation } from 'react-i18next';
 
 export default function ShowMoreContainer({
   container,
@@ -13,6 +15,7 @@ export default function ShowMoreContainer({
   onLess
 }) {
   const [showMore, toggleShowMore] = useState(false);
+  const { t, i18n } = useTranslation();
 
   let showMoreButton = (
     <button
@@ -36,7 +39,7 @@ export default function ShowMoreContainer({
     }
     return item;
   });
-  const btnText = btnClosedText || `Show ${totalItems - visibleItems.length} more`;
+  const btnText = btnClosedText || `${t('show')} ${totalItems - visibleItems.length} ${t('more')}`;
   if (!showMore) {
     showMoreButton = (
       <button

src/i18n.js

@@ -0,0 +1,46 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+const resources = {
+  en: {
+    translation: {
+      dataset: "dataset",
+      datasets: "datasets",
+      found: "found",
+      more: "more",
+      of: "of",
+      reset: "reset",
+      rows: "rows",
+      "rows-per-page": "Rows per page",
+      show: "Show",
+    },
+  },
+  es: {
+    translation: {
+      dataset: "conjunto de datos",
+      datasets: "conjuntos de datos",
+      found: "encontrados",
+      more: "más",
+      of: "de",
+      reset: "reiniciar",
+      rows: "filas",
+      "rows-per-page": "Filas por página",
+      show: "Mostrar",
+    },
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: "en",
+    debug: false,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;