diff --git a/pwa/src/context/categoryOptions.ts b/pwa/src/context/categoryOptions.ts new file mode 100644 index 00000000..a156f59a --- /dev/null +++ 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 index 189ac629..90ca7468 100644 --- 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 index 9b1062f2..4e977cdb 100644 --- a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx +++ b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx @@ -17,6 +17,7 @@ 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; @@ -24,12 +25,12 @@ interface FiltersTemplateProps { export const FiltersTemplate: React.FC = ({ 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(defaultFiltersContext); const [categoryParams, setCategoryParams] = React.useState(); - const [categoryOptions, setCategoryOptions] = React.useState(); const filterTimeout = React.useRef(null); const { @@ -66,7 +67,7 @@ export const FiltersTemplate: React.FC = ({ 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 = ({ 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 = ({ isLoading }) = {getCategories.isLoading && } {getCategories.isSuccess && ( option.value === filters.categorie)} + defaultValue={ + categoryOptions.options && + categoryOptions.options.find((option: any) => option.value === filters.categorie) + } isClearable disabled={getCategories.isLoading} {...{ register, errors, control }}