#2227: Add Sort to search page (#2294)

* #2227: Add Sort to search page * 2227: Review fixes * Review cleanup * Remove italics * Flip best match sort direction Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> Co-authored-by: Tommy Wiebell <twiebell@adobe.com>
magento · Apr 14, 2020 · 6d15db4 · 6d15db4
1 parent 2a56b83
commit 6d15db4
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 17 deletions.
diff --git a/packages/peregrine/lib/talons/SearchPage/useSearchPage.js b/packages/peregrine/lib/talons/SearchPage/useSearchPage.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/react-hooks';
 import { useLocation } from 'react-router-dom';
 
@@ -24,6 +24,18 @@ export const useSearchPage = props => {
         }
     } = props;
 
+    const [sort, setSort] = useState({
+        sortAttribute: 'relevance',
+        sortDirection: 'DESC'
+    });
+
+    const { sortAttribute, sortDirection } = sort;
+
+    const sortControl = {
+        currentSort: sort,
+        setSort: setSort
+    };
+
     // Set up pagination.
     const [paginationValues, paginationApi] = usePagination();
     const { currentPage, totalPages } = paginationValues;
@@ -113,7 +125,8 @@ export const useSearchPage = props => {
                 currentPage: Number(currentPage),
                 filters: newFilters,
                 inputText,
-                pageSize: Number(PAGE_SIZE)
+                pageSize: Number(PAGE_SIZE),
+                sort: { [sortAttribute]: sortDirection }
             }
         });
 
@@ -122,7 +135,15 @@ export const useSearchPage = props => {
             top: 0,
             behavior: 'smooth'
         });
-    }, [currentPage, filterTypeMap, inputText, runQuery, search]);
+    }, [
+        currentPage,
+        filterTypeMap,
+        inputText,
+        runQuery,
+        search,
+        sortDirection,
+        sortAttribute
+    ]);
 
     // Set the total number of pages whenever the data changes.
     useEffect(() => {
@@ -185,12 +206,27 @@ export const useSearchPage = props => {
         searchLoading ||
         introspectionLoading;
 
+    const sortText = useMemo(() => {
+        if (sortAttribute === 'relevance') {
+            return 'Best Match';
+        }
+
+        if (sortAttribute === 'price') {
+            if (sortDirection === 'ASC') {
+                return 'Price: Low to High';
+            }
+            return 'Price: High to Low';
+        }
+    }, [sortAttribute, sortDirection]);
+
     return {
         data,
         error,
         filters,
         loading,
         openDrawer,
-        pageControl
+        pageControl,
+        sortControl,
+        sortText
     };
 };
diff --git a/packages/venia-ui/lib/RootComponents/Category/category.js b/packages/venia-ui/lib/RootComponents/Category/category.js
@@ -27,7 +27,7 @@ const Category = props => {
 
     const [sort, setSort] = useState({
         sortAttribute: 'relevance',
-        sortDirection: 'ASC'
+        sortDirection: 'DESC'
     });
     const { sortAttribute, sortDirection } = sort;
     const sortControl = {

diff --git a/packages/venia-ui/lib/components/CategorySort/categorySort.js b/packages/venia-ui/lib/components/CategorySort/categorySort.js
@@ -102,7 +102,7 @@ CategorySort.defaultProps = {
         {
             text: 'Best Match',
             attribute: 'relevance',
-            sortDirection: 'ASC'
+            sortDirection: 'DESC'
         },
         {
             text: 'Price: Low to High',

diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.css b/packages/venia-ui/lib/components/SearchPage/searchPage.css
@@ -23,12 +23,20 @@
 }
 
 .filterButton {
-    padding: 0.5rem;
     margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    width: 9rem;
+    display: inline-block;
+    padding: 0.75rem 2rem;
     border: 1px solid black;
-    border-radius: 100px;
+    border-radius: 3px;
     color: black;
     outline: none;
 }
+
+.sortContainer {
+    font-size: 0.875rem;
+    padding: 1rem 0;
+}
+
+.sortText {
+    font-weight: 600;
+}
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -12,6 +12,7 @@ import defaultClasses from './searchPage.css';
 import PRODUCT_SEARCH from '../../queries/productSearch.graphql';
 import FILTER_INTROSPECTION from '../../queries/introspection/filterIntrospectionQuery.graphql';
 import GET_PRODUCT_FILTERS_BY_SEARCH from '../../queries/getProductFiltersBySearch.graphql';
+import CategorySort from '../CategorySort';
 
 const SearchPage = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
@@ -30,7 +31,9 @@ const SearchPage = props => {
         filters,
         loading,
         openDrawer,
-        pageControl
+        pageControl,
+        sortControl,
+        sortText
     } = talonProps;
 
     if (loading) return fullPageLoadingIndicator;
@@ -62,23 +65,36 @@ const SearchPage = props => {
 
     const maybeFilterButtons =
         filters && filters.length ? (
-            <div className={classes.headerButtons}>
-                <button onClick={openDrawer} className={classes.filterButton}>
-                    Filter
-                </button>
-            </div>
+            <button onClick={openDrawer} className={classes.filterButton}>
+                Filter
+            </button>
         ) : null;
 
     const maybeFilterModal =
         filters && filters.length ? <FilterModal filters={filters} /> : null;
 
+    const maybeSortButton = totalCount ? (
+        <CategorySort sortControl={sortControl} />
+    ) : null;
+
+    const maybeSortContainer = totalCount ? (
+        <div className={classes.sortContainer}>
+            {'Items sorted by '}
+            <span className={classes.sortText}>{sortText}</span>
+        </div>
+    ) : null;
+
     return (
         <article className={classes.root}>
             <div className={classes.categoryTop}>
                 <div className={classes.totalPages}>
                     {`${totalCount} items`}
                 </div>
-                {maybeFilterButtons}
+                <div className={classes.headerButtons}>
+                    {maybeFilterButtons}
+                    {maybeSortButton}
+                </div>
+                {maybeSortContainer}
             </div>
             {content}
             <Suspense fallback={null}>{maybeFilterModal}</Suspense>

diff --git a/packages/venia-ui/lib/queries/productSearch.graphql b/packages/venia-ui/lib/queries/productSearch.graphql
@@ -3,12 +3,14 @@ query productSearch(
     $inputText: String!
     $pageSize: Int = 6
     $filters: ProductAttributeFilterInput!
+    $sort: ProductAttributeSortInput
 ) {
     products(
         currentPage: $currentPage
         pageSize: $pageSize
         search: $inputText
         filter: $filters
+        sort: $sort
     ) {
         items {
             id