From a4a845ac6745c0f7cd38bd799a0290a962739ecf Mon Sep 17 00:00:00 2001
From: Charlotte Vermandel <charlottevermandel@gmail.com>
Date: Tue, 13 Dec 2022 17:07:58 +0100
Subject: [PATCH] Upgrade playgrounds to include keepZeroFacets and multi-index

---
 tests/env/react/src/App.js                    |  2 +
 tests/env/react/src/components/MultiIndex.js  |  9 +--
 tests/env/react/src/components/SingleIndex.js | 10 ++-
 .../react/src/components/SingleMovieIndex.js  | 62 +++++++++++++++++++
 4 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 tests/env/react/src/components/SingleMovieIndex.js

diff --git a/tests/env/react/src/App.js b/tests/env/react/src/App.js
index cef98d011..efd234b20 100644
--- a/tests/env/react/src/App.js
+++ b/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>
diff --git a/tests/env/react/src/components/MultiIndex.js b/tests/env/react/src/components/MultiIndex.js
index 5da3b349a..61b9d0458 100644
--- a/tests/env/react/src/components/MultiIndex.js
+++ b/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>
diff --git a/tests/env/react/src/components/SingleIndex.js b/tests/env/react/src/components/SingleIndex.js
index cc5b9dc68..76c62ce48 100644
--- a/tests/env/react/src/components/SingleIndex.js
+++ b/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,15 @@ import {
   Configure,
   SortBy,
   Snippet,
+  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 SingleIndex = () => (
@@ -58,14 +61,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>
diff --git a/tests/env/react/src/components/SingleMovieIndex.js b/tests/env/react/src/components/SingleMovieIndex.js
new file mode 100644
index 000000000..119110d3f
--- /dev/null
+++ b/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