diff --git a/packages/client/src/components/NavMenu/sub-components/header-unauth.js b/packages/client/src/components/NavMenu/sub-components/header-unauth.js
index 807bfa8c57..61c69e37f6 100644
--- a/packages/client/src/components/NavMenu/sub-components/header-unauth.js
+++ b/packages/client/src/components/NavMenu/sub-components/header-unauth.js
@@ -99,9 +99,11 @@ const HeaderUnAuth = ({
const currentCultureName = i18n.language;
const onSelect = (culture) => {
- i18n.changeLanguage(culture);
+ const { key } = culture;
- setCookie(LANGUAGE, culture, {
+ i18n.changeLanguage(key);
+
+ setCookie(LANGUAGE, key, {
"max-age": COOKIE_EXPIRATION_YEAR,
});
diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js
index d59243b785..036797949a 100644
--- a/packages/client/src/pages/Confirm/sub-components/createUser.js
+++ b/packages/client/src/pages/Confirm/sub-components/createUser.js
@@ -478,9 +478,11 @@ const CreateUserForm = (props) => {
: {};
const onSelect = (culture) => {
- i18n.changeLanguage(culture);
+ const { key } = culture;
- setCookie(LANGUAGE, culture, {
+ i18n.changeLanguage(key);
+
+ setCookie(LANGUAGE, key, {
"max-age": COOKIE_EXPIRATION_YEAR,
});
diff --git a/packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js b/packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js
index aa4ec8b717..83c0645142 100644
--- a/packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js
+++ b/packages/client/src/pages/FormGallery/Filter/LanguageFilter/index.js
@@ -31,10 +31,28 @@ import { inject, observer } from "mobx-react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import { LanguageCombobox } from "@docspace/shared/components/language-combobox";
+
+const keyedCollections = {
+ ar: "ar-SA",
+ en: "en-US",
+ el: "el-GR",
+ hy: "hy-AM",
+ ko: "ko-KR",
+ lo: "lo-LA",
+ pt: "pt-BR",
+ uk: "uk-UA",
+ ja: "ja-JP",
+ zh: "zh-CN",
+};
+
+const convertToCulture = (key) => {
+ return keyedCollections[key] ?? key;
+};
+
+const getOformLocaleByIndex = (index, array) => {
+ return array[index];
+};
const LanguageFilter = ({
- t,
- oformsFilter,
- defaultOformLocale,
oformLocales,
filterOformsByLocale,
filterOformsByLocaleIsLoading,
@@ -42,9 +60,14 @@ const LanguageFilter = ({
categoryFilterLoaded,
languageFilterLoaded,
oformFilesLoaded,
+ oformsCurrentLocal,
}) => {
+ const convertedLocales = oformLocales.map((item) => convertToCulture(item));
+
const onFilterByLocale = async (newLocale) => {
- await filterOformsByLocale(newLocale);
+ const key = getOformLocaleByIndex(newLocale.index, oformLocales);
+
+ await filterOformsByLocale(key);
const [sectionScroll] = document.getElementsByClassName("section-scroll");
sectionScroll.scrollTop = 0;
@@ -62,18 +85,16 @@ const LanguageFilter = ({
return (
);
};
export default inject(({ oformsStore }) => ({
- oformsFilter: oformsStore.oformsFilter,
- defaultOformLocale: oformsStore.defaultOformLocale,
oformLocales: oformsStore.oformLocales,
filterOformsByLocale: oformsStore.filterOformsByLocale,
filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
@@ -81,4 +102,5 @@ export default inject(({ oformsStore }) => ({
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
languageFilterLoaded: oformsStore.languageFilterLoaded,
oformFilesLoaded: oformsStore.oformFilesLoaded,
+ oformsCurrentLocal: oformsStore.oformsCurrentLocal,
}))(withTranslation(["Common"])(observer(LanguageFilter)));
diff --git a/packages/client/src/store/OformsStore.js b/packages/client/src/store/OformsStore.js
index da7a109a99..7b6bf6256d 100644
--- a/packages/client/src/store/OformsStore.js
+++ b/packages/client/src/store/OformsStore.js
@@ -41,14 +41,10 @@ import {
} from "@docspace/shared/api/oforms";
import { toastr } from "@docspace/shared/components/toast";
-import {
- convertToCulture,
- convertToLanguage,
-} from "@docspace/shared/utils/common";
+import { convertToLanguage } from "@docspace/shared/utils/common";
import { LANGUAGE } from "@docspace/shared/constants";
import { getCookie } from "@docspace/shared/utils/cookie";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
-import { flagsIcons } from "@docspace/shared/utils/image-flags";
const myDocumentsFolderId = 2;
@@ -115,11 +111,7 @@ class OformsStore {
this.infoPanelStore.setInfoPanelSelection(gallerySelected);
};
- setOformLocales = (oformLocales) => {
- const convertedLocales = oformLocales.map((item) => convertToCulture(item));
-
- this.oformLocales = convertedLocales;
- };
+ setOformLocales = (oformLocales) => (this.oformLocales = oformLocales);
setFilterOformsByLocaleIsLoading = (filterOformsByLocaleIsLoading) => {
this.filterOformsByLocaleIsLoading = filterOformsByLocaleIsLoading;
@@ -385,6 +377,10 @@ class OformsStore {
get hasMoreForms() {
return this.oformFiles.length < this.oformsFilterTotal;
}
+
+ get oformsCurrentLocal() {
+ return this.oformsFilter.locale;
+ }
}
export default OformsStore;
diff --git a/packages/login/src/client/components/Login.tsx b/packages/login/src/client/components/Login.tsx
index d5d9882f9c..66921d5a32 100644
--- a/packages/login/src/client/components/Login.tsx
+++ b/packages/login/src/client/components/Login.tsx
@@ -146,10 +146,12 @@ const Login: React.FC = ({
cookieSettingsEnabled: false,
};
- const onLanguageSelect = (culture: string) => {
- i18n.changeLanguage(culture);
+ const onLanguageSelect = (culture: { key: string }) => {
+ const { key } = culture;
- setCookie(LANGUAGE, culture, {
+ i18n.changeLanguage(key);
+
+ setCookie(LANGUAGE, key, {
"max-age": COOKIE_EXPIRATION_YEAR,
});
};
diff --git a/packages/shared/components/language-combobox/LanguageCombobox.tsx b/packages/shared/components/language-combobox/LanguageCombobox.tsx
index d28752d0fe..41d7a1f548 100644
--- a/packages/shared/components/language-combobox/LanguageCombobox.tsx
+++ b/packages/shared/components/language-combobox/LanguageCombobox.tsx
@@ -57,7 +57,7 @@ const LanguageCombobox = (props: ComboboxProps) => {
const onSelect = (culture: TCulture) => {
if (culture.key === selectedCulture) return;
- onSelectLanguage(culture.key);
+ onSelectLanguage(culture);
};
if (!currentCulture) return <>;
diff --git a/packages/shared/components/language-combobox/LanguageCombobox.types.ts b/packages/shared/components/language-combobox/LanguageCombobox.types.ts
index 77b3451bab..a1844b8dcb 100644
--- a/packages/shared/components/language-combobox/LanguageCombobox.types.ts
+++ b/packages/shared/components/language-combobox/LanguageCombobox.types.ts
@@ -28,13 +28,14 @@ export type TCulture = {
key: string;
icon: string;
label?: string;
+ index?: number;
};
export type TCultures = TCulture[];
export interface ComboboxProps {
selectedCulture: string;
cultures: string[];
- onSelectLanguage: (culture: string) => void;
+ onSelectLanguage: (culture: TCulture) => void;
/** Accepts id */
id?: string;
/** Accepts class */
diff --git a/packages/shared/utils/common.ts b/packages/shared/utils/common.ts
index 8c2c6d3185..099b7ea922 100644
--- a/packages/shared/utils/common.ts
+++ b/packages/shared/utils/common.ts
@@ -481,33 +481,6 @@ export function convertLanguage(key: string) {
}
}
-export function convertToCulture(key: string) {
- switch (key) {
- case "ar":
- return "ar-SA";
- case "en":
- return "en-US";
- case "el":
- return "el-GR";
- case "hy":
- return "hy-AM";
- case "ko":
- return "ko-KR";
- case "lo":
- return "lo-LA";
- case "pt":
- return "pt-BR";
- case "uk":
- return "uk-UA";
- case "ja":
- return "ja-JP";
- case "zh":
- return "zh-CN";
- default:
- return key;
- }
-}
-
export function convertToLanguage(key: string) {
if (!key) return;
@@ -1052,20 +1025,22 @@ export const mapCulturesToArray = (
) => {
if (i18nArg) {
const t = i18nArg.getFixedT(null, "Common");
- return culturesArg.map((culture) => {
+ return culturesArg.map((culture, index) => {
return {
key: culture,
label: t(`Culture_${culture}`),
icon: flagsIcons?.get(`${culture}.react.svg`),
...(isBetaBadge && { isBeta: isBetaLanguage(culture) }),
+ index,
};
});
}
- return culturesArg.map((culture) => {
+ return culturesArg.map((culture, index) => {
return {
key: culture,
icon: flagsIcons?.get(`${culture}.react.svg`),
+ index,
};
});
};