fixed empty non-en categories

packages/client/src/pages/FormGallery/Filter/CategoryFilter/index.js

@@ -19,7 +19,13 @@ import { getOformCategoryTitle } from "@docspace/client/src/helpers/utils";
 
 const CategoryFilter = ({
   t,
+
   currentCategory,
+
+  fetchCategoriesByBranch,
+  fetchCategoriesByType,
+  fetchPopularCategories,
+
   oformsFilter,
   filterOformsByCategory,
 }) => {
@@ -51,19 +57,19 @@ const CategoryFilter = ({
   const [formsByCompilation, setFormsByCompilation] = useState([]);
   useEffect(() => {
     (async () => {
-      const branchData = await getCategoriesByBranch();
+      const branchData = await fetchCategoriesByBranch();
       setFormsByBranch(branchData);
-      const typeData = await getCategoriesByType();
+      const typeData = await fetchCategoriesByType();
       setFormsByType(typeData);
-      const compilationData = await getPopularCategories();
+      const compilationData = await fetchPopularCategories();
       setFormsByCompilation(compilationData);
     })();
-  }, []);
+  }, [oformsFilter.locale]);
 
   return (
     <Styled.CategoryFilter isOpen={isOpen}>
       <div className="combobox" onClick={toggleDropdownIsOpen}>
-        <Text className="combobox-text" noSelect>
+        <Text truncate className="combobox-text" noSelect>
           {getOformCategoryTitle(oformsFilter.categorizeBy, currentCategory) ||
             t("FormGallery:Categories")}
         </Text>
@@ -140,6 +146,10 @@ const CategoryFilter = ({
 export default inject(({ oformsStore }) => ({
   currentCategory: oformsStore.currentCategory,
 
+  fetchCategoriesByBranch: oformsStore.fetchCategoriesByBranch,
+  fetchCategoriesByType: oformsStore.fetchCategoriesByType,
+  fetchPopularCategories: oformsStore.fetchPopularCategories,
+
   oformsFilter: oformsStore.oformsFilter,
   filterOformsByCategory: oformsStore.filterOformsByCategory,
 }))(withTranslation(["FormGallery"])(CategoryFilter));

packages/client/src/store/OformsStore.js

@@ -4,7 +4,12 @@ import { OformCategoryType } from "@docspace/client/src/helpers/constants";
 
 const { OformsFilter } = api;
 
-import { getCategoryById } from "@docspace/common/api/oforms";
+import {
+  getCategoryById,
+  getCategoriesByBranch,
+  getCategoriesByType,
+  getPopularCategories,
+} from "@docspace/common/api/oforms";
 
 class OformsStore {
   authStore;
@@ -79,6 +84,24 @@ class OformsStore {
     });
   };
 
+  fetchCategoriesByBranch = async () => {
+    const { locale } = this.oformsFilter;
+    const categoriesByBranch = await getCategoriesByBranch(locale);
+    return categoriesByBranch;
+  };
+
+  fetchCategoriesByType = async () => {
+    const { locale } = this.oformsFilter;
+    const categoriesByType = await getCategoriesByType(locale);
+    return categoriesByType;
+  };
+
+  fetchPopularCategories = async () => {
+    const { locale } = this.oformsFilter;
+    const popularCategories = await getPopularCategories(locale);
+    return popularCategories;
+  };
+
   filterOformsByCategory = (categorizeBy, categoryId) => {
     this.oformsFilter.page = 1;
     this.oformsFilter.categorizeBy = categorizeBy;

packages/common/api/oforms/index.js

@@ -9,24 +9,24 @@ export const getCategoryById = async (categorizeBy, id) => {
   });
 };
 
-export const getCategoriesByBranch = async () => {
-  const options = { method: "get", url: `/categories` };
+export const getCategoriesByBranch = async (locale = "en") => {
+  const options = { method: "get", url: `/categories?locale=${locale}` };
   return request(options).then((res) => {
     console.log(res);
     return res;
   });
 };
 
-export const getCategoriesByType = async () => {
-  const options = { method: "get", url: `/types` };
+export const getCategoriesByType = async (locale = "en") => {
+  const options = { method: "get", url: `/types?locale=${locale}` };
   return request(options).then((res) => {
     console.log(res);
     return res;
   });
 };
 
-export const getPopularCategories = async () => {
-  const options = { method: "get", url: `/compilations` };
+export const getPopularCategories = async (locale = "en") => {
+  const options = { method: "get", url: `/compilations?locale=${locale}` };
   return request(options).then((res) => {
     console.log(res);
     return res;