Merge pull request #11 from db1group/feature/save-localization

implements language saving in local storage
db1group · Jul 6, 2023 · d626b9c · d626b9c
2 parents 7f441a4 + 400167d
commit d626b9c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "highlight.js": "11.7.0",
     "husky": "8.0.2",
     "i18next": "22.5.1",
+    "i18next-browser-languagedetector": "7.1.0",
     "marked": "4.2.4",
     "moment": "2.29.4",
     "postcss-normalize": "10.0.1",

diff --git a/src/components/ButtonFlag/ButtonFlag.tsx b/src/components/ButtonFlag/ButtonFlag.tsx
@@ -2,7 +2,7 @@ import pt from '../../assets/pt.png';
 import en from '../../assets/en.png';
 import es from '../../assets/es.png';
 import i18n from '../../i18n';
-import { Language } from "../../model";
+import { Language, StorageKey } from "../../model";
 
 import "./buttonFlag.scss";
 
@@ -32,8 +32,9 @@ function ButtonFlag() {
           className='buttonFlag'
           src={languageOption.flag}
           alt={languageOption.name}
-          onClick={() => {
+          onClick={async () => {
             i18n.changeLanguage(languageOption.value);
+            await localStorage.setItem(StorageKey.language, languageOption.value);
           }}>          
         </img>
       ))}

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -1,12 +1,13 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import { Language } from "../model";
+import { Language, StorageKey } from "../model";
+import LanguageDetector from "i18next-browser-languagedetector";
 
 import enTranslations from './translations/en.json';
 import ptTranslations from './translations/pt.json';
 import esTranslations from './translations/es.json';
 
-i18n.use(initReactI18next).init({
+i18n.use(new LanguageDetector(null, { lookupLocalStorage: StorageKey.language })).use(initReactI18next).init({
   fallbackLng: Language.en,
   interpolation: {
     escapeValue: false,

diff --git a/src/model.ts b/src/model.ts
@@ -10,6 +10,10 @@ export enum Language {
   es = "es",
 }
 
+export enum StorageKey {
+  language = "language",
+}
+
 export type ItemAttributes = {
   name: string;
   ring: string;

diff --git a/yarn.lock b/yarn.lock
@@ -1081,7 +1081,7 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz"
   integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@@ -5782,6 +5782,13 @@ husky@8.0.2:
   resolved "https://registry.npmjs.org/husky/-/husky-8.0.2.tgz"
   integrity sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg==
 
+i18next-browser-languagedetector@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.1.0.tgz"
+  integrity sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA==
+  dependencies:
+    "@babel/runtime" "^7.19.4"
+
 "i18next@>= 19.0.0", i18next@22.5.1:
   version "22.5.1"
   resolved "https://registry.npmjs.org/i18next/-/i18next-22.5.1.tgz"