diff --git a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx index 0a516e0d..5e10b88e 100644 --- a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx +++ b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx @@ -3,7 +3,7 @@ import * as styles from "./PaginationLimitSelect.module.css"; import clsx from "clsx"; import { useForm } from "react-hook-form"; import { SelectSingle } from "@conduction/components"; -import { IQueryLimitContext, queryLimitDefault, useQueryLimitContext } from "../../context/queryLimit"; +import { IQueryLimitContext, QUERY_LIMIT_DEFAULT, useQueryLimitContext } from "../../context/queryLimit"; import { useTranslation } from "react-i18next"; interface PaginationLimitSelectProps { @@ -33,25 +33,27 @@ export const PaginationLimitSelectComponent: React.FC LimitOption.value === watchLimit.value); + const selectedLimit = limitSelectOptions.find((limitOption) => limitOption.value === watchLimit.value); - selectedLimit !== undefined && setQueryLimit({ ...queryLimit, [queryLimitName]: parseInt(selectedLimit.value) }); + if (selectedLimit) { + setQueryLimit({ ...queryLimit, [queryLimitName]: parseInt(selectedLimit.value) }); + } }, [watchLimit]); React.useEffect(() => { setValue( "limit", - limitSelectOptions.find((LimitOption) => LimitOption.value === (value !== undefined && value.toString())), + limitSelectOptions.find((limitOption) => limitOption.value === (value !== undefined && value.toString())), ); }, []); return (
- {`${t("Results per page")}:`} + {t("Results per page")}: { diff --git a/pwa/src/services/filtersToQueryParams.ts b/pwa/src/services/filtersToQueryParams.ts index c87a1407..8a15c6f3 100644 --- a/pwa/src/services/filtersToQueryParams.ts +++ b/pwa/src/services/filtersToQueryParams.ts @@ -1,80 +1,43 @@ export const filtersToQueryParams = (filters: any): string => { - Object.keys(filters) - .filter((key) => filterKeysToRemove.includes(key)) - .forEach((key) => { - delete filters[key]; - }); + const cleanedFilters = Object.fromEntries( + Object.entries(filters).filter(([key]) => !filterKeysToRemove.includes(key)), + ); - let params: string = ""; + const params = Object.entries(cleanedFilters) + .map(([key, value]) => { + if (!value) return null; - for (const [key, value] of Object.entries(filters)) { - if (!value) continue; + const formattedValue = Array.isArray(value) + ? value.map((v: string) => v.replace(/\s+/g, "_")).join(`&${key}[]=`) + : (value as string).replace(/\s+/g, "_"); - if (typeof value === "string") { - params += `&${key}=${value}`; - } + return `${Array.isArray(value) ? `${key}[]` : key}=${formattedValue}`; + }) + .filter(Boolean) + .join("&"); - if (Array.isArray(value)) { - let arrayParams = ""; - - value.forEach((value) => { - arrayParams += `&${key}[]=${value}`; - }); - - params += arrayParams; - } - } - - return params; + return params ? `&${params}` : ""; }; -export const filtersToUrlQueryParams = (filters: any): string => { - Object.keys(filters) - .filter((key) => filterKeysToRemove.includes(key)) - .forEach((key) => { - delete filters[key]; - }); - - let params: string = ""; - - var first_iteration = true; - for (const [key, value] of Object.entries(filters)) { - if (!value) continue; - - if (first_iteration) { - if (typeof value === "string") { - params += `?${key}=${value.replace(/\s+/g, "_")}`; - } - - if (Array.isArray(value)) { - let arrayParams = ""; - - value.forEach((value) => { - arrayParams += `?${key}[]=${value.replace(/\s+/g, "_")}`; - }); - - params += arrayParams; - } - - first_iteration = false; - } else { - if (typeof value === "string") { - params += `&${key}=${value.replace(/\s+/g, "_")}`; - } +export const filtersToUrlQueryParams = (filters: Record): string => { + const cleanedFilters = Object.fromEntries( + Object.entries(filters).filter(([key]) => !filterKeysToRemove.includes(key)), + ); - if (Array.isArray(value)) { - let arrayParams = ""; + const params = Object.entries(cleanedFilters) + .map(([key, value]) => { + if (!value) return null; - value.forEach((value) => { - arrayParams += `&${key}[]=${value.replace(/\s+/g, "_")}`; - }); + const formattedValue = Array.isArray(value) + ? value.map((v: string) => v.replace(/\s+/g, "_")).join(`&${key}[]=`) + : (value as string).replace(/\s+/g, "_"); - params += arrayParams; - } - } - } + return `${Array.isArray(value) ? `${key}[]` : key}=${formattedValue}`; + }) + .filter(Boolean) + .join("&"); - return params; + return params ? `?${params}` : ""; }; const filterKeysToRemove: string[] = []; diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx index 01a3d29f..195fb473 100644 --- a/pwa/src/templates/landing/LandingTemplate.tsx +++ b/pwa/src/templates/landing/LandingTemplate.tsx @@ -21,11 +21,11 @@ export const LandingTemplate: React.FC = () => { const { queryLimit } = useQueryLimitContext(); const queryClient = new QueryClient(); - const getItems = useOpenWoo(queryClient).getAll(filters, currentPage, queryLimit.objectsQueryLimit); + const getItems = useOpenWoo(queryClient).getAll(filters, currentPage, queryLimit.openWooObjectsQueryLimit); React.useEffect(() => { setCurrentPage(1); - }, [queryLimit.objectsQueryLimit]); + }, [queryLimit.openWooObjectsQueryLimit]); return ( <> @@ -45,7 +45,7 @@ export const LandingTemplate: React.FC = () => { totalPages={getItems.data.pages} {...{ currentPage, setCurrentPage }} /> - +
)}