vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-10 17:33:24 +01: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>
<meta charset="utf-8" />
<link rel="icon" href="<%=PUBLIC_URL%>/favicon.ico" />
<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 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" />
<meta name="viewport" content="width=device-width" />
<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 [appi18n, setAppi18n] = useState<AppI18n>(new AppI18n('es'));
const locale = appi18n.getLocale();
const appi18n = new AppI18n();
const locale = appi18n.getBrowserLocale();
return locale.message ? (
<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 {
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 => {

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

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

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

@ -80,7 +80,7 @@
"action.new": [
{
"type": 0,
"value": "New Map"
"value": "New Map German"
}
],
"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 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,7 +108,12 @@ const MapsPage = () => {
}))
// Configure using user settings ...
const appi18n = new AppI18n();
const userLocale = appi18n.getUserLocale();
return (
<IntlProvider locale={userLocale.code} defaultLocale={Locales.EN.code} messages={userLocale.message} >
<div className={classes.root}>
<ClientHealthSentinel />
<AppBar
@ -195,6 +201,7 @@ const MapsPage = () => {
<MapsList filter={filter} />
</main>
</div>
</IntlProvider>
);
}