Fixes search page bugs. (#1019)

app/search/[collection]/page.tsx

@@ -4,6 +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';
 
 export const runtime = 'edge';
 
@@ -32,8 +33,16 @@ export async function generateMetadata({
   };
 }
 
-export default async function CategoryPage({ params }: { params: { collection: string } }) {
-  const products = await getCollectionProducts(params.collection);
+export default async function CategoryPage({
+  params,
+  searchParams
+}: {
+  params: { collection: string };
+  searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+  const { sort } = searchParams as { [key: string]: string };
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
 
   return (
     <section>

components/carousel.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const products = await getCollectionProducts('hidden-homepage-carousel');
+  const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
 
   if (!products?.length) return null;
 

components/grid/three-items.tsx

@@ -37,7 +37,9 @@ function ThreeItemGridItem({
 
 export async function ThreeItemGrid() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const homepageItems = await getCollectionProducts('hidden-homepage-featured-items');
+  const homepageItems = await getCollectionProducts({
+    collection: 'hidden-homepage-featured-items'
+  });
 
   if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
 

components/layout/navbar/search.tsx

@@ -3,6 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import SearchIcon from 'components/icons/search';
+import { createUrl } from 'lib/utils';
 
 export default function Search() {
   const router = useRouter();
@@ -13,12 +14,15 @@ export default function Search() {
 
     const val = e.target as HTMLFormElement;
     const search = val.search as HTMLInputElement;
+    const newParams = new URLSearchParams(searchParams.toString());
 
     if (search.value) {
-      router.push(`/search?q=${search.value}`);
+      newParams.set('q', search.value);
     } else {
-      router.push(`/search`);
+      newParams.delete('q');
     }
+
+    router.push(createUrl('/search', newParams));
   }
 
   return (

components/layout/search/filter/item.tsx

@@ -12,6 +12,9 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [active, setActive] = useState(pathname === item.path);
+  const newParams = new URLSearchParams(searchParams.toString());
+
+  newParams.delete('q');
 
   useEffect(() => {
     setActive(pathname === item.path);
@@ -20,7 +23,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   return (
     <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
       <Link
-        href={createUrl(item.path, searchParams)}
+        href={createUrl(item.path, newParams)}
         className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
           'text-gray-600 dark:text-gray-400': !active,
           'font-semibold text-black dark:text-white': active
@@ -36,6 +39,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [active, setActive] = useState(searchParams.get('sort') === item.slug);
+  const q = searchParams.get('q');
 
   useEffect(() => {
     setActive(searchParams.get('sort') === item.slug);
@@ -43,7 +47,13 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
 
   const href =
     item.slug && item.slug.length
-      ? createUrl(pathname, new URLSearchParams({ sort: item.slug }))
+      ? createUrl(
+          pathname,
+          new URLSearchParams({
+            ...(q && { q }),
+            sort: item.slug
+          })
+        )
       : pathname;
 
   return (

lib/shopify/index.ts

@@ -257,16 +257,26 @@ export async function getCollection(handle: string): Promise<Collection | undefi
   return reshapeCollection(res.body.data.collection);
 }
 
-export async function getCollectionProducts(handle: string): Promise<Product[]> {
+export async function getCollectionProducts({
+  collection,
+  reverse,
+  sortKey
+}: {
+  collection: string;
+  reverse?: boolean;
+  sortKey?: string;
+}): Promise<Product[]> {
   const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
     query: getCollectionProductsQuery,
     variables: {
-      handle
+      handle: collection,
+      reverse,
+      sortKey
     }
   });
 
   if (!res.body.data.collection) {
-    console.log('No collection found for handle', handle);
+    console.log(`No collection found for \`${collection}\``);
     return [];
   }
 

lib/shopify/queries/collection.ts

@@ -37,9 +37,13 @@ export const getCollectionsQuery = /* GraphQL */ `
 `;
 
 export const getCollectionProductsQuery = /* GraphQL */ `
-  query getCollectionProducts($handle: String!) {
+  query getCollectionProducts(
+    $handle: String!
+    $sortKey: ProductCollectionSortKeys
+    $reverse: Boolean
+  ) {
     collection(handle: $handle) {
-      products(first: 100) {
+      products(sortKey: $sortKey, reverse: $reverse, first: 100) {
         edges {
           node {
             ...product

lib/shopify/types.ts

@@ -201,6 +201,8 @@ export type ShopifyCollectionProductsOperation = {
   };
   variables: {
     handle: string;
+    reverse?: boolean;
+    sortKey?: string;
   };
 };