Skip to content

Commit 105e5f2

Browse files
Imiss-U1025Imiss-U1025
committed
save language to localstorage
1 parent 463fd46 commit 105e5f2

File tree

7 files changed

+77
-24
lines changed

7 files changed

+77
-24
lines changed

‎client/packages/lowcoder/src/app.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,9 +149,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
149149
}
150150
}
151151

152-
// persisting the language in local storage
153-
localStorage.setItem('lowcoder_uiLanguage', this.props.uiLanguage);
154-
155152
return (
156153
<Wrapper language={this.props.uiLanguage}>
157154
<Helmet>

‎client/packages/lowcoder/src/i18n/index.tsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { I18nObjects } from "./locales/types";
44
import {initlanguageMeta, languagesMetadata} from "./languagesMeta";
55
import { ReactNode } from "react";
66
import { getLanguage } from "util/editor"
7+
import {getLanguageJson, getLanguageObjJson, setLanguageJson, setLanguageObjJson} from "@lowcoder-ee/util/language";
78

89
type transType = (key: any, variables?: any) => string;
910
type transToNodeType = (key: any, variables?: any) => ReactNode;
@@ -12,14 +13,24 @@ let trans: transType;
1213
let transToNode: transToNodeType;
1314
let language: string = getLanguage();
1415
export let languageList: any[];
15-
1616
export let i18nObjs : I18nObjects;
17+
let langJson : object;
18+
1719
export const initTranslator = async (langs? : string) => {
1820
const lang = langs || language;
1921
const objFileName = (REACT_APP_LANGUAGES || language) + "Obj";
20-
let langJson = await (localeData as any)[lang]()
21-
let langObjJson = await (localeData as any)[objFileName]()
22-
langJson = {[lang]: langJson, [(REACT_APP_LANGUAGES || language) + "Obj"]: langObjJson}
22+
if (!getLanguageJson(lang)) {
23+
langJson = await (localeData as any)[lang]();
24+
let langObjJson = await (localeData as any)[objFileName]();
25+
setLanguageJson(lang, { [lang] : langJson });
26+
setLanguageObjJson(objFileName, { [objFileName]: langObjJson });
27+
langJson = {[lang]: langJson, [objFileName]: langObjJson}
28+
}
29+
else {
30+
const langJson2 = getLanguageJson(lang);
31+
const langObjJson = getLanguageObjJson(objFileName);
32+
langJson = {[lang]: langJson2, [objFileName]: langObjJson}
33+
}
2334
await initlanguageMeta();
2435
i18nObjs = getI18nObjects<I18nObjects>(langJson, REACT_APP_LANGUAGES || language);
2536
languageList = Object.keys(languagesMetadata).map(code => ({
@@ -34,8 +45,8 @@ export const initTranslator = async (langs? : string) => {
3445
);
3546

3647
language = translator.language;
37-
transToNode = (key: any, variables?: any) => translator.transToNode?.(key, variables);
38-
trans = (key: any, variables?: any) => translator.trans?.(key, variables);
48+
transToNode = (key: any, variables?: any) => translator.transToNode?.(key as never, variables);
49+
trans = (key: any, variables?: any) => translator.trans?.(key as never, variables);
3950
}
4051

4152
export { language, trans, transToNode };

‎client/packages/lowcoder/src/i18n/locales/index.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { isEditor } from "util/editor"
2-
export const en = async ():Promise<object> => await import(isEditor() === "edit" ? "./enEditor" : isEditor() === "view" ? "./enViewer" : "./en").then(module => module.en);
3-
export const de = async ():Promise<object> => await import(isEditor() === "edit" ? "./deEditor" : isEditor() === "view" ? "./deViewer" : "./de").then(module => module.de);
4-
export const it = async ():Promise<object> => await import(isEditor() === "edit" ? "./itEditor" : isEditor() === "view" ? "./itViewer" : "./it").then(module => module.it);
5-
export const pt = async ():Promise<object> => await import(isEditor() === "edit" ? "./ptEditor" : isEditor() === "view" ? "./ptViewer" : "./pt").then(module => module.pt);
6-
export const es = async ():Promise<object> => await import(isEditor() === "edit" ? "./esEditor" : isEditor() === "view" ? "./esViewer" : "./es").then(module => module.es);
7-
export const zh = async ():Promise<object> => await import(isEditor() === "edit" ? "./zhEditor" : isEditor() === "view" ? "./zhViewer" : "./zh").then(module => module.zh);
8-
export const ru = async ():Promise<object> => await import(isEditor() === "edit" ? "./ruEditor" : isEditor() === "view" ? "./ruViewer" : "./ru").then(module => module.ru);
1+
import { viewMode } from "util/editor"
2+
export const en = async ():Promise<object> => await import(viewMode() === "edit" ? "./enEditor" : viewMode() === "view" ? "./enViewer" : "./en").then(module => module.en);
3+
export const de = async ():Promise<object> => await import(viewMode() === "edit" ? "./deEditor" : viewMode() === "view" ? "./deViewer" : "./de").then(module => module.de);
4+
export const it = async ():Promise<object> => await import(viewMode() === "edit" ? "./itEditor" : viewMode() === "view" ? "./itViewer" : "./it").then(module => module.it);
5+
export const pt = async ():Promise<object> => await import(viewMode() === "edit" ? "./ptEditor" : viewMode() === "view" ? "./ptViewer" : "./pt").then(module => module.pt);
6+
export const es = async ():Promise<object> => await import(viewMode() === "edit" ? "./esEditor" : viewMode() === "view" ? "./esViewer" : "./es").then(module => module.es);
7+
export const zh = async ():Promise<object> => await import(viewMode() === "edit" ? "./zhEditor" : viewMode() === "view" ? "./zhViewer" : "./zh").then(module => module.zh);
8+
export const ru = async ():Promise<object> => await import(viewMode() === "edit" ? "./ruEditor" : viewMode() === "view" ? "./ruViewer" : "./ru").then(module => module.ru);
99

1010

1111
export const enObj = async ():Promise<object> => await import("./enObj").then(module => (module.enObj));

‎client/packages/lowcoder/src/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import "./index.less";
1111
import log from "loglevel";
1212
import "antd-mobile/es/global";
1313
import 'animate.css';
14-
import {initTranslator as tran1} from "i18n/design";
15-
import {initTranslator as tran2} from "i18n";
14+
import {initTranslator as initTranslatorDesign} from "i18n/design";
15+
import {initTranslator as initTranslator} from "i18n";
1616

1717

1818
window.numbro = numbro;
@@ -40,8 +40,8 @@ debug(`REACT_APP_API_SERVICE_URL:, ${REACT_APP_API_SERVICE_URL}`);
4040
debug(`REACT_APP_NODE_SERVICE_URL:, ${REACT_APP_NODE_SERVICE_URL}`);
4141
debug(`REACT_APP_ENV:, ${REACT_APP_ENV}`);
4242
debug(`REACT_APP_LOG_LEVEL:, ${REACT_APP_LOG_LEVEL}`);
43-
tran1().then(() => {
44-
tran2().then(async () => {
43+
initTranslatorDesign().then(() => {
44+
initTranslator().then(async () => {
4545
try {
4646
const bootstrap = await import("./app").then(module => module.bootstrap);
4747
bootstrap();

‎client/packages/lowcoder/src/redux/sagas/userSagas.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,14 @@ export function* getCurrentUserSaga() {
8888
try {
8989
const response: AxiosResponse<GetCurrentUserResponse> = yield call(UserApi.getCurrentUser);
9090
if (validateResponse(response)) {
91+
localStorage.setItem('lowcoder_uiLanguage', response.data.data.uiLanguage);
9192
yield put({
9293
type: ReduxActionTypes.FETCH_CURRENT_USER_SUCCESS,
9394
payload: response.data.data,
9495
});
9596

96-
initTranslator(getLanguage());
97+
// persisting the language in local storage
98+
initTranslator(response.data.data.uiLanguage);
9799

98100
}
99101
} catch (error: any) {

‎client/packages/lowcoder/src/util/editor.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
export const isEditor = () => window.location.href.includes("edit") ? "edit" : window.location.href.includes("view") ? "view" : "admin"
2-
export const getLanguage = () => localStorage.getItem('lowcoder_uiLanguage') || 'en'
1+
export const viewMode = () => window.location.href.includes("edit") ? "edit" : window.location.href.includes("view") ? "view" : "admin"
2+
export const getLanguage = (): string => {
3+
return localStorage.getItem('lowcoder_uiLanguage') || 'en';
4+
}

‎client/packages/lowcoder/src/util/language.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {viewMode} from "@lowcoder-ee/util/editor";
2+
3+
interface LangJsonType {
4+
[key: string]: any;
5+
}
6+
7+
export const setLanguageJson = (lang : string, langObj: any) => {
8+
localStorage.setItem(`lowcoder_language_json_${lang}_${viewMode()}`, JSON.stringify(langObj));
9+
}
10+
11+
export const setLanguageObjJson = (lang : string, langObj: any) => {
12+
localStorage.setItem(`lowcoder_language_obj_json_${lang}_${viewMode()}`, JSON.stringify(langObj));
13+
}
14+
15+
export const getLanguageJson = (lang: string): LangJsonType | null => {
16+
const item = localStorage.getItem(`lowcoder_language_json_${lang}_${viewMode()}`);
17+
18+
// Check if the item is null
19+
if (item === null) {
20+
return null;
21+
}
22+
try {
23+
return JSON.parse(item)[lang];
24+
} catch {
25+
throw new Error("Stored data is not a valid JSON object");
26+
}
27+
};
28+
29+
export const getLanguageObjJson = (lang: string): LangJsonType | null => {
30+
const item = localStorage.getItem(`lowcoder_language_obj_json_${lang}_${viewMode()}`);
31+
32+
// Check if the item is null
33+
if (item === null) {
34+
return null;
35+
}
36+
try {
37+
return JSON.parse(item)[lang];
38+
} catch {
39+
throw new Error("Stored data is not a valid JSON object");
40+
}
41+
};

0 commit comments

Comments
 (0)