Use sortBy for search products (#997)

CHANGELOG.md

@@ -23,6 +23,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix no channels crash - #984 by @dominik-zeglen
 - Update webhooks - #982 by @piotrgrundas
 - Fix trigger form change when collections are being added to list of product collections - #987 by @gax97
+- Use default sort for search products list - #997 by @orzechdev
 
 # 2.11.1
 

src/products/urls.ts

@@ -48,7 +48,8 @@ export enum ProductListUrlSortField {
   name = "name",
   productType = "productType",
   status = "status",
-  price = "price"
+  price = "price",
+  rank = "rank"
 }
 export type ProductListUrlSort = Sort<ProductListUrlSortField>;
 export interface ProductListUrlQueryParams

src/products/views/ProductList/ProductList.tsx

@@ -53,7 +53,7 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import { getSortUrlVariables } from "@saleor/utils/sort";
 import { useWarehouseList } from "@saleor/warehouses/queries";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import ProductListPage from "../../components/ProductListPage";
@@ -192,6 +192,21 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     params
   });
 
+  useEffect(() => {
+    const sortWithQuery = ProductListUrlSortField.rank;
+    const sortWithoutQuery =
+      params.sort === ProductListUrlSortField.rank
+        ? ProductListUrlSortField.name
+        : params.sort;
+    navigate(
+      productListUrl({
+        ...params,
+        asc: params.query ? undefined : params.asc,
+        sort: params.query ? sortWithQuery : sortWithoutQuery
+      })
+    );
+  }, [params.query]);
+
   const handleTabChange = (tab: number) => {
     reset();
     navigate(

src/products/views/ProductList/sort.ts

@@ -17,6 +17,8 @@ export function getSortQueryField(
       return ProductOrderField.TYPE;
     case ProductListUrlSortField.status:
       return ProductOrderField.PUBLISHED;
+    case ProductListUrlSortField.rank:
+      return ProductOrderField.RANK;
     default:
       return undefined;
   }
@@ -26,15 +28,17 @@ export function getSortQueryVariables(
   params: ProductListUrlQueryParams,
   channel: string
 ): ProductOrder {
+  const direction = getOrderDirection(params.asc);
   if (params.sort === ProductListUrlSortField.attribute) {
     return {
       attributeId: params.attributeId,
-      direction: getOrderDirection(params.asc)
+      direction
     };
   }
+  const field = getSortQueryField(params.sort);
   return {
     channel,
-    direction: getOrderDirection(params.asc),
-    field: getSortQueryField(params.sort)
+    direction,
+    field
   };
 }