BUGFIX query params

OpenCatalogi · Nov 14, 2023 · 360a61c · 360a61c
1 parent df1e053
commit 360a61c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts
@@ -4,12 +4,14 @@ import { GlobalContext } from "./global";
 export const QUERY_LIMIT_DEFAULT = 10;
 
 export interface IQueryLimitContext {
+  previousComponentsSearchQueryLimit: number;
   componentsSearchQueryLimit: number;
   organizationsQueryLimit: number;
   applicationsQueryLimit: number;
 }
 
 export const defaultQueryLimitContext: IQueryLimitContext = {
+  previousComponentsSearchQueryLimit: QUERY_LIMIT_DEFAULT,
   componentsSearchQueryLimit: QUERY_LIMIT_DEFAULT,
   organizationsQueryLimit: QUERY_LIMIT_DEFAULT,
   applicationsQueryLimit: QUERY_LIMIT_DEFAULT,

diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx
@@ -24,7 +24,7 @@ import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout
 export const ComponentsTemplate: React.FC = () => {
   const { t } = useTranslation();
   const { filters } = useFiltersContext();
-  const { queryLimit } = useQueryLimitContext();
+  const { queryLimit, setQueryLimit } = useQueryLimitContext();
   const { pagination, setPagination } = usePaginationContext();
   const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext();
 
@@ -40,7 +40,10 @@ export const ComponentsTemplate: React.FC = () => {
   const componentsCount = _useComponents.getCount(filters);
 
   React.useEffect(() => {
+    if (queryLimit.previousComponentsSearchQueryLimit === queryLimit.componentsSearchQueryLimit) return;
+
     setPagination({ ...pagination, componentsCurrentPage: 1 });
+    setQueryLimit({ ...queryLimit, previousComponentsSearchQueryLimit: queryLimit.componentsSearchQueryLimit });
   }, [queryLimit.componentsSearchQueryLimit]);
 
   const displaySwitchButtons: IDisplaySwitchButton[] = [

diff --git a/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx
@@ -24,13 +24,17 @@ export const HorizontalFiltersTemplate: React.FC = () => {
   const watchName = watch("name");
 
   React.useEffect(() => {
+    if (watchName === undefined || watchName === filters._search) return;
+
     if (searchTimeout.current) clearTimeout(searchTimeout.current);
+
     searchTimeout.current = setTimeout(() => {
       setFilters({
         ...filters,
         _search: watchName === undefined ? "" : watchName, //This check is important for the react lifecycle
-      }),
-        setPagination({ ...pagination, componentsCurrentPage: 1 });
+      });
+
+      setPagination({ ...pagination, componentsCurrentPage: 1 });
     }, 500);
   }, [watchName]);
 
@@ -42,7 +46,12 @@ export const HorizontalFiltersTemplate: React.FC = () => {
     >
       <FormField>
         <FormLabel htmlFor={"componentSearchFormInput"}>Zoek op naam</FormLabel>
-        <Textbox id="componentSearchFormInput" {...register("name", { required: true })} invalid={errors["name"]} />
+        <Textbox
+          id="componentSearchFormInput"
+          defaultValue=""
+          {...register("name", { required: true })}
+          invalid={errors["name"]}
+        />
       </FormField>
     </form>
   );