From ca833d60dea040d001ce166dd719cc7dc4a49f3c Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sun, 14 Feb 2021 17:53:37 -0800 Subject: [PATCH] Complete i18n support --- packages/webapp/public/index.html | 4 +- packages/webapp/src/app.tsx | 4 +- packages/webapp/src/classes/app-i18n/index.ts | 22 ++- .../src/classes/client/mock-client/index.ts | 1 + .../src/classes/client/rest-client/index.ts | 14 +- packages/webapp/src/compiled-lang/de.json | 2 +- .../webapp/src/components/maps-page/index.tsx | 167 +++++++++--------- 7 files changed, 116 insertions(+), 98 deletions(-) diff --git a/packages/webapp/public/index.html b/packages/webapp/public/index.html index bf5b4fe7..704338b4 100644 --- a/packages/webapp/public/index.html +++ b/packages/webapp/public/index.html @@ -5,8 +5,8 @@ - - + + diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx index 79fc75da..c7ba00be 100644 --- a/packages/webapp/src/app.tsx +++ b/packages/webapp/src/app.tsx @@ -25,8 +25,8 @@ const queryClient = new QueryClient({ }); const App = () => { - const [appi18n, setAppi18n] = useState(new AppI18n('es')); - const locale = appi18n.getLocale(); + const appi18n = new AppI18n(); + const locale = appi18n.getBrowserLocale(); return locale.message ? ( diff --git a/packages/webapp/src/classes/app-i18n/index.ts b/packages/webapp/src/classes/app-i18n/index.ts index cbc39e22..8e63fb18 100644 --- a/packages/webapp/src/classes/app-i18n/index.ts +++ b/packages/webapp/src/classes/app-i18n/index.ts @@ -1,3 +1,5 @@ +import { fetchAccount } from './../../redux/clientSlice'; + export class Locale { code: LocaleCode; label: string; @@ -11,21 +13,17 @@ export class Locale { } export default class AppI18n { - private locale: Locale = Locales.EN; - constructor(localeCode: string) { - try { - this.locale = localeFromStr(localeCode) - } catch { - this.locale = this.browserLocale(); - } + constructor() { + } - getLocale(): Locale { - return this.locale; + public getUserLocale(): Locale { + const account = fetchAccount(); + return account ? account.locale : this.getBrowserLocale(); } - private browserLocale(): Locale { + public getBrowserLocale(): Locale { let localeCode = (navigator.languages && navigator.languages[0]) || navigator.language; @@ -49,8 +47,8 @@ export const Locales = { EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')), ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')), - DE: new Locale('de', 'Français', require('./../../compiled-lang/de.json')), - FR: new Locale('fr', 'Deutsch', require('./../../compiled-lang/fr.json')), + DE: new Locale('fr', 'Français', require('./../../compiled-lang/fr.json')), + FR: new Locale('de', 'Deutsch', require('./../../compiled-lang/de.json')), } export const localeFromStr = (code: string): Locale => { diff --git a/packages/webapp/src/classes/client/mock-client/index.ts b/packages/webapp/src/classes/client/mock-client/index.ts index 6127b979..06605d3b 100644 --- a/packages/webapp/src/classes/client/mock-client/index.ts +++ b/packages/webapp/src/classes/client/mock-client/index.ts @@ -45,6 +45,7 @@ class MockClient implements Client { } fetchAccountInfo(): Promise { + console.log('Fetch account info ...') const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode; return Promise.resolve({ firstName: 'Costme', diff --git a/packages/webapp/src/classes/client/rest-client/index.ts b/packages/webapp/src/classes/client/rest-client/index.ts index 437c02c8..d261b7b3 100644 --- a/packages/webapp/src/classes/client/rest-client/index.ts +++ b/packages/webapp/src/classes/client/rest-client/index.ts @@ -12,7 +12,19 @@ export default class RestClient implements Client { } updateAccountLanguage(locale: LocaleCode): Promise { - throw "Method not implemented"; + const handler = (success: () => void, reject: (error: ErrorInfo) => void) => { + axios.put(`${this.baseUrl}/c/restful/account/locale`, + locale, + { headers: { 'Content-Type': 'text/plain' } } + ).then(() => { + // All was ok, let's sent to success page ...; + success(); + }).catch(error => { + const errorInfo = this.parseResponseOnError(error.response); + reject(errorInfo); + }); + } + return new Promise(handler); } importMap(model: ImportMapInfo): Promise { diff --git a/packages/webapp/src/compiled-lang/de.json b/packages/webapp/src/compiled-lang/de.json index ce82c52c..6d2894db 100644 --- a/packages/webapp/src/compiled-lang/de.json +++ b/packages/webapp/src/compiled-lang/de.json @@ -80,7 +80,7 @@ "action.new": [ { "type": 0, - "value": "New Map" + "value": "New Map German" } ], "action.open": [ diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx index d68f861e..127d21c7 100644 --- a/packages/webapp/src/components/maps-page/index.tsx +++ b/packages/webapp/src/components/maps-page/index.tsx @@ -22,6 +22,7 @@ import AccountMenu from './account-menu'; import ClientHealthSentinel from '../../classes/client/client-health-sentinel'; import HelpMenu from './help-menu'; import LanguageMenu from './language-menu'; +import AppI18n, { Locales } from '../../classes/app-i18n'; const logoIcon = require('../../images/logo-small.svg'); const poweredByIcon = require('../../images/pwrdby-white.svg'); @@ -107,94 +108,100 @@ const MapsPage = () => { })) + // Configure using user settings ... + const appi18n = new AppI18n(); + const userLocale = appi18n.getUserLocale(); + return ( -
- - + +
+ + - - - - + + + + - - - - setActiveDialog(undefined)} mapsId={[]} /> + + + + setActiveDialog(undefined)} mapsId={[]} /> -
- - - -
- - - + + + +
+ + + + })} + classes={{ + paper: clsx({ + [classes.drawerOpen]: open + }), + }}> -
- logo -
+
+ logo +
- - {filterButtons.map(buttonInfo => { - return () - } - )} - + + {filterButtons.map(buttonInfo => { + return () + } + )} + -
- - Powered By WiseMapping - -
- -
-
- -
-
+
+ + Powered By WiseMapping + +
+ +
+
+ +
+ + ); }