185 |
(this.mapContainer = el)}
187 | className="absolute top right left bottom"
188 | />
189 |
190 | );
191 | }
192 | }
193 |
194 | export default Map;
195 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import "./App.css";
3 | import Map from "./components/Map";
4 | import ReviewSummary from "./components/ReviewSummary";
5 | import CategorySummary from "./components/CategorySummary";
6 | import neo4j from "neo4j-driver/lib/browser/neo4j-web";
7 | import { Date } from "neo4j-driver/lib/v1/temporal-types";
8 | import moment from "moment";
9 |
10 | class App extends Component {
11 | constructor(props) {
12 | super(props);
13 | let focusedInput = null;
14 |
15 | this.state = {
16 | focusedInput,
17 | startDate: moment("2014-01-01"),
18 | endDate: moment("2018-01-01"),
19 | businesses: [],
20 | starsData: [],
21 | reviews: [{ day: "2018-01-01", value: 10 }],
22 | categoryData: [],
23 | selectedBusiness: false,
24 | mapCenter: {
25 | latitude: 33.45891430753237,
26 | longitude: -112.06830118178001,
27 | radius: 1.5,
28 | zoom: 14
29 | }
30 | };
31 |
32 | this.driver = neo4j.driver(
33 | process.env.REACT_APP_NEO4J_URI,
34 | neo4j.auth.basic(
35 | process.env.REACT_APP_NEO4J_USER,
36 | process.env.REACT_APP_NEO4J_PASSWORD
37 | ),
38 | { encrypted: true }
39 | );
40 | this.fetchBusinesses();
41 | this.fetchCategories();
42 | }
43 |
44 | onDatesChange = ({ startDate, endDate }) => {
45 | if (startDate && endDate) {
46 | this.setState(
47 | {
48 | startDate,
49 | endDate
50 | },
51 | () => {
52 | this.fetchBusinesses();
53 | this.fetchCategories();
54 | }
55 | );
56 | } else {
57 | this.setState({
58 | startDate,
59 | endDate
60 | });
61 | }
62 | };
63 |
64 | onFocusChange = focusedInput => this.setState({ focusedInput });
65 |
66 | businessSelected = b => {
67 | this.setState({
68 | selectedBusiness: b
69 | });
70 | };
71 |
72 | mapSearchPointChange = viewport => {
73 | this.setState({
74 | mapCenter: {
75 | ...this.state.mapCenter,
76 | latitude: viewport.latitude,
77 | longitude: viewport.longitude,
78 | zoom: viewport.zoom
79 | }
80 | });
81 | };
82 |
83 | fetchCategories = () => {
84 | const { mapCenter, startDate, endDate } = this.state;
85 | const session = this.driver.session();
86 |
87 | session
88 | .run(
89 | `MATCH (b:Business)<-[:REVIEWS]-(r:Review)
90 | WHERE $start <= r.date <= $end AND distance(b.location, point({latitude: $lat, longitude: $lon})) < ($radius * 1000)
91 | WITH DISTINCT b
92 | OPTIONAL MATCH (b)-[:IN_CATEGORY]->(c:Category)
93 | WITH c.name AS cat, COUNT(b) AS num ORDER BY num DESC LIMIT 25
94 | RETURN COLLECT({id: cat, label: cat, value: toFloat(num)}) AS categoryData
95 | `,
96 | {
97 | lat: mapCenter.latitude,
98 | lon: mapCenter.longitude,
99 | radius: mapCenter.radius,
100 | start: new Date(
101 | startDate.year(),
102 | startDate.month() + 1,
103 | startDate.date()
104 | ),
105 | end: new Date(endDate.year(), endDate.month() + 1, endDate.date())
106 | }
107 | )
108 | .then(result => {
109 | console.log(result);
110 | const categoryData = result.records[0].get("categoryData");
111 | this.setState({
112 | categoryData
113 | });
114 | session.close();
115 | })
116 | .catch(e => {
117 | console.log(e);
118 | session.close();
119 | });
120 | };
121 |
122 | fetchBusinesses = () => {
123 | const { mapCenter, startDate, endDate } = this.state;
124 | const session = this.driver.session();
125 | session
126 | .run(
127 | `
128 | MATCH (b:Business)<-[:REVIEWS]-(r:Review)
129 | WHERE $start <= r.date <= $end AND distance(b.location, point({latitude: $lat, longitude: $lon})) < ( $radius * 1000)
130 | OPTIONAL MATCH (b)-[:IN_CATEGORY]->(c:Category)
131 | WITH r,b, COLLECT(c.name) AS categories
132 | WITH COLLECT(DISTINCT b {.*, categories}) AS businesses, COLLECT(DISTINCT r) AS reviews
133 | UNWIND reviews AS r
134 | WITH businesses, r.stars AS stars, COUNT(r) AS num ORDER BY stars
135 | WITH businesses, COLLECT({stars: toString(stars), count:toFloat(num)}) AS starsData
136 | RETURN businesses, starsData`,
137 | {
138 | lat: mapCenter.latitude,
139 | lon: mapCenter.longitude,
140 | radius: mapCenter.radius,
141 | start: new Date(
142 | startDate.year(),
143 | startDate.month() + 1,
144 | startDate.date()
145 | ),
146 | end: new Date(endDate.year(), endDate.month() + 1, endDate.date())
147 | }
148 | )
149 | .then(result => {
150 | console.log(result);
151 | const record = result.records[0];
152 | const businesses = record.get("businesses");
153 | const starsData = record.get("starsData");
154 |
155 | this.setState({
156 | businesses,
157 | starsData
158 | });
159 | session.close();
160 | })
161 | .catch(e => {
162 | // TODO: handle errors.
163 | console.log(e);
164 | session.close();
165 | });
166 | };
167 |
168 | componentDidUpdate = (prevProps, prevState) => {
169 | if (
170 | this.state.mapCenter.latitude !== prevState.mapCenter.latitude ||
171 | this.state.mapCenter.longitude !== prevState.mapCenter.longitude
172 | ) {
173 | this.fetchBusinesses();
174 | this.fetchCategories();
175 | }
176 | if (
177 | this.state.selectedBusiness &&
178 | (!prevState.selectedBusiness ||
179 | this.state.selectedBusiness.id !== prevState.selectedBusiness.id ||
180 | false ||
181 | false)
182 | ) {
183 | }
184 | };
185 |
186 | handleSubmit = () => {};
187 |
188 | radiusChange = e => {
189 | this.setState(
190 | {
191 | mapCenter: {
192 | ...this.state.mapCenter,
193 | radius: Number(e.target.value)
194 | }
195 | },
196 | () => {
197 | this.fetchBusinesses();
198 | this.fetchCategories();
199 | }
200 | );
201 | };
202 |
203 | dateChange = e => {
204 | if (e.target.id === "timeframe-start") {
205 | this.setState(
206 | {
207 | startDate: moment(e.target.value)
208 | },
209 | () => {
210 | this.fetchBusinesses();
211 | this.fetchCategories();
212 | }
213 | );
214 | } else if (e.target.id === "timeframe-end") {
215 | this.setState(
216 | {
217 | endDate: moment(e.target.value)
218 | },
219 | () => {
220 | this.fetchBusinesses();
221 | this.fetchCategories();
222 | }
223 | );
224 | }
225 | };
226 |
227 | render() {
228 | return (
229 |
230 |
322 |
333 |
334 |
365 |
366 | );
367 | }
368 | }
369 |
370 | export default App;
371 |
--------------------------------------------------------------------------------