import React from 'react';
import ReactDOM from 'react-dom';

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

import './index.css';

const Main = () => (
	<ReactiveBase app="meetup_app" credentials="lW70IgSjr:87c5ae16-73fb-4559-a29e-0a02760d2181">
		<div className="row">
			<div className="col">
				<TagCloud
					title="TagCloud"
					componentId="CitySensor"
					dataField="group.group_city.raw"
					multiSelect
					size={50}
				/>
			</div>
			<div className="col">
				<SelectedFilters />
				<ReactiveList
					componentId="SearchResult"
					dataField="group.group_topics.topic_name_raw"
					title="Results"
					sortBy="asc"
					className="result-list-container"
					from={0}
					size={5}
					innerClass={{
						image: 'meetup-list-image',
					}}
					pagination
					react={{
						and: ['CitySensor'],
					}}
					render={({ data }) => (
						<ReactiveList.ResultListWrapper>
							{data.map(item => (
								<ResultList href={data.event.event_url} key={item._id}>
									<ResultList.Image src={item.member.photo} small />
									<ResultList.Content>
										<ResultList.Title>
											<div className="meetup-title">
												{data.member ? data.member.member_name : ''} is
												going to ${data.event ? data.event.event_name : ''}
											</div>
										</ResultList.Title>
										<ResultList.Description>
											<div className="flex column">
												<div className="meetup-location">
													<span className="location">
														<i className="fas fa-map-marker-alt" />
													</span>
													{data.group ? data.group.group_city : ''}
												</div>
												<div className="flex wrap meetup-topics">
													{data.group.group_topics
														.slice(0, 4)
														.map(tag => (
															<div
																className="meetup-topic"
																key={tag.topic_name}
															>
																{tag.topic_name}
															</div>
														))}
												</div>
											</div>
										</ResultList.Description>
									</ResultList.Content>
								</ResultList>
							))}
						</ReactiveList.ResultListWrapper>
					)}
				/>
			</div>
		</div>
	</ReactiveBase>
);

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

@@ -1009,17 +1009,26 @@
 sultList
- 
+%0A%09%09%09%09%09%09%09%09%09
 href=%7Bda
@@ -1031,24 +1031,38 @@
 =%7Bdata.event
+ && data.event
 .event_url%7D 
@@ -1060,17 +1060,26 @@
 ent_url%7D
- 
+%0A%09%09%09%09%09%09%09%09%09
 key=%7Bite
@@ -1084,16 +1084,25 @@
 tem._id%7D
+%0A%09%09%09%09%09%09%09%09
 %3E%0A%09%09%09%09%09%09
@@ -1814,24 +1814,53 @@
 %09%7Bdata.group
+%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09&& (data.group
 .group_topic
@@ -1860,17 +1860,25 @@
 p_topics
-%0A
+ %7C%7C %5B%5D)%0A%09
 %09%09%09%09%09%09%09%09
@@ -1896,16 +1896,17 @@
 e(0, 4)%0A
+%09
 %09%09%09%09%09%09%09%09
@@ -1944,13 +1944,15 @@
 %09%09%09%09
+%09
 %3Cdiv%0A
+%09
 %09%09%09%09
@@ -2000,24 +2000,25 @@
 %09%09%09%09%09%09%09%09%09%09%09%09
+%09
 key=%7Btag.top
@@ -2033,34 +2033,36 @@
 %0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09
+%09
 %3E%0A
+%09
 %09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09
@@ -2085,39 +2085,41 @@
 %0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09
+%09
 %3C/div%3E%0A
+%09
 %09%09%09%09%09%09%09%09%09%09%09%09%09%09))

tag cloud example (#1341)