Web: Added getting indexes for the form gallery to restore supported language.

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,
     });
 

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,
     });
 

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 (
     <LanguageCombobox
-      cultures={oformLocales}
+      cultures={convertedLocales}
       isAuthenticated
       onSelectLanguage={onFilterByLocale}
-      selectedCulture={oformsFilter.locale}
+      selectedCulture={convertToCulture(oformsCurrentLocal)}
       id="comboBoxLanguage"
     />
   );
 };
 
 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)));

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;

packages/login/src/client/components/Login.tsx

@@ -146,10 +146,12 @@ const Login: React.FC<ILoginProps> = ({
     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,
     });
   };

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 <></>;

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 */

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,
     };
   });
 };