Search Result Counts Match

packages/peregrine/lib/talons/SearchBar/__tests__/useAutocomplete.spec.js

@@ -149,7 +149,9 @@ test('renders an empty-set message', () => {
 });
 
 test('renders a summary message', () => {
-    const data = { products: { filters: [], items: { length: 1 } } };
+    const data = {
+        products: { filters: [], items: { length: 1 }, total_count: 1 }
+    };
     useLazyQuery.mockReturnValueOnce([
         runQuery,
         { data, error: null, loading: false }

packages/peregrine/lib/talons/SearchBar/useAutocomplete.js

@@ -40,7 +40,7 @@ export const useAutocomplete = props => {
     // Handle results.
     const products = data && data.products;
     const hasResult = products && products.items;
-    const resultCount = hasResult && products.items.length;
+    const resultCount = products && products.total_count;
     let messageType = '';
 
     if (error) {

packages/peregrine/lib/talons/SearchPage/useSearchPage.js

@@ -1,10 +1,14 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from '@apollo/react-hooks';
-import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useLocation } from 'react-router-dom';
 
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { usePagination } from '@magento/peregrine';
+
 import { getSearchParam } from '../../hooks/useSearchParam';
 
+const PAGE_SIZE = 6;
+
 /**
  * Return props necessary to render a SearchPage component.
  *
@@ -13,21 +17,30 @@ import { getSearchParam } from '../../hooks/useSearchParam';
  */
 export const useSearchPage = props => {
     const { query } = props;
-    const location = useLocation();
+
+    // Set up pagination.
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
 
     // retrieve app state and action creators
     const [appState, appApi] = useAppContext();
     const { searchOpen } = appState;
     const { executeSearch, toggleDrawer, toggleSearch } = appApi;
 
-    const openDrawer = useCallback(() => {
-        toggleDrawer('filter');
-    }, [toggleDrawer]);
-
     // get the URL query parameters.
+    const location = useLocation();
     const inputText = getSearchParam('query', location);
     const categoryId = getSearchParam('category', location);
 
+    // Keep track of the search terms so we can tell when they change.
+    const [previousInputText, setPreviousInputText] = useState(inputText);
+    const [previousCategoryId, setPreviousCategoryId] = useState(categoryId);
+
+    const openDrawer = useCallback(() => {
+        toggleDrawer('filter');
+    }, [toggleDrawer]);
+
     // derive initial state from query params
     // never re-run this effect, even if deps change
     /* eslint-disable react-hooks/exhaustive-deps */
@@ -39,20 +52,70 @@ export const useSearchPage = props => {
     }, []);
     /* eslint-enable react-hooks/exhaustive-deps */
 
-    const apolloQueryVariable = categoryId
-        ? { inputText, categoryId }
-        : { inputText };
+    const pageControl = {
+        currentPage,
+        setPage: setCurrentPage,
+        totalPages
+    };
+
+    let apolloQueryVariable = {
+        currentPage: Number(currentPage),
+        inputText,
+        pageSize: PAGE_SIZE
+    };
+
+    if (categoryId) {
+        apolloQueryVariable = {
+            ...apolloQueryVariable,
+            categoryId
+        };
+    }
 
     const { loading, error, data } = useQuery(query, {
         variables: apolloQueryVariable
     });
 
+    // Set the total number of pages whenever the data changes.
+    useEffect(() => {
+        const totalPagesFromData = data
+            ? data.products.page_info.total_pages
+            : null;
+
+        setTotalPages(totalPagesFromData);
+
+        return () => {
+            setTotalPages(null);
+        };
+    }, [data, setTotalPages]);
+
+    // Reset the current page back to one (1) when the query or category changes.
+    useEffect(() => {
+        if (
+            previousInputText !== inputText ||
+            previousCategoryId !== categoryId
+        ) {
+            // The search term changed.
+            setCurrentPage(1);
+        }
+
+        // And update the state.
+        setPreviousCategoryId(categoryId);
+        setPreviousInputText(inputText);
+    }, [
+        categoryId,
+        inputText,
+        previousCategoryId,
+        previousInputText,
+        setCurrentPage
+    ]);
+
     return {
         loading,
         error,
         data,
         executeSearch,
         categoryId,
-        openDrawer
+        openDrawer,
+        pageControl
     };
 };

packages/venia-ui/lib/components/SearchPage/searchPage.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { shape, string } from 'prop-types';
+
 import { useSearchPage } from '@magento/peregrine/lib/talons/SearchPage/useSearchPage';
 
 import { mergeClasses } from '../../classify';
 import Gallery from '../Gallery';
 import FilterModal from '../FilterModal';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
+import Pagination from '../../components/Pagination';
 import CategoryFilters from './categoryFilters';
 import defaultClasses from './searchPage.css';
 import PRODUCT_SEARCH from '../../queries/productSearch.graphql';
@@ -22,7 +24,8 @@ const SearchPage = props => {
         data,
         executeSearch,
         categoryId,
-        openDrawer
+        openDrawer,
+        pageControl
     } = talonProps;
 
     if (loading) return fullPageLoadingIndicator;
@@ -71,6 +74,9 @@ const SearchPage = props => {
             <section className={classes.gallery}>
                 <Gallery items={items} />
             </section>
+            <section className={classes.pagination}>
+                <Pagination pageControl={pageControl} />
+            </section>
         </article>
     );
 };

packages/venia-ui/lib/queries/productSearch.graphql

@@ -1,5 +1,24 @@
-query productSearch($inputText: String!, $categoryId: String) {
-    products(search: $inputText, filter: { category_id: { eq: $categoryId } }) {
+query productSearch(
+    $currentPage: Int = 1
+    $inputText: String!
+    $pageSize: Int = 6
+    $categoryId: String
+) {
+    products(
+        currentPage: $currentPage
+        pageSize: $pageSize
+        search: $inputText
+        filter: { category_id: { eq: $categoryId } }
+    ) {
+        filters {
+            name
+            filter_items_count
+            request_var
+            filter_items {
+                label
+                value_string
+            }
+        }
         items {
             id
             name
@@ -16,15 +35,9 @@ query productSearch($inputText: String!, $categoryId: String) {
                 }
             }
         }
-        total_count
-        filters {
-            name
-            filter_items_count
-            request_var
-            filter_items {
-                label
-                value_string
-            }
+        page_info {
+            total_pages
         }
+        total_count
     }
 }