feat: Replace dictonary i18n with react-i18next (usebruno#2915)

Pragadesh-45 · Aug 26, 2024 · cf02ea2 · cf02ea2
1 parent 9343f1e
commit cf02ea2
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 101 deletions.
diff --git a/contributing.md b/contributing.md
@@ -34,6 +34,7 @@ Libraries we use
 - Schema Validation - Yup
 - Request Client - axios
 - Filesystem Watcher - chokidar
+- i18n - i18next
 
 ### Dependencies
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
@@ -37,14 +37,15 @@
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
     "httpsnippet": "^3.0.6",
+    "i18next": "^23.14.0",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
-    "jsonpath-plus": "^7.2.0",
     "jsonlint": "^1.6.3",
+    "jsonpath-plus": "^7.2.0",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
@@ -66,6 +67,7 @@
     "react-dom": "18.2.0",
     "react-github-btn": "^1.4.0",
     "react-hot-toast": "^2.4.0",
+    "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
     "react-pdf": "^7.5.1",
     "react-redux": "^7.2.6",

diff --git a/packages/bruno-app/src/components/Preferences/Support/index.js b/packages/bruno-app/src/components/Preferences/Support/index.js
@@ -1,42 +1,42 @@
 import React from 'react';
 import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord, IconBook } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
-import { useDictionary } from 'providers/Dictionary/index';
+import { useTranslation } from 'react-i18next';
 
 const Support = () => {
-  const { dictionary } = useDictionary();
+  const { t } = useTranslation();
 
   return (
     <StyledWrapper>
       <div className="rows">
         <div className="mt-2">
           <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">
             <IconBook size={18} strokeWidth={2} />
-            <span className="label ml-2">{dictionary.documentation}</span>
+            <span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>
           </a>
         </div>
         <div className="mt-2">
           <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
             <IconSpeakerphone size={18} strokeWidth={2} />
-            <span className="label ml-2">{dictionary.reportIssues}</span>
+            <span className="label ml-2">{t('COMMON.REPORT_ISSUES')}</span>
           </a>
         </div>
         <div className="mt-2">
           <a href="https://discord.com/invite/KgcZUncpjq" target="_blank" className="flex items-end">
             <IconBrandDiscord size={18} strokeWidth={2} />
-            <span className="label ml-2">{dictionary.discord}</span>
+            <span className="label ml-2">{t('COMMON.DISCORD')}</span>
           </a>
         </div>
         <div className="mt-2">
           <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
             <IconBrandGithub size={18} strokeWidth={2} />
-            <span className="label ml-2">{dictionary.gitHub}</span>
+            <span className="label ml-2">{t('COMMON.GITHUB')}</span>
           </a>
         </div>
         <div className="mt-2">
           <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-end">
             <IconBrandTwitter size={18} strokeWidth={2} />
-            <span className="label ml-2">{dictionary.twitter}</span>
+            <span className="label ml-2">{t('COMMON.TWITTER')}</span>
           </a>
         </div>
       </div>