ca49c547d0
* Update Algolio's Instant Search Example - Moved from `getInitialProps` to `getServerSideProps` - Update Algolio libraries Co-authored-by: Arsalan Khattak <akkhattak65@gmail.com> * Shift from SSR to CSR Co-authored-by: Arsalan Khattak <akkhattak65@gmail.com>
81 lines
2 KiB
JavaScript
81 lines
2 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {
|
|
RefinementList,
|
|
SearchBox,
|
|
Hits,
|
|
Configure,
|
|
Highlight,
|
|
Pagination,
|
|
InstantSearch,
|
|
} from 'react-instantsearch-dom'
|
|
import { indexName, searchClient } from './instantsearch'
|
|
|
|
const HitComponent = ({ hit }) => (
|
|
<div className="hit">
|
|
<div>
|
|
<div className="hit-picture">
|
|
<img src={`${hit.image}`} />
|
|
</div>
|
|
</div>
|
|
<div className="hit-content">
|
|
<div>
|
|
<Highlight attribute="name" hit={hit} />
|
|
<span> - ${hit.price}</span>
|
|
<span> - {hit.rating} stars</span>
|
|
</div>
|
|
<div className="hit-type">
|
|
<Highlight attribute="type" hit={hit} />
|
|
</div>
|
|
<div className="hit-description">
|
|
<Highlight attribute="description" hit={hit} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
HitComponent.propTypes = {
|
|
hit: PropTypes.object,
|
|
}
|
|
|
|
export default class App extends React.Component {
|
|
static propTypes = {
|
|
searchState: PropTypes.object,
|
|
resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
onSearchStateChange: PropTypes.func,
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<InstantSearch
|
|
indexName={indexName}
|
|
searchClient={searchClient}
|
|
resultsState={this.props.resultsState}
|
|
onSearchStateChange={this.props.onSearchStateChange}
|
|
searchState={this.props.searchState}
|
|
>
|
|
<Configure hitsPerPage={10} />
|
|
<header>
|
|
<h1>React InstantSearch + Next.Js</h1>
|
|
<SearchBox />
|
|
</header>
|
|
<content>
|
|
<menu>
|
|
<RefinementList attribute="category" />
|
|
</menu>
|
|
<Hits hitComponent={HitComponent} />
|
|
</content>
|
|
<footer>
|
|
<Pagination />
|
|
<div>
|
|
See{' '}
|
|
<a href="https://github.com/algolia/react-instantsearch/tree/master/packages/react-instantsearch/examples/next-app">
|
|
source code
|
|
</a>{' '}
|
|
on github
|
|
</div>
|
|
</footer>
|
|
</InstantSearch>
|
|
)
|
|
}
|
|
}
|