Merge pull request #129 from ConductionNL/feature/XW-95/queryParams

feature/XW-95/queryParams
ConductionNL · Oct 23, 2023 · d04d611 · d04d611
2 parents d1df201 + a30dd9c
commit d04d611
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 78 deletions.
diff --git 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<PaginationLimitSelectProps
     if (!watchLimit) return;
     if (parseInt(watchLimit.value) === value) return;
 
-    const selectedLimit = limitSelectOptions.find((LimitOption) => 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 (
     <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
-      <span>{`${t("Results per page")}:`}</span>
+      <span>{t("Results per page")}:</span>
       <SelectSingle
         ariaLabel={t("Select result limit")}
         {...{ register, errors, control }}
-        defaultValue={queryLimitDefault}
+        defaultValue={QUERY_LIMIT_DEFAULT}
         name="limit"
         options={limitSelectOptions}
         menuPlacement="auto"

diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts
@@ -1,14 +1,14 @@
 import * as React from "react";
 import { GlobalContext } from "./global";
 
-export const queryLimitDefault = 12;
+export const QUERY_LIMIT_DEFAULT = 12;
 
 export interface IQueryLimitContext {
-  objectsQueryLimit: number;
+  openWooObjectsQueryLimit: number;
 }
 
 export const defaultQueryLimitContext: IQueryLimitContext = {
-  objectsQueryLimit: queryLimitDefault,
+  openWooObjectsQueryLimit: QUERY_LIMIT_DEFAULT,
 };
 
 export const useQueryLimitContext = () => {

diff --git 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, any>): 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
@@ -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 }}
                 />
-                <PaginationLimitSelectComponent queryLimitName={"objectsQueryLimit"} />
+                <PaginationLimitSelectComponent queryLimitName={"openWooObjectsQueryLimit"} />
               </div>
             </div>
           )}