fix: search paging without variable change

has more data tracking breaking if the same search variables are used
for the new search.

Author: joonatank

apps/ui/components/search/SeasonalSearchForm.tsx

@@ -191,7 +191,7 @@ export function SeasonalSearchForm({
       if (cv[1] == null || cv[1] === "") return c;
       return { ...c, [cv[0]]: cv[1] };
     }, {});
-    handleSearch(searchCriteria);
+    handleSearch(searchCriteria, true);
   };
 
   const translateTag = (key: string, value: string): string | undefined => {
@@ -209,7 +209,7 @@ export function SeasonalSearchForm({
   };
 
   const multiSelectFilters = ["unit", "reservationUnitTypes", "purposes"];
-  const hideList = ["applicationRound", "order", "sort"];
+  const hideList = ["applicationRound", "order", "sort", "ref"];
 
   return (
     <form noValidate onSubmit={handleSubmit(search)}>

apps/ui/components/search/SingleSearchForm.tsx

@@ -214,7 +214,7 @@ const multiSelectFilters = [
   "equipments",
 ];
 // we don't want to show "showOnlyReservable" as a FilterTag, as it has its own checkbox in the form
-const hideTagList = ["showOnlyReservable", "order", "sort"];
+const hideTagList = ["showOnlyReservable", "order", "sort", "ref"];
 
 // TODO rewrite this witout the form state (use query params directly, but don't refresh the page)
 export function SingleSearchForm({
@@ -270,13 +270,13 @@ export function SingleSearchForm({
     }
   };
 
-  const search: SubmitHandler<FormValues> = (criteria: FormValues) => {
+  const onSearch: SubmitHandler<FormValues> = (criteria: FormValues) => {
     // Remove empty (null || "") values from the criteria
     const searchCriteria = Object.entries(criteria).reduce((c, cv) => {
       if (cv[1] == null || cv[1] === "") return c;
       return { ...c, [cv[0]]: cv[1] };
     }, {});
-    handleSearch(searchCriteria);
+    handleSearch(searchCriteria, true);
   };
 
   const showOptionalFilters =
@@ -286,7 +286,7 @@ export function SingleSearchForm({
     formValues.textSearch != null;
 
   return (
-    <form noValidate onSubmit={handleSubmit(search)}>
+    <form noValidate onSubmit={handleSubmit(onSearch)}>
       <TopContainer>
         <Filters>
           <ControlledMultiSelect
@@ -397,7 +397,7 @@ export function SingleSearchForm({
               placeholder={t("searchForm:searchTermPlaceholder")}
               onKeyDown={(e) => {
                 if (e.key === "Enter") {
-                  handleSubmit(search)();
+                  handleSubmit(onSearch)();
                 }
               }}
             />

apps/ui/hooks/useSearchQuery.tsx

@@ -4,6 +4,7 @@ import {
 } from "@/gql/gql-types";
 import { SEARCH_PAGING_LIMIT } from "@/modules/const";
 import { hash } from "common/src/helpers";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 /* Wrap the search query with a custom hook
@@ -29,20 +30,23 @@ export function useSearchQuery(
   const [varhash, setVarhash] = useState("");
   const { fetchMore } = query;
 
+  const router = useRouter();
+
   // clear the showMore state if the variables change
   useEffect(() => {
-    function check(v: typeof variables): void {
+    async function check(v: typeof variables, version: number): Promise<void> {
       // use hash to make sure we don't reset unnecessarily
-      hash(JSON.stringify(v)).then((h) => {
-        if (h !== varhash) {
-          setVarhash(h);
-          setHasMoreData(true);
-        }
-      });
+      const hashed = await hash(JSON.stringify({ ...v, version }));
+      if (hashed !== varhash) {
+        setVarhash(hashed);
+        setHasMoreData(true);
+      }
     }
 
-    check(variables);
-  }, [variables, varhash]);
+    const { ref } = router.query;
+    const version = Number(ref) > 0 ? Number(ref) : 0;
+    check(variables, version);
+  }, [variables, varhash, router.query]);
 
   useEffect(() => {
     if (query.data) {

apps/ui/hooks/useSearchValues.tsx

@@ -20,11 +20,24 @@ export function useSearchModify() {
   const searchValues = useSearchValues();
 
   // TODO type this properly (not a Record)
-  const handleSearch = (criteria: Record<string, string>) => {
-    const { sort, order } = router.query;
+  const handleSearch = (criteria: Record<string, string>, force: boolean) => {
+    const { sort, order, ref } = router.query;
     const newSort = sort != null && !Array.isArray(sort) ? sort : null;
     const newOrder = order != null && !Array.isArray(order) ? order : null;
-    const newValues = { ...criteria, sort: newSort, order: newOrder };
+    // form submit -> router push has no other way to communicate with the hook that updates the query
+    // than using query params, so we need to increment the ref to trigger a re-fetch
+    // otherwise submitting the same search without any changes breaks pagination
+    // alternative would be to disable the form submit (or make it a no-op) if the search values are the same
+    // which has other issues like stale data if the page is left open for a long time
+    const v = Number(ref) > 0 ? Number(ref) : null;
+    const nextRef = v != null ? v + 1 : 1;
+
+    const newValues = {
+      ...criteria,
+      sort: newSort,
+      order: newOrder,
+      ...(force ? { ref: nextRef } : {}),
+    };
     router.replace({
       query: newValues,
     });