blob: e5d3e40b73cb91c2f09b246877fad31089f3c493 (
plain)
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import React, { Component } from 'react';
import update from 'immutability-helper';
import 'whatwg-fetch';
import 'promise-polyfill/src/polyfill';
import './App.css';
import logo from './foursquare.png';
import SearchFilters from './SearchFilters.js';
import SearchResults from './SearchResults.js';
class App extends Component {
constructor(props) {
super(props);
this.handleFilterChange = this.handleFilterChange.bind(this);
this.handleReset = this.handleReset.bind(this);
this.data = [];
this.state = {
'error': null,
'isLoading': true,
'filters': {}
};
}
componentDidMount() {
fetch('https://d22kvuv0c7qr4n.cloudfront.net/data/groups-data.json')
.then(response => response.json())
.then(data => {
this.data = data;
this.originalFilters = data['search-fields'].reduce((a, b) => {
b['value'] = '';
a[b.id] = b;
return a;
}, {});
this.setState({ 'isLoading': false, 'filters': this.originalFilters });
})
.catch(error => this.setState({ error: error, isLoading: false }));
}
handleFilterChange(filter, newValue) {
// Update the value on the filter
this.setState(update(this.state, {
'filters': {
[filter.id]: {
value: { $set: newValue }
}
}
}));
}
handleReset() {
this.setState({'filters': this.originalFilters});
}
matchFilters(entry) {
for (const filterId in this.state.filters) {
const filter = this.state.filters[filterId];
const field = (filterId.startsWith('udf') ? entry.udf : entry)[filter.id];
// Unset filters always match.
if (!filter.value && filter.value !== false) {
continue;
}
// Undefined fields never match.
if (field === undefined) {
return false;
// Boolean field.
} else if (typeof(field) === "boolean") {
if (String(field) !== filter.value) {
return false;
}
// All other fields are expected to be objects with an `id`.
} else if (field.id !== filter.value) {
return false;
}
}
return true;
}
render() {
if (this.state.isLoading) {
return (
<div className="loading">
<img src={logo} alt="" className="spinner" />
<p>LOADING</p>
</div>
);
} else if (this.state.error) {
return (<div className="error">Error: {this.state.error.message}</div>);
}
// Filter the data.
const results = this.data.groups.filter(entry => this.matchFilters(entry));
return (
<div className="App">
<h2>Community Group Search</h2>
<div className="left">
<SearchFilters
filters={this.state.filters}
onChange={this.handleFilterChange}
onReset={this.handleReset}
></SearchFilters>
</div>
<div className="right">
<SearchResults results={results}></SearchResults>
</div>
<div className="clear"></div>
</div>
);
}
}
export default App;
|
