/
index.js
99 lines (91 loc) · 2.35 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ReactiveBase, TextField, ResultList, SelectedFilters } from '@appbaseio/reactivesearch';
import './index.css';
class Main extends Component {
render() {
return (
<ReactiveBase
app="good-books-ds"
credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
>
<div className="row">
<div className="col">
<TextField
dataField="original_title.search"
componentId="BookSensor"
defaultSelected="Artemis Fowl"
/>
</div>
<div className="col">
<SelectedFilters
render={(props) => {
const { selectedValues, setValue } = props;
const clearFilter = (component) => {
setValue(component, null);
};
const filters = Object.keys(selectedValues).map((component) => {
if (!selectedValues[component].value) return null;
return (
<button
key={component}
onClick={() => clearFilter(component)}
>
{selectedValues[component].value}
</button>
);
});
return filters;
}}
/>
<ResultList
componentId="SearchResult"
dataField="original_title"
from={0}
size={3}
onData={this.booksList}
className="result-list-container"
pagination
react={{
and: 'BookSensor',
}}
/>
</div>
</div>
</ReactiveBase>
);
}
booksList(data) {
return {
title: (
<div
className="book-title"
dangerouslySetInnerHTML={{ __html: data.original_title }}
/>
),
description: (
<div className="flex column justify-space-between">
<div>
<div>
by <span className="authors-list">{data.authors}</span>
</div>
<div className="ratings-list flex align-center">
<span className="stars">
{Array(data.average_rating_rounded)
.fill('x')
.map((item, index) => (
<i className="fas fa-star" key={index} />
)) // eslint-disable-line
}
</span>
<span className="avg-rating">({data.average_rating} avg)</span>
</div>
</div>
<span className="pub-year">Pub {data.original_publication_year}</span>
</div>
),
image: data.image,
};
}
}
ReactDOM.render(<Main />, document.getElementById('root'));