Merge pull request #474 from gabmartinez/fix/changing-sorting-option-should-reset-pagination

Reset pagination when guest change the sorting of the list

CHANGELOG.md

@@ -41,6 +41,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add "Ready to capture" to the "Status" order filter - #430 by @dominik-zeglen
 - Reset state after closing - #456 by @dominik-zeglen
 - Password validation errors are not shown - #471 by @gabmartinez
+- Reset pagination when guest change the sorting of the list - #474 by @gabmartinez
 - Filter column ids before send it to GridAttributes operation - #476 by @gabmartinez
 - Display Is Published column correctly in main Product Listing - #475 by @gabmartinez
 

src/config.ts

@@ -1,6 +1,6 @@
 import packageInfo from "../package.json";
 import { SearchVariables } from "./hooks/makeSearch";
-import { ListSettings, ListViews } from "./types";
+import { ListSettings, ListViews, Pagination } from "./types";
 
 export const APP_MOUNT_URI = process.env.APP_MOUNT_URI || "/";
 export const API_URI = process.env.API_URI;
@@ -11,6 +11,11 @@ export const DEFAULT_INITIAL_SEARCH_DATA: SearchVariables = {
   query: ""
 };
 
+export const DEFAULT_INITIAL_PAGINATION_DATA: Pagination = {
+  after: undefined,
+  before: undefined
+};
+
 export const PAGINATE_BY = 20;
 
 export type ProductListColumns = "productType" | "isPublished" | "price";

src/products/views/ProductList/ProductList.tsx

@@ -13,7 +13,8 @@ import SaveFilterTabDialog, {
 import {
   defaultListSettings,
   ProductListColumns,
-  DEFAULT_INITIAL_SEARCH_DATA
+  DEFAULT_INITIAL_SEARCH_DATA,
+  DEFAULT_INITIAL_PAGINATION_DATA
 } from "@saleor/config";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
@@ -116,8 +117,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
       navigate(
         productListUrl({
           ...params,
-          after: undefined,
+          ...DEFAULT_INITIAL_PAGINATION_DATA
-          before: undefined
         }),
         true
       ),
@@ -176,7 +176,8 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
       productListUrl({
         ...params,
         ...getSortUrlVariables(field, params),
-        attributeId
+        attributeId,
+        ...DEFAULT_INITIAL_PAGINATION_DATA
       })
     );
 

src/utils/handlers/sortHandler.ts

@@ -1,5 +1,6 @@
 import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
 import { Sort } from "@saleor/types";
+import { DEFAULT_INITIAL_PAGINATION_DATA } from "@saleor/config";
 import { getSortUrlVariables } from "../sort";
 
 type CreateUrl<T extends string> = (params: Sort<T>) => string;
@@ -13,7 +14,8 @@ function createSortHandler<T extends string>(
     navigate(
       createUrl({
         ...params,
-        ...getSortUrlVariables(field, params)
+        ...getSortUrlVariables(field, params),
+        ...DEFAULT_INITIAL_PAGINATION_DATA
       }),
       true
     );