admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BOD-38 Added Browser Detection for i18n. Uses local storage to store user language preferences.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-20 15:45:09 -07:00
parent b3eb6fe91d
commit 64f3f727e4
5 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@@ -19,6 +19,7 @@
"firebase": "^7.13.1", "firebase": "^7.13.1",
"graphql": "^14.6.0", "graphql": "^14.6.0",
"i18next": "^19.3.4", "i18next": "^19.3.4",
"i18next-browser-languagedetector": "^4.1.1",
"node-sass": "^4.13.1", "node-sass": "^4.13.1",
"query-string": "^6.11.1", "query-string": "^6.11.1",
"react": "^16.13.1", "react": "^16.13.1",

12
client/src/components/header/header.component.jsx
View File

@@ -90,13 +90,13 @@ function Header({
</span> </span>
} }
> >
<Menu.Item actiontype="lang-select" key="en_us"> <Menu.Item actiontype="lang-select" key="en-US">
{t("general.languages.english")} {t("general.languages.english")}
</Menu.Item> </Menu.Item>
<Menu.Item actiontype="lang-select" key="fr"> <Menu.Item actiontype="lang-select" key="fr-CA">
{t("general.languages.french")} {t("general.languages.french")}
</Menu.Item> </Menu.Item>
<Menu.Item actiontype="lang-select" key="es"> <Menu.Item actiontype="lang-select" key="es-MX">
{t("general.languages.spanish")} {t("general.languages.spanish")}
</Menu.Item> </Menu.Item>
</Menu.SubMenu> </Menu.SubMenu>
@@ -259,13 +259,13 @@ function Header({
</span> </span>
} }
> >
<Menu.Item actiontype="lang-select" key="en_us"> <Menu.Item actiontype="lang-select" key="en-US">
{t("general.languages.english")} {t("general.languages.english")}
</Menu.Item> </Menu.Item>
<Menu.Item actiontype="lang-select" key="fr"> <Menu.Item actiontype="lang-select" key="fr-CA">
{t("general.languages.french")} {t("general.languages.french")}
</Menu.Item> </Menu.Item>
<Menu.Item actiontype="lang-select" key="es"> <Menu.Item actiontype="lang-select" key="es-MX">
{t("general.languages.spanish")} {t("general.languages.spanish")}
</Menu.Item> </Menu.Item>
</Menu.SubMenu> </Menu.SubMenu>

2
client/src/redux/user/user.reducer.js
View File

@@ -3,7 +3,7 @@ import UserActionTypes from "./user.types";
const INITIAL_STATE = { const INITIAL_STATE = {
currentUser: { currentUser: {
authorized: null, authorized: null,
language: "en_us" //language: "en-US"
}, },
bodyshop: null, bodyshop: null,
error: null error: null

19
client/src/translations/i18n.js
View File

@@ -1,5 +1,6 @@
import i18n from "i18next"; import i18n from "i18next";
import { initReactI18next } from "react-i18next"; import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import en_Translation from "./en_us/common.json"; import en_Translation from "./en_us/common.json";
import fr_Translation from "./fr/common.json"; import fr_Translation from "./fr/common.json";
import es_Translation from "./es/common.json"; import es_Translation from "./es/common.json";
@@ -7,23 +8,25 @@ import es_Translation from "./es/common.json";
// the translations // the translations
// (tip move them in a JSON file and import them) // (tip move them in a JSON file and import them)
const resources = { const resources = {
en_us: en_Translation, "en-US": en_Translation,
fr: fr_Translation, "fr-CA": fr_Translation,
es: es_Translation "es-MX": es_Translation,
}; };
i18n i18n
.use(initReactI18next) // passes i18n down to react-i18next .use(initReactI18next)
.use(LanguageDetector) // passes i18n down to react-i18next
.init({ .init({
resources, resources,
lng: "en_us", //lng: "en",
fallbackLng: "en-us", detection: {},
fallbackLng: "en-US",
debug: true, debug: true,
//keySeparator: false, // we do not use keys in form messages.welcome //keySeparator: false, // we do not use keys in form messages.welcome
interpolation: { interpolation: {
escapeValue: false // react already safes from xss escapeValue: false, // react already safes from xss
} },
}); });
export default i18n; export default i18n;

7
client/yarn.lock
View File

@@ -6670,6 +6670,13 @@ hyphenate-style-name@^1.0.1:
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
i18next-browser-languagedetector@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.1.1.tgz#89656cd9b78bb92dc0c7e86c0d9606f3f15fabfa"
integrity sha512-akv0zurR/2KU7s1qaWkirY9FEEOT1TNsQaezEg8+1BLLQre7vylqb7tYoUgYqP/0/BEzXJgnoQnj+sh5xYFMhg==
dependencies:
"@babel/runtime" "^7.5.5"
i18next@^19.3.4: i18next@^19.3.4:
version "19.3.4" version "19.3.4"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.3.4.tgz#512de50ee6075df825c646e1ce646a104f0938c9" resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.3.4.tgz#512de50ee6075df825c646e1ce646a104f0938c9"