aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-09-02 23:00:37 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-09-02 23:00:37 -0700
commit26f4e5835d5fb2f0b5035837e2e90ef012b242f0 (patch)
treed923e21567684dea67c7c89557fefcf684b292d8
parent10cc10e0e88569cc48d86e9ab4d90538683bfaf6 (diff)
downloadtrackermap-web-26f4e5835d5fb2f0b5035837e2e90ef012b242f0.tar.gz
trackermap-web-26f4e5835d5fb2f0b5035837e2e90ef012b242f0.tar.bz2
trackermap-web-26f4e5835d5fb2f0b5035837e2e90ef012b242f0.zip
Reimplement localization provider
-rw-r--r--modern/src/LocalizationProvider.js91
-rw-r--r--modern/src/common/usePersistedState.js15
2 files changed, 59 insertions, 47 deletions
diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js
index fa1781b8..84419683 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/LocalizationProvider.js
@@ -1,4 +1,5 @@
-import React, { useState, createContext, useContext } from "react";
+import React, { createContext, useContext } from 'react';
+import usePersistedState from './common/usePersistedState';
import af from '../../web/l10n/af.json';
import ar from '../../web/l10n/ar.json';
@@ -55,7 +56,7 @@ import vi from '../../web/l10n/vi.json';
import zh from '../../web/l10n/zh.json';
import zh_TW from '../../web/l10n/zh_TW.json';
-const supportedLanguages = {
+const languages = {
af: { data: af, name: 'Afrikaans' },
ar: { data: ar, name: 'العربية' },
az: { data: az, name: 'Azərbaycanca' },
@@ -112,59 +113,55 @@ const supportedLanguages = {
zh_TW: { data: zh_TW, name: '中文 (Taiwan)' },
};
-const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
-const languages = localStorage.getItem('language') ? [localStorage.getItem('language')] : (window.navigator.languages !== undefined ? window.navigator.languages.slice() : []);
-let language = localStorage.getItem('language') || window.navigator.userLanguage || window.navigator.language;
-languages.push(language);
-languages.push(language.substring(0, 2));
-languages.push('en');
-for (let i = 0; i < languages.length; i++) {
- language = languages[i].replace('-', '_');
- if (language in supportedLanguages) {
- break;
- }
- if (language.length > 2) {
- language = languages[i].substring(0, 2);
- if (language in supportedLanguages) {
- break;
- }
- }
-}
-
-let selectedLanguage = supportedLanguages[language];
+//const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
-export const findStringKeys = (predicate) => {
- return Object.keys(selectedLanguage.data).filter(predicate);
-}
+const getDefaultLanguage = () => {
+ const browserLanguages = window.navigator.languages ? window.navigator.languages.slice() : [];
+ const browserLanguage = window.navigator.userLanguage || window.navigator.language;
+ browserLanguages.push(browserLanguage);
+ browserLanguages.push(browserLanguage.substring(0, 2));
+ browserLanguages.push('en');
-export default key => {
- return selectedLanguage.data[key];
+ for (let i = 0; i < browserLanguages.length; i++) {
+ let language = browserLanguages[i].replace('-', '_');
+ if (language in languages) {
+ return language;
+ }
+ if (language.length > 2) {
+ language = language.substring(0, 2);
+ if (language in languages) {
+ return language;
+ }
+ }
+ }
};
-const setSelectedLanguage = (language) => {
- selectedLanguage = supportedLanguages[language];
- localStorage.setItem('language', language);
-}
-
-const defaultLanguage = language;
-
const LocalizationContext = createContext({
- language
+ languages,
+ language: 'en',
+ setLanguage: () => {},
});
-export function LocalizationProvider(props) {
- const [language, setLanguage] = useState(defaultLanguage);
-
- const handleLanguageChange = (nextLanguage) => {
- setSelectedLanguage(nextLanguage);
- setLanguage(nextLanguage);
- };
+export const LocalizationProvider = ({ children }) => {
+ const [language, setLanguage] = usePersistedState('language', getDefaultLanguage());
- return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList }}>
- {props.children}
- </LocalizationContext.Provider>
-}
+ return (
+ <LocalizationContext.Provider value={{ languages, language, setLanguage }}>
+ {children}
+ </LocalizationContext.Provider>
+ );
+};
export const useLocalization = () => {
return useContext(LocalizationContext);
-} \ No newline at end of file
+};
+
+export const useTranslation = () => {
+ const context = useContext(LocalizationContext);
+ return (key) => context.languages[context.language].data[key];
+};
+
+export const useTranslationKeys = (predicate) => {
+ const context = useContext(LocalizationContext);
+ return Object.keys(context.languages[context.language].data).filter(predicate);
+};
diff --git a/modern/src/common/usePersistedState.js b/modern/src/common/usePersistedState.js
new file mode 100644
index 00000000..0a6627c6
--- /dev/null
+++ b/modern/src/common/usePersistedState.js
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export default usePersistedState = (key, defaultValue) => {
+
+ const [value, setValue] = useState(() => {
+ const stickyValue = window.localStorage.getItem(key);
+ return stickyValue ? JSON.parse(stickyValue) : defaultValue;
+ });
+
+ React.useEffect(() => {
+ window.localStorage.setItem(key, JSON.stringify(value));
+ }, [key, value]);
+
+ return [value, setValue];
+};