fix: filtering list must reset pagination (#364)

Author: vincentchalamon

pwa/components/book/Filters.tsx

@@ -19,7 +19,7 @@ export const Filters: FunctionComponent<Props> = ({ filters, mutation }) => (
     enableReinitialize={true}
     onSubmit={(values, { setSubmitting, setStatus, setErrors }) => {
       mutation.mutate(
-        values,
+        { ...values, page: 1 },
         {
           onSuccess: () => {
             setStatus({

pwa/components/book/List.tsx

@@ -62,7 +62,7 @@ export const List: NextPage<Props> = ({ data, hubURL, filters, page }) => {
                     value={filters.order?.title ?? ""}
                     displayEmpty
                     onChange={(event) => {
-                      filtersMutation.mutate({ ...filters, order: event.target.value ? { title: event.target.value } : undefined });
+                      filtersMutation.mutate({ ...filters, page: 1, order: event.target.value ? { title: event.target.value } : undefined });
                     }}
                     >
                     <MenuItem value="">Relevance</MenuItem>

pwa/tests/BooksList.spec.ts

@@ -106,6 +106,25 @@ test.describe("Books list", () => {
     await expect(page.getByTestId("nb-books")).toHaveText(`${totalBooks} book(s) found`);
     await expect(page.getByTestId("book").or(page.getByTestId("loading"))).toHaveCount(30);
 
+    // filtering must reset the pagination
+    await page.getByLabel("Go to next page").click();
+    await expect(page).toHaveURL(/\/books\?page=2$/);
+    await expect(page.getByTestId("book").or(page.getByTestId("loading"))).toHaveCount(30);
+    await expect(await bookPage.getDefaultBook()).not.toBeVisible();
+    await bookPage.filter({ author: "Dan Simmons" });
+    await expect(page).toHaveURL(/\/books\?author=Dan\+Simmons/);
+    await expect(page.getByTestId("nb-books")).toHaveText("1 book(s) found");
+    await expect(page.getByTestId("book").or(page.getByTestId("loading"))).toHaveCount(1);
+    await expect(page.getByTestId("pagination")).toHaveCount(0);
+    await expect(await bookPage.getDefaultBook()).toBeVisible();
+
+    // clear author field
+    await page.getByTestId("filter-author").clear();
+    await expect(page.getByTestId("filter-author")).toHaveValue("");
+    await expect(page).toHaveURL(/\/books$/);
+    await expect(page.getByTestId("nb-books")).toHaveText(`${totalBooks} book(s) found`);
+    await expect(page.getByTestId("book").or(page.getByTestId("loading"))).toHaveCount(30);
+
     // filter by title, author and condition
     await bookPage.filter({ author: "Dan Simmons", title: "Hyperion", condition: "Used" });
     await expect(page).toHaveURL(/\/books\?author=Dan\+Simmons&title=Hyperion&condition%5B%5D=https%3A%2F%2Fschema\.org%2FUsedCondition$/);