-
Notifications
You must be signed in to change notification settings - Fork 17
/
DataController.stories.js
97 lines (90 loc) · 2.36 KB
/
DataController.stories.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
import React, { Component } from "react";
import { ReactiveBase, DataController, ReactiveList, AppbaseSensorHelper as helper } from "@appbaseio/reactivesearch";
export default class DataControllerDefault extends Component {
constructor(props) {
super(props);
this.onData = this.onData.bind(this);
this.CustomQuery = this.CustomQuery.bind(this);
}
componentDidMount() {
helper.ResponsiveStory();
}
CustomQuery(value) {
return {
query: {
match_all: {}
}
};
}
onData(res, err) {
let result = null;
if (res) {
let combineData = res.currentData;
if (res.mode === "historic") {
combineData = res.currentData.concat(res.newData);
} else if (res.mode === "streaming") {
combineData = helper.combineStreamData(res.currentData, res.newData);
}
if (combineData) {
result = combineData.map((markerData, index) => {
let marker = markerData._source;
return this.itemMarkup(marker, markerData);
});
}
}
return result;
}
itemMarkup(marker, markerData) {
return (
<a className="full_row single-record single_record_for_clone"
href="#"
key={markerData._id}>
<div className="text-container full_row" style={{"paddingLeft": "10px"}}>
<div className="text-head text-overflow full_row">
<span className="text-head-info text-overflow">
{marker.name ? marker.name : ""} - {marker.brand ? marker.brand : ""}
</span>
<span className="text-head-city">{marker.brand ? marker.brand : ""}</span>
</div>
<div className="text-description text-overflow full_row">
<ul className="highlight_tags">
{marker.price ? `Priced at $${marker.price}` : "Free Test Drive"}
</ul>
</div>
</div>
</a>
);
}
render() {
return (
<ReactiveBase
app="car-store"
credentials="cf7QByt5e:d2d60548-82a9-43cc-8b40-93cbbe75c34c"
>
<div className="row">
<div className="col s6 col-xs-6">
<DataController
componentId="CustomSensor"
appbaseField="name"
customQuery={this.CustomQuery}
{...this.props}
/>
</div>
<div className="col s6 col-xs-6">
<ReactiveList
componentId="SearchResult"
appbaseField="name"
title="Cars"
from={0}
size={20}
onData={this.onData}
react={{
"and": "CustomSensor"
}}
/>
</div>
</div>
</ReactiveBase>
);
}
}