fixed category filtering bug

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

@@ -88,7 +88,7 @@ const CategoryFilterDesktop = ({
         }
       />
 
-      {menuItems.map((item, index) => (
+      {menuItems?.map((item, index) => (
         <SubList
           categoryType={item.key}
           categories={item.categories || []}
@@ -112,4 +112,4 @@ export default inject(({ oformsStore }) => ({
 
   oformsFilter: oformsStore.oformsFilter,
   filterOformsByCategory: oformsStore.filterOformsByCategory,
-}))(withTranslation(["FormGallery"])(observer(CategoryFilterDesktop)));
+}))(withTranslation(["FormGallery"])(CategoryFilterDesktop));

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

@@ -2,21 +2,21 @@ import * as Styled from "./index.styled";
 
 import DropDownItem from "@docspace/components/drop-down-item";
 import { useState, useRef } from "react";
-import { inject } from "mobx-react";
+import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import CategorySubList from "./CategorySubList";
 import Scrollbar from "@docspace/components/scrollbar";
 import ComboButton from "@docspace/components/combobox/sub-components/combo-button";
+import { getOformCategoryTitle } from "@docspace/client/src/helpers/utils";
+import { getDefaultOformLocale } from "@docspace/common/utils";
 
 const CategoryFilterMobile = ({
   t,
 
   menuItems,
 
-  onViewAllTemplates,
+  currentCategory,
-  formsByBranch,
+  filterOformsByCategory,
-  formsByType,
-  formsByCompilation,
 
   ...rest
 }) => {
@@ -39,11 +39,15 @@ const CategoryFilterMobile = ({
   if (calculatedHeight > maxCalculatedHeight)
     calculatedHeight = maxCalculatedHeight;
 
+  const onViewAllTemplates = () => filterOformsByCategory("", "");
+
   return (
     <Styled.CategoryFilterMobileWrapper ref={wrapperRef} {...rest}>
       <ComboButton
         selectedOption={{
-          label: t("FormGallery:Categories"),
+          label:
+            getOformCategoryTitle(currentCategory, getDefaultOformLocale()) ||
+            t("FormGallery:Categories"),
         }}
         isOpen={isOpen}
         scaled={true}
@@ -103,11 +107,5 @@ const CategoryFilterMobile = ({
 
 export default inject(({ oformsStore }) => ({
   currentCategory: oformsStore.currentCategory,
-
-  fetchCategoriesByBranch: oformsStore.fetchCategoriesByBranch,
-  fetchCategoriesByType: oformsStore.fetchCategoriesByType,
-  fetchPopularCategories: oformsStore.fetchPopularCategories,
-
-  oformsFilter: oformsStore.oformsFilter,
   filterOformsByCategory: oformsStore.filterOformsByCategory,
 }))(withTranslation(["FormGallery"])(CategoryFilterMobile));

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

@@ -2,12 +2,10 @@ import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import CategoryFilterDesktop from "./DesktopView";
 import CategoryFilterMobile from "./MobileView";
-import { getOformCategoryTitle } from "@docspace/client/src/helpers/utils";
 import { smallTablet } from "@docspace/components/utils/device";
 import { isMobileOnly } from "react-device-detect";
 
 import styled, { css } from "styled-components";
-import { getDefaultOformLocale } from "@docspace/common/utils";
 
 export const StyledCategoryFilterWrapper = styled.div`
   width: 100%;
@@ -39,20 +37,14 @@ export const StyledCategoryFilterWrapper = styled.div`
   `}
 `;
 
-const categoryLocale = getDefaultOformLocale();
-
 const CategoryFilter = ({
-  currentCategory,
   oformsFilter,
-  filterOformsByCategory,
 
   fetchCategoryList,
   fetchCategories,
 }) => {
   const [menuItems, setMenuItems] = useState([]);
 
-  const onViewAllTemplates = () => filterOformsByCategory("", "");
-
   useEffect(() => {
     (async () => {
       let newMenuItems = await fetchCategoryList();
@@ -81,16 +73,11 @@ const CategoryFilter = ({
         })
         .finally(() => setMenuItems(newMenuItems));
     })();
-  }, [oformsFilter.locale]);
+  }, []);
 
   return (
     <StyledCategoryFilterWrapper className="categoryFilterWrapper">
-      <CategoryFilterMobile
+      <CategoryFilterMobile className="mobileView" menuItems={menuItems} />
-        className="mobileView"
-        currentCategoryTitle={getOformCategoryTitle(currentCategory)}
-        onViewAllTemplates={onViewAllTemplates}
-        menuItems={menuItems}
-      />
       <CategoryFilterDesktop className="desktopView" menuItems={menuItems} />
     </StyledCategoryFilterWrapper>
   );

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

@@ -30,12 +30,8 @@ const FormGallery = ({
   const [isInitLoading, setIsInitLoading] = useState(true);
 
   useEffect(() => {
-    if (
+    if (!isInitLoading && location.search !== `?${oformsFilter.toUrlParams()}`)
-      !isInitLoading &&
-      location.search !== `?${oformsFilter.toUrlParams()}`
-    ) {
       navigate(`${location.pathname}?${oformsFilter.toUrlParams()}`);
-    }
   }, [oformsFilter]);
 
   useEffect(() => {

packages/client/src/store/OformsStore.js

@@ -67,7 +67,6 @@ class OformsStore {
       filter.total = paginationData.total;
     }
 
-    console.log(oformData?.data?.data);
     runInAction(() => {
       this.setOformsFilter(filter);
       this.setOformFiles(oformData?.data?.data ?? []);
@@ -162,9 +161,7 @@ class OformsStore {
     this.oformsFilter.categoryId = categoryId;
     const newOformsFilter = this.oformsFilter.clone();
 
-    runInAction(() => {
+    runInAction(() => this.getOforms(newOformsFilter));
-      this.getOforms(newOformsFilter);
-    });
   };
 
   filterOformsByLocale = async (locale) => {