From 6bbe1668e0df94e2f75ca0c8df5730df2fa8cee1 Mon Sep 17 00:00:00 2001
From: Kristian Duda <kristian.duda@extropy.sk>
Date: Fri, 28 Jun 2024 21:43:53 +0200
Subject: [PATCH] sort

---
 app/search/[collection]/page.tsx |  4 ++--
 app/search/layout.tsx            |  4 +++-
 app/search/page.tsx              |  4 ++--
 lib/constants.ts                 | 32 ++++++++++++++++++++------------
 lib/shopify/index.ts             | 21 +++++++++++++++++----
 5 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index e25542bfc..f3a7a0222 100644
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@@ -4,7 +4,7 @@ import { notFound } from 'next/navigation';
 
 import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
+import { DEFAULT_SORT, SORTING } from 'lib/constants';
 
 export async function generateMetadata({
   params
@@ -30,7 +30,7 @@ export default async function CategoryPage({
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const { sort } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } = SORTING.find((item) => item.slug === sort) || DEFAULT_SORT;
   const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
 
   return (
diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index 39bb38220..e9823a582 100644
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@@ -1,5 +1,7 @@
 import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
+import FilterList from 'components/layout/search/filter';
+import { SORTING } from 'lib/constants';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -10,7 +12,7 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         </div>
         <div className="order-last min-h-screen w-full md:order-none">{children}</div>
         <div className="order-none flex-none md:order-last md:w-[125px]">
-          {/* <FilterList list={sorting} title="Sort by" /> */}
+          <FilterList list={SORTING} title="Sort by" />
         </div>
       </div>
       <Footer />
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 60f11b189..eb839b1f6 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -1,6 +1,6 @@
 import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
+import { DEFAULT_SORT, SORTING } from 'lib/constants';
 import { getProducts } from 'lib/shopify';
 
 export const metadata = {
@@ -14,7 +14,7 @@ export default async function SearchPage({
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const { sort, q: searchValue } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } = SORTING.find((item) => item.slug === sort) || DEFAULT_SORT;
 
   const products = await getProducts({ sortKey, reverse, query: searchValue });
   const resultsText = products.length > 1 ? 'results' : 'result';
diff --git a/lib/constants.ts b/lib/constants.ts
index 59fc3f5bf..c1bd82038 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -1,23 +1,31 @@
 export type SortFilterItem = {
   title: string;
   slug: string | null;
-  sortKey: 'RELEVANCE' | 'BEST_SELLING' | 'CREATED_AT' | 'PRICE';
+  sortKey: string;
   reverse: boolean;
 };
 
-export const defaultSort: SortFilterItem = {
-  title: 'Relevance',
-  slug: null,
-  sortKey: 'RELEVANCE',
-  reverse: false
+export const DEFAULT_SORT: SortFilterItem = {
+  title: 'Latest arrivals',
+  slug: 'latest-desc',
+  sortKey: 'createdAt',
+  reverse: true
 };
 
-export const sorting: SortFilterItem[] = [
-  defaultSort,
-  { title: 'Trending', slug: 'trending-desc', sortKey: 'BEST_SELLING', reverse: false }, // asc
-  { title: 'Latest arrivals', slug: 'latest-desc', sortKey: 'CREATED_AT', reverse: true },
-  { title: 'Price: Low to high', slug: 'price-asc', sortKey: 'PRICE', reverse: false }, // asc
-  { title: 'Price: High to low', slug: 'price-desc', sortKey: 'PRICE', reverse: true }
+export const SORTING: SortFilterItem[] = [
+  DEFAULT_SORT,
+  {
+    title: 'Price: Low to high',
+    slug: 'price-asc',
+    sortKey: 'variants.price.amount',
+    reverse: false
+  },
+  {
+    title: 'Price: High to low',
+    slug: 'price-desc',
+    sortKey: 'variants.price.amount',
+    reverse: true
+  }
 ];
 
 export const TAGS = {
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index 086d1b35a..6b1632fe6 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -247,13 +247,19 @@ const reshapeProduct = (product: PayloadProduct): Product => {
 
 export async function getCollectionProducts({
   collection,
-  tag
+  tag,
+  sortKey,
+  reverse
 }: {
   collection?: string;
   tag?: string;
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
+  if (sortKey && reverse) {
+    sortKey = '-' + sortKey;
+  }
+
   const filters: Where[] = [];
   if (collection) {
     filters.push({
@@ -273,7 +279,8 @@ export async function getCollectionProducts({
   const products = await payload.find<PayloadProduct>('products', {
     where: {
       and: filters
-    }
+    },
+    sort: sortKey
   });
   return products.docs.map(reshapeProduct);
 }
@@ -345,12 +352,18 @@ export async function getProductRecommendations(productId: string): Promise<Prod
 }
 
 export async function getProducts({
-  query
+  query,
+  sortKey,
+  reverse
 }: {
   query?: string;
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
+  if (sortKey && reverse) {
+    sortKey = '-' + sortKey;
+  }
+
   let where: Where | undefined;
   if (query) {
     where = {
@@ -369,6 +382,6 @@ export async function getProducts({
     };
   }
 
-  const products = await payload.find<PayloadProduct>('products', { where });
+  const products = await payload.find<PayloadProduct>('products', { where, sort: sortKey });
   return products.docs.map(reshapeProduct);
 }