From df24786d1845ebd481a59388893d33810fe4bb5b Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Wed, 14 Oct 2020 13:50:56 -0500
Subject: [PATCH] Added selected state to sort options

---
 .../api/catalog/handlers/get-products.ts      | 11 +--
 pages/search.tsx                              | 70 +++++++------------
 2 files changed, 31 insertions(+), 50 deletions(-)

diff --git a/lib/bigcommerce/api/catalog/handlers/get-products.ts b/lib/bigcommerce/api/catalog/handlers/get-products.ts
index c334dd97b..6cb289c3d 100644
--- a/lib/bigcommerce/api/catalog/handlers/get-products.ts
+++ b/lib/bigcommerce/api/catalog/handlers/get-products.ts
@@ -9,6 +9,7 @@ const SORT: { [key: string]: string | undefined } = {
   trending: 'total_sold',
   price: 'price',
 }
+const LIMIT = 12
 
 // Return current cart info
 const getProducts: ProductsHandlers['getProducts'] = async ({
@@ -19,8 +20,8 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
   // Use a dummy base as we only care about the relative path
   const url = new URL('/v3/catalog/products', 'http://a')
 
-  // The limit should math the number of products returned by `getAllProducts`
-  url.searchParams.set('limit', '10')
+  url.searchParams.set('is_visible', 'true')
+  url.searchParams.set('limit', String(LIMIT))
 
   if (search) url.searchParams.set('keyword', search)
 
@@ -41,7 +42,7 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
   }
 
   // We only want the id of each product
-  url.searchParams.set('include_fields', 'id,price')
+  url.searchParams.set('include_fields', 'id')
 
   const { data } = await config.storeApiFetch<{ data: { id: number }[] }>(
     url.pathname + url.search
@@ -49,7 +50,9 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
   const entityIds = data.map((p) => p.id)
   const found = entityIds.length > 0
   // We want the GraphQL version of each product
-  const graphqlData = await getAllProducts({ variables: { entityIds } })
+  const graphqlData = await getAllProducts({
+    variables: { first: LIMIT, entityIds },
+  })
   // Put the products in an object that we can use to get them by id
   const productsById = graphqlData.products.reduce<{ [k: number]: Product }>(
     (prods, p) => {
diff --git a/pages/search.tsx b/pages/search.tsx
index 3a0bdea67..c84fa8d39 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -23,6 +23,13 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
   }
 }
 
+const SORT = Object.entries({
+  'latest-desc': 'Latest arrivals',
+  'trending-desc': 'Trending',
+  'price-asc': 'Price: Low to high',
+  'price-desc': 'Price: High to low',
+})
+
 export default function Search({
   categories,
   brands,
@@ -127,56 +134,27 @@ export default function Search({
         <div className="col-span-2">
           <ul>
             <li className="py-1 text-primary font-bold tracking-wide">Sort</li>
-            <li className="py-1 text-default">
-              <Link
-                href={{
-                  pathname,
-                  query: filterQuery({ q }),
-                }}
-              >
+            <li
+              className={cn('py-1 text-default', {
+                underline: !sort,
+              })}
+            >
+              <Link href={{ pathname, query: filterQuery({ q }) }}>
                 <a>Relevance</a>
               </Link>
             </li>
-            <li className="py-1 text-default">
-              <Link
-                href={{
-                  pathname,
-                  query: filterQuery({ q, sort: 'latest-desc' }),
-                }}
+            {SORT.map(([key, text]) => (
+              <li
+                key={key}
+                className={cn('py-1 text-default', {
+                  underline: sort === key,
+                })}
               >
-                <a>Latest arrivals</a>
-              </Link>
-            </li>
-            <li className="py-1 text-default">
-              <Link
-                href={{
-                  pathname,
-                  query: filterQuery({ q, sort: 'trending-desc' }),
-                }}
-              >
-                <a>Trending</a>
-              </Link>
-            </li>
-            <li className="py-1 text-default">
-              <Link
-                href={{
-                  pathname,
-                  query: filterQuery({ q, sort: 'price-asc' }),
-                }}
-              >
-                <a>Price: Low to high</a>
-              </Link>
-            </li>
-            <li className="py-1 text-default">
-              <Link
-                href={{
-                  pathname,
-                  query: filterQuery({ q, sort: 'price-desc' }),
-                }}
-              >
-                <a>Price: High to low</a>
-              </Link>
-            </li>
+                <Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
+                  <a>{text}</a>
+                </Link>
+              </li>
+            ))}
           </ul>
         </div>
       </div>