From a2ad053808d77e25ea48f98af06fdf168c6a0e1f Mon Sep 17 00:00:00 2001 From: Paul Makles <paulmakles@gmail.com> Date: Sun, 25 Nov 2018 20:31:05 +0000 Subject: [PATCH] Search using TFL api instead --- App.js | 62 +++++++++++++++++++++++----------------------------------- 1 file changed, 25 insertions(+), 37 deletions(-) diff --git a/App.js b/App.js index be98352..1e92a39 100644 --- a/App.js +++ b/App.js @@ -129,6 +129,24 @@ const request = { }) .catch(reject); }); + }, + search: query => { + return new Promise((resolve, reject) => { + fetch('https://api.tfl.gov.uk/StopPoint/Search/' + query) + .then(response => response.json()) + .then(source => { + let data = []; + source.matches.forEach(res => { + data.push({ + id: res.id, + modes: res.modes, + name: res.name, + }); + }); + resolve(data); + }) + .catch(reject); + }); } }; @@ -228,6 +246,7 @@ class TabAbout extends Component { <Text style={{fontSize: 34, textAlign: 'center'}}>About</Text> <Text style={{fontSize: 20, color: '#1a1a1a'}}>Created by Paul Makles (insrt.uk) and built with React Native</Text> <Text style={{fontSize: 20, color: '#1a1a1a'}}>This app serves as an experiment to build a functional and useful tool with React</Text> + <Text style={{fontSize: 20, color: '#1a1a1a'}}>Repository available at gitlab.insrt.uk/insert/bustimes 😊</Text> </View> ); } @@ -273,50 +292,18 @@ class TabSearch extends Component { this.state = { query: '', searching: false, - loaded: false, - rows: 0, results: [], - found: 0, }; } componentDidMount() { this.isCancelled = false; - request.stops().then(data => { - !this.isCancelled && this.setState({ - loaded: true, - rows: data.length, - }); - }); } search() { - if (this.state.query.length < 1) return this.setState({results: [], found: 0}); - !this.isCancelled && this.setState({ - searching: true - }); - request.stops().then(data => { - let fuse = new Fuse(data, { - shouldSort: true, - threshold: 0.6, - location: 0, - distance: 100, - maxPatternLength: 32, - minMatchCharLength: 1, - keys: [ - "name" - ] - }); - let res = fuse.search(this.state.query); - res.forEach((v, i) => { - res[i].i = i; - }); - !this.isCancelled && this.setState({ - found: res.length, - results: res.splice(0, 40), - searching: false - }); - }); + if (this.state.query.length < 1) return this.setState({results: []}); + this.setState({searching: true}); + request.search(this.state.query).then(results => this.setState({results, searching: false})); } componentWillUnmount() { @@ -329,12 +316,13 @@ class TabSearch extends Component { <View style={styles.header_addon}> <TextInput style={{position: 'relative', left: -11, height: 40, backgroundColor: 'white', color: 'black', paddingLeft: 4, paddingRight: 4}} - placeholder={this.state.loaded ? "Search for a bus stop." : "Please wait... loading bus stops."} + placeholder="Search for a bus stop." + editable={!this.state.searching} onChangeText={(query) => this.setState({query})} onSubmitEditing={() => this.search()} /> </View> - <Text style={styles.status}>{this.state.searching ? 'Searching, please wait...' : (this.state.found > 0 ? `Displaying 40 out of ${this.state.found} results.` : `Waiting for input...`)}</Text> + <Text style={styles.status}>{this.state.searching ? 'Searching, please wait...' : (this.state.results.length > 0 ? `Displaying ${this.state.results.length} results.` : `Waiting for input...`)}</Text> <ScrollView style={styles.list}> {Object.keys(this.state.results).map(i => { return (<SearchEntry key={this.state.results[i].id} data={this.state.results[i]} />); -- GitLab