fix: Translation fix for Left Drawer (#2018)

* chore: Update common translations for multiple locales * chore: Update CollapsibleDropdown component with Redux and i18next providers
PalisadoesFoundation · Jun 2, 2024 · cf57c47 · cf57c47
1 parent 37b4e1a
commit cf57c47
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 10 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -47,5 +47,19 @@
   "startDate": "Start Date",
   "endDate": "End Date",
   "startTime": "Start Time",
-  "endTime": "End Time"
+  "endTime": "End Time",
+  "My Organizations": "My Organizations",
+  "Dashboard": "Dashboard",
+  "People": "People",
+  "Events": "Events",
+  "Venues": "Venues",
+  "Action Items": "Action Items",
+  "Posts": "Posts",
+  "Block/Unblock": "Block/Unblock",
+  "Advertisement": "Advertisement",
+  "Funds": "Funds",
+  "Membership Requests": "Membership Requests",
+  "Plugins": "Plugins",
+  "Plugin Store": "Plugin Store",
+  "Settings": "Settings"
 }
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -47,5 +47,19 @@
   "startDate": "Date de début",
   "endDate": "Date de fin",
   "startTime": "Heure de début",
-  "endTime": "Heure de fin"
+  "endTime": "Heure de fin",
+  "My Organizations": "Mes Organisations",
+  "Dashboard": "Tableau de Bord",
+  "People": "Personnes",
+  "Events": "Événements",
+  "Venues": "Lieux",
+  "Action Items": "Éléments d'Action",
+  "Posts": "Publications",
+  "Block/Unblock": "Bloquer/Débloquer",
+  "Advertisement": "Publicité",
+  "Funds": "Fonds",
+  "Membership Requests": "Demandes d'Adhésion",
+  "Plugins": "Plugins",
+  "Plugin Store": "Magasin de Plugins",
+  "Settings": "Paramètres"
 }
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
@@ -47,5 +47,19 @@
   "startDate": "आरंभ करने की तिथि",
   "endDate": "अंतिम तिथि",
   "startTime": "समय शुरू",
-  "endTime": "अंत समय"
+  "endTime": "अंत समय",
+  "My Organizations": "मेरे संगठन",
+  "Dashboard": "डैशबोर्ड",
+  "People": "लोग",
+  "Events": "कार्यक्रम",
+  "Venues": "स्थल",
+  "Action Items": "कार्य आइटम",
+  "Posts": "पोस्ट",
+  "Block/Unblock": "ब्लॉक/अनब्लॉक",
+  "Advertisement": "विज्ञापन",
+  "Funds": "निधि",
+  "Membership Requests": "सदस्यता अनुरोध",
+  "Plugins": "प्लगइन्स",
+  "Plugin Store": "प्लगइन स्टोर",
+  "Settings": "सेटिंग्स"
 }
diff --git a/public/locales/sp/common.json b/public/locales/sp/common.json
@@ -47,5 +47,19 @@
   "startDate": "Start Date",
   "endDate": "End Date",
   "startTime": "Start Time",
-  "endTime": "End Time"
+  "endTime": "End Time",
+  "My Organizations": "Mis Organizaciones",
+  "Dashboard": "Tablero",
+  "People": "Gente",
+  "Events": "Eventos",
+  "Venues": "Lugares",
+  "Action Items": "Elementos de Acción",
+  "Posts": "Publicaciones",
+  "Block/Unblock": "Bloquear/Desbloquear",
+  "Advertisement": "Publicidad",
+  "Funds": "Fondos",
+  "Membership Requests": "Solicitudes de Membresía",
+  "Plugins": "Complementos",
+  "Plugin Store": "Tienda de Complementos",
+  "Settings": "Configuraciones"
 }
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
@@ -47,5 +47,19 @@
   "startDate": "开始日期",
   "endDate": "结束日期",
   "startTime": "开始时间",
-  "endTime": "时间结束"
+  "endTime": "时间结束",
+  "My Organizations": "我的组织",
+  "Dashboard": "仪表板",
+  "People": "人们",
+  "Events": "事件",
+  "Venues": "场地",
+  "Action Items": "行动项目",
+  "Posts": "帖子",
+  "Block/Unblock": "封锁/解除封锁",
+  "Advertisement": "广告",
+  "Funds": "资金",
+  "Membership Requests": "会员请求",
+  "Plugins": "插件",
+  "Plugin Store": "插件商店",
+  "Settings": "设置"
 }
diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.test.tsx b/src/components/CollapsibleDropdown/CollapsibleDropdown.test.tsx
@@ -4,6 +4,10 @@ import { BrowserRouter } from 'react-router-dom';
 
 import CollapsibleDropdown from './CollapsibleDropdown';
 import type { InterfaceCollapsibleDropdown } from './CollapsibleDropdown';
+import { store } from 'state/store';
+import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -41,7 +45,11 @@ describe('Testing CollapsibleDropdown component', () => {
   test('Component should be rendered properly', () => {
     render(
       <BrowserRouter>
-        <CollapsibleDropdown {...props} />
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <CollapsibleDropdown {...props} />
+          </I18nextProvider>
+        </Provider>
       </BrowserRouter>,
     );
     expect(screen.getByText('DropDown Category')).toBeInTheDocument();
@@ -52,7 +60,11 @@ describe('Testing CollapsibleDropdown component', () => {
   test('Dropdown should be rendered and functioning correctly', () => {
     render(
       <BrowserRouter>
-        <CollapsibleDropdown {...props} />
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <CollapsibleDropdown {...props} />
+          </I18nextProvider>
+        </Provider>
       </BrowserRouter>,
     );
     const parentDropdownBtn = screen.getByTestId('collapsible-dropdown');

diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx b/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
@@ -4,6 +4,7 @@ import type { TargetsType } from 'state/reducers/routesReducer';
 import styles from './CollapsibleDropdown.module.css';
 import IconComponent from 'components/IconComponent/IconComponent';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 export interface InterfaceCollapsibleDropdown {
   showDropdown: boolean;
@@ -16,6 +17,7 @@ const collapsibleDropdown = ({
   showDropdown,
   setShowDropdown,
 }: InterfaceCollapsibleDropdown): JSX.Element => {
+  const { t: tCommon } = useTranslation('common');
   const { name, subTargets } = target;
   const navigate = useNavigate();
   const location = useLocation();
@@ -42,7 +44,7 @@ const collapsibleDropdown = ({
             fill={showDropdown ? 'var(--bs-white)' : 'var(--bs-secondary)'}
           />
         </div>
-        {name}
+        {tCommon(name)}
         <i
           className={`ms-auto fa  
           ${showDropdown ? 'var(--bs-white)' : 'var(--bs-secondary)'} 
@@ -72,7 +74,7 @@ const collapsibleDropdown = ({
                       <div className={styles.iconWrapperSm}>
                         <i className={`fa ${stringIcon}`} />
                       </div>
-                      {name}
+                      {tCommon(name || '')}
                       <div className="ms-auto">
                         <i
                           className={`fa me-2 fa-chevron-right ${

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -151,7 +151,7 @@ const leftDrawerOrg = ({
                         }
                       />
                     </div>
-                    {name}
+                    {tCommon(name)}
                   </Button>
                 )}
               </NavLink>