import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
	ReactiveBase,
	DatePicker,
	ReactiveList,
	SelectedFilters,
} from '@appbaseio/reactivesearch';

import './index.css';

class Main extends Component {
	render() {
		return (
			<ReactiveBase
				app="gitxplore-live"
				credentials="bYTSo47tj:d001826a-f4ef-42c5-b0aa-a94f29967ba0"
				theme={{
					primaryColor: 'mediumseagreen',
				}}
			>
				<div className="row">
					<div className="col">
						<DatePicker
							componentId="DatePickerComponent"
							dataField="pushed"
							queryFormat="date_time_no_millis"
							title="Date Picker"
							initialMonth={new Date('2017-04-07')}
							URLParams
						/>
					</div>

					<div className="col">
						<SelectedFilters />
						<ReactiveList
							dataField="name"
							componentId="ReactiveList"
							size={20}
							from={0}
							onData={this.onData}
							pagination
							defaultQuery={() => ({
								query: {
									match_all: {},
								},
								sort: {
									stars: { order: 'desc' },
								},
							})}
							react={{
								and: ['DatePickerComponent'],
							}}
						/>
					</div>
				</div>
			</ReactiveBase>
		);
	}

	onData(data) {
		return (
			<div key={data._id}>
				<h2>{data.owner}/{data.name}</h2>
				<h4>{data.stars} <span role="img" aria-label="stars">🌟</span></h4>
			</div>
		);
	}
}

ReactDOM.render(<Main />, document.getElementById('root'));

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
	ReactiveBase,
	DatePicker,
	ResultCard,
	SelectedFilters,
} from '@appbaseio/reactivesearch';

import './index.css';

class Main extends Component {
	render() {
		return (
			<ReactiveBase
				app="housing"
				credentials="0aL1X5Vts:1ee67be1-9195-4f4b-bd4f-a91cd1b5e4b5"
				type="listing"
			>
				<div className="row">
					<div className="col">
						<DatePicker
							componentId="DateSensor"
							dataField="date_from"
							customQuery={this.dateQuery}
							initialMonth={this.props.defaultSelected ? null : new Date('2017-05-05')}
							{...this.props}
						/>
					</div>

					<div className="col">
						<SelectedFilters componentId="DateSensor" />
						<ResultCard
							componentId="SearchResult"
							dataField="name"
							from={0}
							size={40}
							onData={this.onData}
							showPagination
							react={{
								and: ['DateSensor'],
							}}
						/>
					</div>
				</div>
			</ReactiveBase>
		);
	}

	dateQuery(value, props) {
		let query = null;
		if (value) {
			query = [
				{
					range: {
						[props.dataField]: {
							lte: moment(value).format('YYYYMMDD'),
						},
					},
				},
			];
		}
		return query;
	}

	onData(res) {
		return {
			image: res.image,
			title: res.name,
			description: (
				<div>
					<div>${res.price}</div>
					<span style={{ backgroundImage: `url(${res.host_image})` }} />
					<p>{res.room_type} · {res.accommodates} guests</p>
				</div>
			),
			url: res.listing_url,
		};
	}
}

ReactDOM.render(<Main />, document.getElementById('root'));

Update DatePicker example app