import React, { Component } from 'react';
import './App.css';
import { getNearestDepartures } from './APIQuery.js'

var parseTime = function(seconds, isRealTime){
	isRealTime = isRealTime || false;
	return (isRealTime ? ' ' : '~') + (~~(seconds/3600)).toString() + ':' + ((seconds%3600)/60).toString();
}

class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data : {}
		};
	}

	componentDidMount() {
		var self = this;
		getNearestDepartures()
		.then((responseJson) => {self.setState({
			data: responseJson
		})});
	}

	render() {
		if (!this.state.data.hasOwnProperty('nearest')) {
			return <p>No timetable data available.</p>;
		}
		var departureInfo = this.state.data.nearest.edges[3].node.place

		return (
			<ul>
				<li class="route type"> {departureInfo.stoptimes[0].trip.route.mode} </li>
				<li class="stop code"> {departureInfo.stop.name} </li>
				<li class="stop name"> {departureInfo.stop.code} </li>
				<li class="stop platform"> {departureInfo.stop.platformCode} </li>
				<li class="route number"> {departureInfo.stoptimes[0].trip.route.shortName} </li>
				<li class="route destination"> {departureInfo.stoptimes[0].stopHeadsign} </li>
				<li class="route number"> {departureInfo.stoptimes[0].trip.route.shortName} </li>
				<li class="route destination"> {parseTime(departureInfo.stoptimes[0].realtimeArrival, departureInfo.stoptimes[0].realtime)} </li>
			</ul>
		)
	}
}

export default App;

@@ -684,16 +684,21 @@
 tureInfo
+Array
  = this.
@@ -725,10 +725,260 @@
 dges
-%5B3
+.filter(function(a)%7B return a.node.place.stoptimes.length %3E 0; %7D);%0A%09%09departureInfoArray.sort(function(a,b)%7B return (a.node.place.stoptimes%5B0%5D.realtimeArrival) - (b.node.place.stoptimes%5B0%5D.realtimeArrival); %7D);%0A%09%09var departureInfo = departureInfoArray%5B0
 %5D.no

Add filtering and sorting of list