Upgrade playgrounds to include keepZeroFacets and multi-index

Author: bidoubiwa

tests/env/react/src/App.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Routes, Route, Outlet } from 'react-router-dom'
 import SingleIndex from './components/SingleIndex'
 import MultiIndex from './components/MultiIndex'
+import SingleMovieIndex from './components/SingleMovieIndex'
 
 import './App.css'
 
@@ -11,6 +12,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<SingleIndex />} />
         <Route path="multi-index" element={<MultiIndex />} />
+        <Route path="movie-index" element={<SingleMovieIndex />} />
       </Routes>
       <Outlet />
     </div>

tests/env/react/src/components/MultiIndex.js

@@ -6,14 +6,16 @@ import {
   Highlight,
   RefinementList,
   Index,
-  Hits,
+  InfiniteHits,
   Pagination,
+  Hits,
 } from 'react-instantsearch-dom'
 import { instantMeiliSearch } from '../../../../../src/index'
 
 const searchClient = instantMeiliSearch('http://localhost:7700', 'masterKey', {
   primaryKey: 'id',
   finitePagination: true,
+  keepZeroFacets: true,
 })
 
 const Hit = ({ hit }) => {
@@ -40,7 +42,7 @@ const MultiIndex = () => (
             <h2 style={{ margin: 0 }}>Genres</h2>
             <RefinementList attribute="genres" />
             <h2 style={{ margin: 0 }}>Color</h2>
-            <RefinementList attribute="color" />
+            <RefinementList attribute="color" operator="and" />
             <h2 style={{ margin: 0 }}>Platforms</h2>
             <RefinementList attribute="platforms" />
           </div>
@@ -62,9 +64,8 @@ const MultiIndex = () => (
             <RefinementList attribute="platforms" />
           </div>
           <div className="right-panel">
-            <Hits hitComponent={Hit} />
+            <InfiniteHits hitComponent={Hit} />
           </div>
-          <Pagination />
         </div>
       </Index>
     </InstantSearch>

tests/env/react/src/components/SingleIndex.js

@@ -2,7 +2,6 @@ import 'instantsearch.css/themes/algolia-min.css'
 import React from 'react'
 import {
   InstantSearch,
-  InfiniteHits,
   SearchBox,
   Stats,
   Highlight,
@@ -11,11 +10,16 @@ import {
   Configure,
   SortBy,
   Snippet,
+  Pagination,
+  Hits,
 } from 'react-instantsearch-dom'
 import { instantMeiliSearch } from '../../../../../src/index'
 
 const searchClient = instantMeiliSearch('http://localhost:7700', 'masterKey', {
   primaryKey: 'id',
+  placeholderSearch: false,
+  finitePagination: true,
+  keepZeroFacets: true,
 })
 
 const SingleIndex = () => (
@@ -58,14 +62,15 @@ const SingleIndex = () => (
         <h2>Misc</h2>
         <RefinementList attribute="misc" />
         <Configure
-          hitsPerPage={6}
+          hitsPerPage={4}
           attributesToSnippet={['description:50']}
           snippetEllipsisText={'...'}
         />
       </div>
       <div className="right-panel">
         <SearchBox />
-        <InfiniteHits hitComponent={Hit} />
+        <Hits hitComponent={Hit} />
+        <Pagination />
       </div>
     </InstantSearch>
   </div>

tests/env/react/src/components/SingleMovieIndex.js

@@ -0,0 +1,62 @@
+import 'instantsearch.css/themes/algolia-min.css'
+import React from 'react'
+import {
+  InstantSearch,
+  InfiniteHits,
+  SearchBox,
+  Stats,
+  Highlight,
+  ClearRefinements,
+  RefinementList,
+} from 'react-instantsearch-dom'
+import { instantMeiliSearch } from '../../../../../src/index'
+
+const searchClient = instantMeiliSearch('http://localhost:7700', 'masterKey', {
+  primaryKey: 'id',
+  keepZeroFacets: true,
+})
+
+const SingleIndex = () => (
+  <div className="ais-InstantSearch">
+    <h1>Meilisearch + React InstantSearch</h1>
+    <h2>Search in movies</h2>
+
+    <InstantSearch indexName="movies" searchClient={searchClient}>
+      <Stats />
+      <div className="left-panel">
+        <ClearRefinements />
+        <h2>Genres</h2>
+        <RefinementList attribute="genres" />
+        <h2>Players</h2>
+        <RefinementList attribute="color" />
+        <h2>Platforms</h2>
+        <RefinementList attribute="platforms" />
+      </div>
+      <div className="right-panel">
+        <SearchBox />
+        <InfiniteHits hitComponent={Hit} />
+      </div>
+    </InstantSearch>
+  </div>
+)
+
+const Hit = ({ hit }) => {
+  return (
+    <div key={hit.id}>
+      <div className="hit-name">
+        <Highlight attribute="title" hit={hit} />
+      </div>
+      <div className="hit-name">
+        <Highlight attribute="genres" hit={hit} />
+      </div>
+      <div className="hit-name">
+        <Highlight attribute="color" hit={hit} />
+      </div>
+      <div className="hit-name">
+        <Highlight attribute="platforms" hit={hit} />
+      </div>
+    </div>
+  )
+}
+
+export default SingleIndex