fixed categorie filter bug

ConductionNL · Nov 30, 2023 · 6509d94 · 6509d94
1 parent 2a2529d
commit 6509d94
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/pwa/src/context/categoryOptions.ts b/pwa/src/context/categoryOptions.ts
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { GlobalContext } from "./global";
+import { TGroupedSelectOption, TSelectOption } from "@conduction/components/lib/components/formFields/select/select";
+
+export interface ICategoriesContext {
+  options: TSelectOption[] | TGroupedSelectOption[];
+}
+
+export const defaultCategoriesContext: ICategoriesContext = {
+  options: [],
+};
+
+export const useCategoriesContext = () => {
+  const [globalContext, setGlobalContext] = React.useContext(GlobalContext);
+  const categoryOptions: ICategoriesContext = globalContext.categoryOptions;
+
+  const setCategoryOptions = (newFilters: ICategoriesContext) => {
+    setGlobalContext((context) => ({ ...context, categoryOptions: { ...globalContext.categoryOptions, ...newFilters } }));
+  };
+
+  return { categoryOptions, setCategoryOptions };
+};
diff --git a/pwa/src/context/global.ts b/pwa/src/context/global.ts
@@ -4,6 +4,7 @@ import { defaultFiltersContext, IFiltersContext } from "./filters";
 import { defaultDisplayContext, IDisplayContext } from "./displays";
 import { defaultPaginationContext, IPaginationContext } from "./pagination";
 import { defaultQueryLimitContext, IQueryLimitContext } from "./queryLimit";
+import { defaultCategoriesContext, ICategoriesContext } from "./categoryOptions";
 
 export interface IGlobalContext {
   initiated: boolean;
@@ -12,6 +13,7 @@ export interface IGlobalContext {
   displays: IDisplayContext;
   pagination: IPaginationContext;
   queryLimit: IQueryLimitContext;
+  categoryOptions: ICategoriesContext;
 }
 
 export const defaultGlobalContext: IGlobalContext = {
@@ -21,6 +23,7 @@ export const defaultGlobalContext: IGlobalContext = {
   displays: defaultDisplayContext,
   pagination: defaultPaginationContext,
   queryLimit: defaultQueryLimitContext,
+  categoryOptions: defaultCategoriesContext,
 };
 
 export const GlobalContext = React.createContext<

diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx
@@ -17,19 +17,20 @@ import { navigate } from "gatsby";
 import { useGatsbyContext } from "../../../context/gatsby";
 import { useAvailableFilters } from "../../../hooks/availableFilters";
 import { usePaginationContext } from "../../../context/pagination";
+import { useCategoriesContext } from "../../../context/categoryOptions";
 
 interface FiltersTemplateProps {
   isLoading: boolean;
 }
 
 export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) => {
   const { t } = useTranslation();
-  const { filters, setFilters } = useFiltersContext();
   const { setPagination } = usePaginationContext();
   const { gatsbyContext } = useGatsbyContext();
+  const { filters, setFilters } = useFiltersContext();
+  const { categoryOptions, setCategoryOptions } = useCategoriesContext();
   const [queryParams, setQueryParams] = React.useState<IFiltersContext>(defaultFiltersContext);
   const [categoryParams, setCategoryParams] = React.useState<any>();
-  const [categoryOptions, setCategoryOptions] = React.useState<any>();
   const filterTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
   const {
@@ -66,7 +67,7 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
     getCategories.isSuccess &&
       setValue(
         "category",
-        categoryOptions.find((option: any) => option.value === params.categorie?.replace(/_/g, " ")),
+        categoryOptions.options.find((option: any) => option.value === params.categorie?.replace(/_/g, " ")),
       );
   };
 
@@ -117,7 +118,8 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
       value: _.upperFirst(category._id.toLowerCase()),
     }));
 
-    setCategoryOptions(_.orderBy(_.uniqBy(categoriesWithData, "value"), "label", "asc"));
+    const uniqueOptions: any[] = _.orderBy(_.uniqBy(categoriesWithData, "value"), "label", "asc");
+    setCategoryOptions({ options: uniqueOptions });
   }, [getCategories.isSuccess]);
 
   return (
@@ -148,10 +150,13 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
         {getCategories.isLoading && <Skeleton height="50px" />}
         {getCategories.isSuccess && (
           <SelectSingle
-            options={categoryOptions}
+            options={categoryOptions.options}
             name="category"
             placeholder={t("Category")}
-            defaultValue={categoryOptions && categoryOptions.find((option: any) => option.value === filters.categorie)}
+            defaultValue={
+              categoryOptions.options &&
+              categoryOptions.options.find((option: any) => option.value === filters.categorie)
+            }
             isClearable
             disabled={getCategories.isLoading}
             {...{ register, errors, control }}