Search using TFL api instead

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]} />);