Luke Dziurzynski
11/30/2023, 9:08 AMimport React from 'react';
import {
Configure,
DynamicWidgets,
RefinementList,
Highlight,
Hits,
InstantSearch,
Pagination,
SearchBox,
} from 'react-instantsearch';
import process from 'process';
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";
import { Panel } from './Panel';
import type { Hit } from 'instantsearch.js';
import './App.css';
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
server: {
apiKey: process.env.REACT_APP_TYPESENSE_API_KEY,
nodes: [
{
host: "localhost",
port: 8108,
protocol: "http"
}
]
},
additionalSearchParameters: {
query_by: "game,review"
}
});
const searchClient = typesenseInstantsearchAdapter.searchClient;
const future = { preserveSharedStateOnUnmount: true };
export function App() {
return (
<div>
<header className="header">
<h1 className="header-title">
<a href="/">steam-reviews-search</a>
</h1>
<p className="header-subtitle">
using React InstantSearch
</p>
</header>
<div className="container">
<InstantSearch
searchClient={searchClient}
indexName="reviews"
future={future}
>
<Configure hitsPerPage={8} />
<div className="search-panel">
{/* <div className="search-panel__filters">
<DynamicWidgets fallback={RefinementList}></DynamicWidgets>
</div> */}
<div className="search-panel__results">
<SearchBox placeholder="" className="searchbox" />
<Hits hitComponent={Hit} />
<div className="pagination">
<Pagination />
</div>
</div>
</div>
</InstantSearch>
</div>
</div>
);
}
type HitProps = {
hit: Hit;
};
function Hit({ hit }: HitProps) {
return (
<article>
<h1>
<Highlight attribute="game" hit={hit} />
</h1>
<p>
<Highlight attribute="review" hit={hit} />
</p>
</article>
);
}