Remove histPerPage and rename limitPerRequest into paginationTotalResults (#37)

* Rename limitPerRequest into totalResults

* Fix test:all yarn command

* Remove hitsPerPage parameter

* Update the playgrounds

* Add precision in README

Author: curquiza

README.md

@@ -52,13 +52,19 @@ const searchClient = instantMeiliSearch(
   "https://demos.meilisearch.com",
   "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
   {
-    hitsPerPage: 6, // default: 10
-    limitPerRequest: 30, // default: 50
-    placeholderSearch: false // default: true. Displays documents even when the query is empty.
+    paginationTotalHits: 30, // default: 200.
+    placeholderSearch: false // default: true.
   }
 );
 ```
 
+- `paginationTotalHits` (`200` by default): The total (and finite) number of hits you can browse during pagination.<br>
+It means, by default, you can browse `paginationTotalHits / hitsPerPage = 200 / 20 = 10` pages during pagination.<br>
+By default, `hitsPerPage` is set to `20` but it can be changed with [`InsantSearch.configure`](https://www.algolia.com/doc/api-reference/widgets/configure/js/#examples)<br>
+If the pagination widget is not set, this parameter is ignored.
+
+- `placeholderSearch` (`true` by default). Displays documents even when the query is empty.
+
 ## Example with InstantSearch
 
 The open-source [InstantSearch](https://www.algolia.com/doc/api-reference/widgets/js/) library powered by Algolia provides all the front-end tools you need to highly customize your search bar environment.

examples/express/tests/client.test.js

@@ -5,7 +5,7 @@ describe('Instant MeiliSearch Browser test', () => {
 
   it('Should have generated a instant-meiisearch client and displayed', async () => {
     await expect(page).toMatch(
-      '{"client":{"cancelTokenSource":{"token":{"promise":{}}},"config":{"host":"http://localhost:7700","apiKey":"masterKey"}},"hitsPerPage":10,"limitPerRequest":50,"attributesToHighlight":["*"],"placeholderSearch":true}'
+      '{"client":{"cancelTokenSource":{"token":{"promise":{}}},"config":{"host":"http://localhost:7700","apiKey":"masterKey"}},"attributesToHighlight":["*"],"paginationTotalHits":200,"placeholderSearch":true}'
     )
   })
 })

package.json

@@ -9,7 +9,7 @@
     "test:demo:browser": "yarn --cwd examples/express && yarn --cwd examples/express test",
     "test:demo:nodejs": "node examples/node/index.js",
     "test:demo:esm": "yarn --cwd examples/esm && yarn --cwd examples/esm start",
-    "test:all": "yarn test yarn test:demo",
+    "test:all": "yarn test && yarn test:demo",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint:fix": "eslint --ext .js,.ts,.tsx --fix .",
     "build": "rollup -c rollup.config.js && rollup --environment NODE_ENV:production -c rollup.config.js ",

playgrounds/react/src/App.js

@@ -15,7 +15,10 @@ import instantMeiliSearch from "./instant-meilisearch.js";
 
 const searchClient = instantMeiliSearch(
   "https://demos.meilisearch.com",
-  "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25"
+  "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
+  {
+    paginationTotalHits: 60
+  }
 );
 
 class App extends Component {
@@ -52,7 +55,7 @@ class App extends Component {
           <div className="right-panel">
             <SearchBox />
             <Hits hitComponent={Hit} />
-            <Pagination showLast={true}/>
+            <Pagination showLast={true} />
           </div>
         </InstantSearch>
       </div>

playgrounds/vue/src/App.vue

@@ -41,6 +41,10 @@
           </ais-hits>
 
           <ais-pagination :padding="4" />
+
+          <ais-configure
+            :hits-per-page.camel="6"
+          />
         </div>
       </ais-instant-search>
     </div>
@@ -58,8 +62,7 @@ export default {
         "https://demos.meilisearch.com",
         "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
         {
-          hitsPerPage: 6,
-          limitPerRequest: 100
+          paginationTotalHits: 60
         }
       )
     };

src/index.js

@@ -4,18 +4,20 @@ import { isString, removeUndefinedFromObject } from './utils.js'
 export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
   return {
     client: new MeiliSearch({ host: hostUrl, apiKey: apiKey }),
-    hitsPerPage: options.hitsPerPage || 10,
-    limitPerRequest: options.limitPerRequest || 50,
     attributesToHighlight: ['*'],
+    paginationTotalHits: options.paginationTotalHits || 200,
     placeholderSearch: options.placeholderSearch !== false, // true by default
 
     transformToMeiliSearchParams: function (params) {
+      const limit = this.pagination // if pagination widget is set, use paginationTotalHits as limit
+        ? this.paginationTotalHits
+        : this.hitsPerPage
       const searchInput = {
         q: this.placeholderSearch && params.query === '' ? null : params.query,
         facetsDistribution: params.facets.length ? params.facets : undefined,
         facetFilters: params.facetFilters,
         attributesToHighlight: this.attributesToHighlight,
-        limit: this.limitPerRequest,
+        limit,
       }
       return removeUndefinedFromObject(searchInput)
     },
@@ -43,10 +45,8 @@ export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
     },
 
     parseHits: function (meiliSearchHits, params) {
-      if (params.page !== undefined) {
-        // If there is a pagination widget set
-        const hitsPerPage = this.hitsPerPage
-        const start = params.page * hitsPerPage
+      if (this.pagination) {
+        const start = params.page * this.hitsPerPage
         meiliSearchHits = meiliSearchHits.splice(start, this.hitsPerPage)
       }
 
@@ -65,7 +65,7 @@ export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
     },
 
     paginationParams: function (hitsLength, params) {
-      if (params.page !== undefined) {
+      if (this.pagination) {
         const adjust = hitsLength % this.hitsPerPage === 0 ? 0 : 1
         const nbPages = Math.floor(hitsLength / this.hitsPerPage) + adjust
         return {
@@ -76,7 +76,6 @@ export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
     },
 
     parseMeiliSearchResponse: function (indexUid, meiliSearchResponse, params) {
-      this.hitsPerPage = params.hitsPerPage || this.hitsPerPage
       const {
         exhaustiveFacetsCount,
         exhaustiveNbHits,
@@ -106,8 +105,12 @@ export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
     },
 
     search: async function (requests) {
+      // Params got from InstantSearch
+      const params = requests[0].params
+      this.pagination = params.page !== undefined // If the pagination widget has been set
+      this.hitsPerPage = params.hitsPerPage || 20 // 20 is the MeiliSearch's default limit value. It can be changed with `InsantSearch.configure`.
       // Gets information from IS and transforms it for MeiliSearch
-      const searchInput = this.transformToMeiliSearchParams(requests[0].params)
+      const searchInput = this.transformToMeiliSearchParams(params)
       const indexUid = requests[0].indexName
       // Executes the search with MeiliSearch
       const searchResponse = await this.client

tests/base.test.js

@@ -2,7 +2,7 @@ import instantMeiliSearch from '../src/index'
 
 test('Should test if instantMeiliSearch Client is created correctly', () => {
   const client = instantMeiliSearch('http://localhost:7700', 'masterKey')
-  expect(client.hitsPerPage).toBe(10)
-  expect(client.limitPerRequest).toBe(50)
+  expect(client.paginationTotalHits).toBe(200)
   expect(client.attributesToHighlight[0]).toBe('*')
+  expect(client.placeholderSearch).toBe(true)
 })