vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-09-21 11:40:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Complete i18n support

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-14 17:53:37 -08:00
parent 77e3d24eb1
commit ca833d60de
7 changed files with 116 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webapp/public/index.html
View File

@ -5,8 +5,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="<%=PUBLIC_URL%>/favicon.ico" /> <link rel="icon" href="<%=PUBLIC_URL%>/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />

4
packages/webapp/src/app.tsx
View File

@ -25,8 +25,8 @@ const queryClient = new QueryClient({
}); });
const App = () => { const App = () => {
const [appi18n, setAppi18n] = useState<AppI18n>(new AppI18n('es')); const appi18n = new AppI18n();
const locale = appi18n.getLocale(); const locale = appi18n.getBrowserLocale();
return locale.message ? ( return locale.message ? (
<Provider store={store}> <Provider store={store}>

22
packages/webapp/src/classes/app-i18n/index.ts
View File

@ -1,3 +1,5 @@
import { fetchAccount } from './../../redux/clientSlice';
export class Locale { export class Locale {
code: LocaleCode; code: LocaleCode;
label: string; label: string;
@ -11,21 +13,17 @@ export class Locale {
} }
export default class AppI18n { export default class AppI18n {
private locale: Locale = Locales.EN;
constructor(localeCode: string) { constructor() {
try {
this.locale = localeFromStr(localeCode)
} catch {
this.locale = this.browserLocale();
}
} }
getLocale(): Locale { public getUserLocale(): Locale {
return this.locale; const account = fetchAccount();
return account ? account.locale : this.getBrowserLocale();
} }
private browserLocale(): Locale { public getBrowserLocale(): Locale {
let localeCode = (navigator.languages && navigator.languages[0]) let localeCode = (navigator.languages && navigator.languages[0])
|| navigator.language; || navigator.language;
@ -49,8 +47,8 @@ export const Locales =
{ {
EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')), EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')),
ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')), ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')),
DE: new Locale('de', 'Français', require('./../../compiled-lang/de.json')), DE: new Locale('fr', 'Français', require('./../../compiled-lang/fr.json')),
FR: new Locale('fr', 'Deutsch', require('./../../compiled-lang/fr.json')), FR: new Locale('de', 'Deutsch', require('./../../compiled-lang/de.json')),
} }
export const localeFromStr = (code: string): Locale => { export const localeFromStr = (code: string): Locale => {

1
packages/webapp/src/classes/client/mock-client/index.ts
View File

@ -45,6 +45,7 @@ class MockClient implements Client {
} }
fetchAccountInfo(): Promise<AccountInfo> { fetchAccountInfo(): Promise<AccountInfo> {
console.log('Fetch account info ...')
const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode; const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode;
return Promise.resolve({ return Promise.resolve({
firstName: 'Costme', firstName: 'Costme',

14
packages/webapp/src/classes/client/rest-client/index.ts
View File

@ -12,7 +12,19 @@ export default class RestClient implements Client {
} }
updateAccountLanguage(locale: LocaleCode): Promise<void> { updateAccountLanguage(locale: LocaleCode): Promise<void> {
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<number> { importMap(model: ImportMapInfo): Promise<number> {

2
packages/webapp/src/compiled-lang/de.json
View File

@ -80,7 +80,7 @@
"action.new": [ "action.new": [
{ {
"type": 0, "type": 0,
"value": "New Map" "value": "New Map German"
} }
], ],
"action.open": [ "action.open": [

7
packages/webapp/src/components/maps-page/index.tsx
View File

@ -22,6 +22,7 @@ import AccountMenu from './account-menu';
import ClientHealthSentinel from '../../classes/client/client-health-sentinel'; import ClientHealthSentinel from '../../classes/client/client-health-sentinel';
import HelpMenu from './help-menu'; import HelpMenu from './help-menu';
import LanguageMenu from './language-menu'; import LanguageMenu from './language-menu';
import AppI18n, { Locales } from '../../classes/app-i18n';
const logoIcon = require('../../images/logo-small.svg'); const logoIcon = require('../../images/logo-small.svg');
const poweredByIcon = require('../../images/pwrdby-white.svg'); const poweredByIcon = require('../../images/pwrdby-white.svg');
@ -107,7 +108,12 @@ const MapsPage = () => {
})) }))
// Configure using user settings ...
const appi18n = new AppI18n();
const userLocale = appi18n.getUserLocale();
return ( return (
<IntlProvider locale={userLocale.code} defaultLocale={Locales.EN.code} messages={userLocale.message} >
<div className={classes.root}> <div className={classes.root}>
<ClientHealthSentinel /> <ClientHealthSentinel />
<AppBar <AppBar
@ -195,6 +201,7 @@ const MapsPage = () => {
<MapsList filter={filter} /> <MapsList filter={filter} />
</main> </main>
</div> </div>
</IntlProvider>
); );
} }