From 63cc33aa6756292ef81cee5f2e7e42f1253a69d6 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 +-- .../react/src/components/SingleMovieIndex.js | 62 +++++++++++++++++++ 3 files changed, 69 insertions(+), 4 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/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