import React, { useState } from 'react';
import axios from 'axios';
import Hello from '../components/hello';
import GtfsRt from '../gtfsRtDecode';
import '../style.css';
const Home = () => {
    /*storage*/
    const [vehPos, setVehPos] = useState({});
    /*fetch vehPost in a JavaScript function*/
    const getVehPos = async () => {
        try {
            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
            let url = 'https://soll.vbn.de/vehicle-positions';
	    //let url = 'http://localhost:8080/vehicle-positions';
            const res = await axios.get(url,
					{
					    //responseType: 'arraybuffer'
					    responseType: 'blob'
					});
	    //TODO remove debugging
            if (res.data) {
                //console.log('getVehPos() JSON res: ', JSON.stringify(res));
		console.log('getVehPos() res.data: ', res.data);
		//console.log('getVehPos() JSON res.data: ', JSON.stringify(res.data));
		let feed=GtfsRt.decode(res.data);
            } else {
                console.error('getVehPos() res.data unavailable ');
            }
            /*set state*/
            setVehPos(res.data);
        } catch (err) {
            console.error('err.message: ' + err.message);
        }
    };

    return (
	<>
	    <h2>Home</h2>
	    <h3>(React.js Lambda Function Component)</h3>
	    <Hello msg="Hello World!" />
            <button onClick={getVehPos}>getVehPos</button>
	</>
    );
}

export default Home