fix(i18n): missing translation on search

Boehringer-Ingelheim · Jan 30, 2021 · be00070 · be00070
1 parent e21df7f
commit be00070
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/components/SearchPopover/index.tsx b/src/components/SearchPopover/index.tsx
@@ -11,6 +11,8 @@ import {
   IonRadioGroup,
 } from '@ionic/react';
 import { ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { setCurrentSearchView } from '../../data/user/user.slice';
 import { selectCurrentSearchView } from '../../data/user/user.selector';
@@ -23,6 +25,7 @@ export const SearchPopover: React.FC = () => {
 
   const dispatch = useDispatch();
   const currentSearchView = useSelector(selectCurrentSearchView);
+  const { t } = useTranslation();
 
   return (
     <>
@@ -44,14 +47,14 @@ export const SearchPopover: React.FC = () => {
             }
           >
             <IonListHeader>
-              <IonLabel>View</IonLabel>
+              <IonLabel>{t('SEARCH.POPOVER.VIEW.TITLE')}</IonLabel>
             </IonListHeader>
             <IonItem>
-              <IonLabel>Card</IonLabel>
+              <IonLabel>{t('SEARCH.POPOVER.VIEW.ITEM.CARD')}</IonLabel>
               <IonRadio slot="end" value="card" />
             </IonItem>
             <IonItem lines="none">
-              <IonLabel>List</IonLabel>
+              <IonLabel>{t('SEARCH.POPOVER.VIEW.ITEM.LIST')}</IonLabel>
               <IonRadio slot="end" value="list" />
             </IonItem>
           </IonRadioGroup>

diff --git a/src/components/SearchResults/index.tsx b/src/components/SearchResults/index.tsx
@@ -1,5 +1,6 @@
 import { IonGrid, IonNote, IonRow } from '@ionic/react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { selectCurrentSearchView } from '../../data/user/user.selector';
 import { LunrResult } from '../../utils/hooks/useLunr';
@@ -11,14 +12,14 @@ interface ContainerProps {
 
 export const SearchResults: React.FC<ContainerProps> = (props) => {
   const { results } = props;
-
   const currentSearchView = useSelector(selectCurrentSearchView);
+  const { t } = useTranslation();
 
   if (results.length === 0) {
     return (
       <IonGrid>
         <IonRow class="ion-justify-content-center">
-          <IonNote class="ion-padding">No results found</IonNote>
+          <IonNote class="ion-padding">{t('SEARCH.RESULTS.NONE')}</IonNote>
         </IonRow>
       </IonGrid>
     );
@@ -28,7 +29,7 @@ export const SearchResults: React.FC<ContainerProps> = (props) => {
     <IonGrid>
       <IonRow key={'number-of-results'}>
         <IonNote class="ion-padding-horizontal">
-          Found {results.length} results
+          {t('SEARCH.RESULTS.FOUND_WITH_COUNT', { count: results.length })}
         </IonNote>
       </IonRow>
       {results.map((result, resultIndex) => {

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -3061,7 +3061,21 @@
   },
 
   "SEARCH": {
-    "TITLE": "Search"
+    "TITLE": "Search",
+    "POPOVER": {
+      "VIEW": {
+        "TITLE": "View",
+        "ITEM": {
+          "CARD": "Card",
+          "LIST": "List"
+        }
+      }
+    },
+    "RESULTS": {
+      "NONE": "No article found",
+      "FOUND_WITH_COUNT": "Found {{count}} article",
+      "FOUND_WITH_COUNT_plural": "Found {{count}} articles"
+    }
   },
 
   "SETTINGS": {