Skip to content

Instantly share code, notes, and snippets.

@siddharthlatest
Last active January 3, 2018 01:57
Show Gist options
  • Save siddharthlatest/c3827075299ed910121c7d81dd7644ff to your computer and use it in GitHub Desktop.
Save siddharthlatest/c3827075299ed910121c7d81dd7644ff to your computer and use it in GitHub Desktop.
booksearch app UI
import React, { Component } from 'react';
import {
ReactiveBase,
DataSearch,
SingleRange,
ResultCard
} from '@appbaseio/reactivesearch';
import './App.css';
class App extends Component {
render() {
return (
<ReactiveBase
app="good-books-ds"
credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
>
<div className="navbar">
<div className="logo">
The Booksearch App
</div>
<DataSearch
componentId="mainSearch"
dataField={["original_title", "original_title.search", "authors", "authors.search"]}
queryFormat="and"
placeholder="Search for a book title or an author"
autosuggest={false}
className="datasearch"
innerClass={{
"input": "searchbox",
"list": "suggestionlist"
}}
/>
</div>
<div className={"display"}>
<div className={"leftSidebar"}>
<SingleRange
componentId="ratingsFilter"
dataField="average_rating_rounded"
title="Book Ratings"
data={[
{ start: 4, end: 5, label: "★★★★ & up" },
{ start: 3, end: 5, label: "★★★ & up" },
{ start: 2, end: 5, label: "★★ & up" },
{ start: 1, end: 5, label: "★ & up" },
]}
/>
</div>
<div className={"mainBar"}>
<ResultCard
componentId="results"
dataField="original_title"
react={{
"and": ["mainSearch", "ratingsFilter"]
}}
pagination={true}
size={8}
onData={(res)=>(
{
"image": res.image,
"title": res.original_title,
"description": res.average_rating + " ★ "
}
)}
className="result-data"
innerClass={{
"image": "result-image",
"resultStats": "result-stats"
}}
/>
</div>
</div>
</ReactiveBase>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment