import React, {Component} from 'react';

import {withRouter} from 'react-router';
import {AsyncTypeahead} from 'react-bootstrap-typeahead';
import EUCookie from 'area51-eucookie';
import Navigation from '../Navigation';
import config from 'react-global-configuration';

class HomePage extends Component {

    constructor(props) {
        super(props);
        this.state = {options: []};
    }

    componentDidMount() {
        this.setState({options: []});
    }

    // Perform the query
    search(query, t) {
        fetch(config.get('refUrl') + '/search/' + query)
            .then(resp => resp.json())
            .then(json => t.setState({
                options: json ? json : []
            }))
            .catch((e) => {
                // Retry after 1 second
                setTimeout(() => t.search(query, t), 1000);
            });
    }

    // Handle the selection. Only pass 1 entry to the app
    select(selection, t) {
        if (selection && selection.length === 1) {
            t.props.history.push('/departures/' + selection[0].code)
        }
    }

    render() {
        return (<div>
            <Navigation/>
            <EUCookie/>
            <div className="App-header">
                <h1>Realtime UK Departure Boards</h1>

            </div>
            <div className="App-intro">
                <div className="station-form">
                    <div>
                        <div id="stationlabel" htmlFor="stations">
                            Please enter the station you want to view below:
                        </div>
                        <AsyncTypeahead
                            id="stations"
                            useCache={false}
                            minLength={3}
                            onSearch={query => this.search(query, this)}
                            onChange={selection => this.select(selection, this)}
                            options={this.state.options}
                            placeholder="Type a station name or CRS code"
                            ref={(input) => this.focus = input}
                            filterBy={(o, t) => true}
                        />
                    </div>
                </div>
                <p>
                </p>
                <p>
                    To use simply enter the UK Rail station name in the box above and you will be shown the current
                    boards for that station.
                </p>
                <p>
                    By clicking the destination name on those boards you will be able to view the current progress of
                    that service.
                </p>
            </div>
        </div>);
    }

}

export default withRouter(HomePage);

@@ -2641,32 +2641,582 @@
            %3C/p%3E%0A
+                %3Ch2%3EWhats New%3C/h2%3E%0A                %3Cp%3ESep 2 2019:%3C/p%3E%0A                %3Cul%3E%0A                    %3Cli%3EGeneral performance improvements to reduce amount of network bandwidth used to the client.%3C/li%3E%0A                    %3Cli%3EAbility to limit the number of services returned rather than all services in the next hour.%3C/li%3E%0A                    %3Cli%3ETerminating services are not returned unless you request it in configuration.%3C/li%3E%0A                    %3Cli%3EAbility to use our UAT environment instead of the Live one.%3C/li%3E%0A                %3C/ul%3E%0A
             %3C/di

Add whats new to homepage