pagination added

nodejs-retail/samples/interactive-tutorials/search/search-simple-query.js

@@ -14,7 +14,7 @@
 
 'use strict';
 
-async function main(searchQuery, facets, filters) {
+async function main(searchQuery, facets, filters, pageSize, pageOffset) {
   // Call Retail API to search for a products in a catalog using only search query.
 
   // Imports the Google Cloud client library.
@@ -38,7 +38,11 @@ async function main(searchQuery, facets, filters) {
   const visitorId = '12345';
 
   // Maximum number of Products to return.
-  const pageSize = 10;
+  // const pageSize = pageSize;
+
+  // A 0-indexed integer that specifies the current offset in search results.
+  const offset = pageOffset || 0; // TRY DIFFERENT OFFSETS TO SEE DIFFERENT PRODUCTS
+
 
   const IResponseParams = {
     ISearchResult: 0,
@@ -55,6 +59,7 @@ async function main(searchQuery, facets, filters) {
       filter,
       visitorId,
       pageSize,
+      offset,
     };
 
     // Run request

nodejs-retail/server.js

@@ -11,7 +11,7 @@ app.use(bodyParser.json());
 const searchService = require('./samples/interactive-tutorials/search/search-simple-query');
 
 app.get('/search', (req, res) => {
-    const { text, facets, filters } = req.query;
+    const { text, facets, filters, pageSize, pageOffset } = req.query;
     const facetsObj = facets && JSON.parse(facets).map((facet) => ({ facetKey: { key: facet }}));
 
     const filterObj = filters && JSON.parse(filters) || [];
@@ -21,7 +21,7 @@ app.get('/search', (req, res) => {
     });
     filterString = filterString && `(${filterString})`;
 
-    searchService(text, facetsObj, filterString)
+    searchService(text, facetsObj, filterString, pageSize, pageOffset)
         .then(result => {
             return res.send(result);
         })

ulta-beauty/src/client-config.js

 export const CONFIGS = {
     title: 'XYZ Title',
+    client_logo: 'client_logo.png'
 }
 

ulta-beauty/src/components/search-results.js

 import React, { useEffect, useState } from 'react';
 import './search-results.css';
 
-import { Typography, Col, Row, Card, Select, Checkbox, Collapse } from 'antd';
+import { Typography, Col, Row, Card, Select, Checkbox, Collapse, Pagination } from 'antd';
 import { LinkOutlined, FilterFilled  } from '@ant-design/icons';
 const { Meta } = Card;
 const { Panel } = Collapse;
 
-const SearchResults = ({ searchResults, facets, onSelectFacet, onSelectFilter }) => {
+const SearchResults = ({
+    searchResults,
+    facets,
+    totalRecords,
+    pageSize, 
+    onSelectFacet, 
+    onSelectFilter,
+    onChangePageSize,
+    onChangePage
+}) => {
 
     const availabilityMap = new Map();
     availabilityMap.set('IN_STOCK', 'In Stock');
@@ -51,6 +60,14 @@ const SearchResults = ({ searchResults, facets, onSelectFacet, onSelectFilter })
         }
     };
 
+    const _onChangePageSize = (current, pageSize) => {
+        onChangePageSize({ current, pageSize });
+      };
+    
+    const _onChangePage = (current, pageSize) => {
+        onChangePage({ current, pageSize });
+      };
+
     useEffect(() => {
         if (filters != null)
             onSelectFilter(filters);
@@ -109,6 +126,14 @@ const SearchResults = ({ searchResults, facets, onSelectFacet, onSelectFilter })
                                 )
                             }
                         </Row>
+                        <Pagination
+                            pageSize={pageSize}
+                            showSizeChanger
+                            onShowSizeChange={_onChangePageSize}
+                            onChange={_onChangePage}
+                            defaultCurrent={1}
+                            total={totalRecords}
+                        />
                     </Col>
                 </Row>
             }

ulta-beauty/src/components/search.js

@@ -2,18 +2,20 @@ import React, { useEffect, useState } from 'react';
 import SearchResults from './search-results';
 import Loader from './loader';
 import messageService from '../services/MessageService';
+import { CONFIGS } from '../client-config'
 
 import { Button, Input, Col, Row } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
 const Search = () => {
 
-    const INITIAL_STATE = { searchQuery: '', facets: [], filters: null };
+    const INITIAL_STATE = { searchQuery: '', facets: [], filters: null, pageSize: 10, pageOffset: 0 };
 
     const [payload, setPayload] = useState(INITIAL_STATE);
     const [searchResults, setSearchResults] = useState([]);
     const [facets, setfacets] = useState([]);
     const [isLoader, setIsLoader] = useState(false);
+    const [totalRecords, setTotalRecords] = useState(0);
 
     const handleOnChange = (e) => {
         setPayload(prevState => ({
@@ -24,11 +26,12 @@ const Search = () => {
     };
 
     const handleOnSearch = async () => {
-        const { searchQuery, facets, filters } = payload;
+        const { searchQuery, facets, filters, pageSize, pageOffset } = payload;
         if (searchQuery) {
             setIsLoader(true);
             const apiEndpoint = 'https://api-dot-abs-poc-np-prj-01-3f2a.uc.r.appspot.com';
-            const url =  `${apiEndpoint}/search?text=${searchQuery}${facets.length? `&facets=${JSON.stringify(facets)}` : ''}${filters && Object.keys(filters).length? `&filters=${JSON.stringify(filters)}` : ''}`;  
+            // const apiEndpoint = 'http://localhost:8080';
+            const url =  `${apiEndpoint}/search?text=${searchQuery}&pageSize=${pageSize}&pageOffset=${pageOffset}${facets.length? `&facets=${JSON.stringify(facets)}` : ''}${filters && Object.keys(filters).length? `&filters=${JSON.stringify(filters)}` : ''}`;  
             const searchResults = await fetch(url)
                 .then(res => res.json())
                 .then(_res => {
@@ -40,6 +43,7 @@ const Search = () => {
                 .catch(err => console.log(err))
                 .finally(() => setIsLoader(false));
             setSearchResults(searchResults.results?.length ? [...searchResults.results] : []);
+            setTotalRecords(searchResults.totalSize? searchResults.totalSize : 0);
             !Object.keys(filters || {}).length && setfacets(searchResults.facets?.length ? [...searchResults.facets] : []); // for not updating facets while filtering
         }
     };
@@ -64,17 +68,36 @@ const Search = () => {
         }));
     }
 
+    const onChangePageSize = (val) => {
+       const { current, pageSize } = val;
+       setPayload(prevState => ({
+            ...prevState,
+            pageSize: pageSize,
+            pageOffset: pageSize * (current - 1),
+        }));
+      };
+    
+    const onChangePage = (val) => {
+        const { current, pageSize } = val;
+        setPayload(prevState => ({
+            ...prevState,
+            pageOffset: pageSize * (current - 1),
+        }));
+    };
+
     useEffect(() => {
         if (payload.filters != null) {
             handleOnSearch();
         }
-    }, [payload.filters])
+    }, [payload.filters]);
 
     useEffect(() => {
         payload.facets.length ? handleOnSearch() : setfacets([]);
-    }, [payload.facets])
-
+    }, [payload.facets]);
 
+    useEffect(() => {
+        handleOnSearch();
+    }, [payload.pageSize, payload.pageOffset]);
 
     return (
         <>
@@ -95,7 +118,7 @@ const Search = () => {
                                 }}
                                     onClick={() => handleImageClick()}
                                 >
-                                    <img src='ultabeauty.png' alt="google" style={{
+                                    <img src={CONFIGS.client_logo} alt={CONFIGS.title} style={{
                                     }}
                                     />
                                 </span>
@@ -117,9 +140,11 @@ const Search = () => {
                             <Col span={2}>   {isLoader && <Loader />}  </Col>
                         </Row>
                     </div>
-                    <SearchResults searchResults={searchResults} facets={facets}
+                    <SearchResults searchResults={searchResults} facets={facets} totalRecords={totalRecords} pageSize={payload.pageSize}
                         onSelectFacet={(val) => onSelectFacet(val)}
                         onSelectFilter={(val) => onSelectFilter(val)}
+                        onChangePageSize={(val) => onChangePageSize(val)}
+                        onChangePage={(val) => onChangePage(val)}
                     />
                 </>
             }
@@ -133,7 +158,7 @@ const Search = () => {
                         <Col span={12} offset={6}>
                             <div className='App'>
                                 <span>
-                                    <img src='ultabeauty.png' alt="google" style={{
+                                    <img src={CONFIGS.client_logo} alt={CONFIGS.title} style={{
                                         width: '12rem',
                                         height: 'auto',
                                         marginBottom: '2rem'