From fb375ed4e8ac1c66460c68f58b7bd9962a70d404 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 6 Oct 2021 17:49:41 +0700
Subject: [PATCH] :sparkles: feat: sort products list

:%s
---
 .../ProductListFilter/ProductListFilter.tsx   |  8 +++-
 src/utils/funtion.utils.ts                    | 41 +++++++++++++++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx b/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
index e35df74e1..17612866c 100644
--- a/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
+++ b/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
@@ -7,7 +7,7 @@ import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbC
 import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'
 import { useSearchProducts } from 'src/components/hooks/product'
 import { DEFAULT_PAGE_SIZE, QUERY_KEY, QUERY_SPLIT_SEPERATOR, ROUTE } from 'src/utils/constanst.utils'
-import { getFacetIdsFromCodes, getPageFromQuery } from 'src/utils/funtion.utils'
+import { getFacetIdsFromCodes, getPageFromQuery, getProductSortParamFromQuery } from 'src/utils/funtion.utils'
 import s from './ProductListFilter.module.scss'
 import ProductsMenuNavigationTablet from './ProductsMenuNavigationTablet/ProductsMenuNavigationTablet'
 import ProductSort from './ProductSort/ProductSort'
@@ -64,6 +64,12 @@ const ProductListFilter = ({ facets, collections, products, total }: ProductList
     const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string)
     query.input.skip = page * DEFAULT_PAGE_SIZE
 
+
+    const sortQuery = router.query[QUERY_KEY.SORTBY] as string
+    if (sortQuery) {
+      query.input.sort = getProductSortParamFromQuery(sortQuery)
+    }
+
     // collections
     const categoryQuery = router.query[QUERY_KEY.CATEGORY] as string
     if (categoryQuery) {
diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts
index ee7f85c9d..9f712326d 100644
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -1,7 +1,7 @@
 import { Facet } from "@commerce/types/facet";
-import { FacetValue } from './../../framework/vendure/schema.d';
-import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT } from "./constanst.utils";
-import { PromiseWithKey } from "./types.utils";
+import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
+import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
+import { PromiseWithKey, SortOrder } from "./types.utils";
 
 export function isMobile() {
   return window.innerWidth < 768
@@ -20,6 +20,41 @@ export function getPageFromQuery(pageQuery: string) {
   return page
 }
 
+
+export function getProductSortParamFromQuery(query: string) {
+  let rs = {} as SearchResultSortParameter
+  switch (query) {
+    case PRODUCT_SORT_OPTION_VALUE.NAME_ASC:
+      rs = {
+        name: SortOrder.Asc
+      }
+      break;
+
+    case PRODUCT_SORT_OPTION_VALUE.NAME_DESC:
+      rs = {
+        name: SortOrder.Desc
+      }
+      break;
+
+    case PRODUCT_SORT_OPTION_VALUE.PRICE_ASC:
+      rs = {
+        price: SortOrder.Asc
+      }
+      break;
+
+    case PRODUCT_SORT_OPTION_VALUE.PRICE_DESC:
+      rs = {
+        price: SortOrder.Desc
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  return rs
+}
+
 export function removeItem<T>(arr: Array<T>, value: T): Array<T> {
   const index = arr.indexOf(value);
   if (index > -1) {