From 3a1d06f53afabb507e6493800f2fa433faf6c804 Mon Sep 17 00:00:00 2001 From: williameriksson126 Date: Mon, 23 Nov 2020 16:22:13 +0100 Subject: [PATCH 1/3] Add Test file for trying to access the API, Not successful --- package-lock.json | 8 +++++ package.json | 1 + src/App.js | 2 ++ src/components/AccessToken.js | 63 +++++++++++++++++++++++++++++++++++ src/components/Button.js | 4 +-- 5 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 src/components/AccessToken.js diff --git a/package-lock.json b/package-lock.json index 74b6a04..425547c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3030,6 +3030,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.0.2.tgz", "integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==" }, + "axios": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz", + "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/package.json b/package.json index f7be157..d341339 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.1.2", "@testing-library/user-event": "^12.2.2", + "axios": "^0.21.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0", diff --git a/src/App.js b/src/App.js index 4d2f271..575611b 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import NavigationDrawer from './components/NavigationDrawer.js' import Header from './components/Header.js' import PageArea from './components/PageArea.js' import BottomMenu from './components/BottomMenu.js' +import AccessToken from './components/AccessToken.js' class App extends Component { render() { @@ -15,6 +16,7 @@ class App extends Component { destination = "placeholderDestination" /> */} +
diff --git a/src/components/AccessToken.js b/src/components/AccessToken.js new file mode 100644 index 0000000..0086423 --- /dev/null +++ b/src/components/AccessToken.js @@ -0,0 +1,63 @@ +import React from 'react'; +import axios from 'axios'; + +class AccessToken extends React.Component { + state = { + token: 'No token', + responseFromVT: 'No response' + } + + handleChange = event => { + this.setState({ token: event.target.value}); + } + + handleSubmit = event => { + event.preventDefault(); + + const headers = { + 'Content-Type': 'application/x-www-form-urlencoded', + 'Authorization': 'Basic ' + this.state.token + }; + this.setState({ + token: 'Attempting to send token' + }) + + axios.post('https://api.vasttrafik.se/token', { headers }) + .then(response => { + this.setState({ + responseFromVT: response.data.access_token, + token: 'token sent' + }) + }) + } + + render() { + return ( +
+
+ + +
+

+ {this.state.responseFromVT} +

+

+ {this.state.token} +

+
+ ) + } +} +export default AccessToken + +//'https://reqres.in/api/articles' + +//'https://api.vasttrafik.se/token' + +//grant_type=client_credentials&scope= + +//BPvMjPidHckBtETZxr3dHP1rptQa +//z5MFCS_wwmqprc0s4iLZWBAUJdga \ No newline at end of file diff --git a/src/components/Button.js b/src/components/Button.js index faf530c..d6c6a90 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react' +import React, {Component} from 'react'; class Button extends Component { render() { @@ -11,4 +11,4 @@ class Button extends Component { } } // TODO Add css -export default Button \ No newline at end of file +export default Button From 51e91981e699c14b400564f2b0d71bee861aec17 Mon Sep 17 00:00:00 2001 From: williameriksson126 Date: Tue, 24 Nov 2020 11:54:59 +0100 Subject: [PATCH 2/3] Add NearbyStation class is a form that given latitude and longitude coordinates gives nearby locations --- src/App.js | 1 + src/components/AccessToken.js | 10 +++- src/components/NearbyStation.js | 101 ++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 src/components/NearbyStation.js diff --git a/src/App.js b/src/App.js index 575611b..c603e2d 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import Header from './components/Header.js' import PageArea from './components/PageArea.js' import BottomMenu from './components/BottomMenu.js' import AccessToken from './components/AccessToken.js' +import NearbyStation from './components/NearbyStation'; class App extends Component { render() { diff --git a/src/components/AccessToken.js b/src/components/AccessToken.js index 0086423..b0014f1 100644 --- a/src/components/AccessToken.js +++ b/src/components/AccessToken.js @@ -28,6 +28,12 @@ class AccessToken extends React.Component { responseFromVT: response.data.access_token, token: 'token sent' }) + .error(res => { + this.setState({ + responseFromVT: "some error", + token: "some error occured" + }) + }) }) } @@ -59,5 +65,5 @@ export default AccessToken //grant_type=client_credentials&scope= -//BPvMjPidHckBtETZxr3dHP1rptQa -//z5MFCS_wwmqprc0s4iLZWBAUJdga \ No newline at end of file +//5ty7gxmAfQlUHDHdm7kgaqXwK5Ia +//wpIOURnJJcTtO6rORYmYYPq4wXka \ No newline at end of file diff --git a/src/components/NearbyStation.js b/src/components/NearbyStation.js new file mode 100644 index 0000000..2e50077 --- /dev/null +++ b/src/components/NearbyStation.js @@ -0,0 +1,101 @@ +import React from 'react'; +import axios from 'axios'; + +/* +const StopLocation = ({ name, id, lat, long, track }) => ( +
+
+

{name}

+

{id}

+

{lat}

+

{lon}

+

{track}

+
+
+); +*/ +class NearbyStation extends React.Component { + state = { + lat: '57.5987', + long: '11.9454', + token: '2d596c20-a6e7-3272-8df6-51ed2468da63', + stops: [], + } + + + handleChangeLat = event => { + this.setState({ lat: event.target.value}); + } + + handleChangeLong = event => { + this.setState({ long: event.target.value}); + } + + handleSubmit = event => { + event.preventDefault(); + + const headers = { + 'Authorization': 'Bearer ' + this.state.token + }; + + console.log('Attempted connection') + + axios.get('https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat='+this.state.lat+'&originCoordLong='+this.state.long+'&maxNo=20&format=json', { headers }) + .then(response => { + console.log(response.data.LocationList.StopLocation) + this.setState({ + stops: response.data.LocationList.StopLocation, + }) + }) + } + + render() { + return ( +
+
+ + + +
+

+ {this.state.lat} +

+

+ {this.state.long} +

+ {this.state.stops.map((item) => +
+

+ {item.name}, + {item.id}, + {item.lat}, + {item.lon}, + {item.track} +

+
+ )} +
+ ) + } +} +export default NearbyStation + +//https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat=57.5987&originCoordLong=11.9454&maxNo=20&format=json + +//https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops + + +//'https://reqres.in/api/articles' + +//'https://api.vasttrafik.se/token' + +//grant_type=client_credentials&scope= + +//BPvMjPidHckBtETZxr3dHP1rptQa +//z5MFCS_wwmqprc0s4iLZWBAUJdga \ No newline at end of file From 12b43e3d61568525d6a7e3164fd80d694c97286f Mon Sep 17 00:00:00 2001 From: williameriksson126 Date: Fri, 27 Nov 2020 09:27:54 +0100 Subject: [PATCH 3/3] Add Access Token class as template for generating future tokens --- src/App.js | 1 + src/components/AccessToken.js | 70 ++++++++++++++++----------------- src/components/NearbyStation.js | 31 ++++++--------- 3 files changed, 47 insertions(+), 55 deletions(-) diff --git a/src/App.js b/src/App.js index c603e2d..cb33b50 100644 --- a/src/App.js +++ b/src/App.js @@ -18,6 +18,7 @@ class App extends Component { /> */} +
diff --git a/src/components/AccessToken.js b/src/components/AccessToken.js index b0014f1..7201228 100644 --- a/src/components/AccessToken.js +++ b/src/components/AccessToken.js @@ -1,10 +1,30 @@ import React from 'react'; import axios from 'axios'; +var globToken = '' + +const GetToken = () => { + const vars = { + credentials: 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth', + token: undefined, + device: '123', + } + + const headers = { + 'Content-Type': 'application/x-www-form-urlencoded', + 'Authorization': 'Basic ' + vars.credentials + }; + + axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+vars.device, { headers }) + .then(response => { + console.log(response); + globToken = response.data.access_token + }); +} + class AccessToken extends React.Component { state = { - token: 'No token', - responseFromVT: 'No response' + token: 'No Token', } handleChange = event => { @@ -14,56 +34,32 @@ class AccessToken extends React.Component { handleSubmit = event => { event.preventDefault(); - const headers = { - 'Content-Type': 'application/x-www-form-urlencoded', - 'Authorization': 'Basic ' + this.state.token - }; this.setState({ - token: 'Attempting to send token' - }) + credentials: 'Attempting to send token' + }); + GetToken(); + } - axios.post('https://api.vasttrafik.se/token', { headers }) - .then(response => { - this.setState({ - responseFromVT: response.data.access_token, - token: 'token sent' - }) - .error(res => { - this.setState({ - responseFromVT: "some error", - token: "some error occured" - }) - }) - }) + handleFetch = event => { + event.preventDefault(); + this.setState({token: globToken}) } render() { return (
-
-

- {this.state.responseFromVT} -

{this.state.token}

+
+ +
) } } + export default AccessToken - -//'https://reqres.in/api/articles' - -//'https://api.vasttrafik.se/token' - -//grant_type=client_credentials&scope= - -//5ty7gxmAfQlUHDHdm7kgaqXwK5Ia -//wpIOURnJJcTtO6rORYmYYPq4wXka \ No newline at end of file diff --git a/src/components/NearbyStation.js b/src/components/NearbyStation.js index 2e50077..bd48b26 100644 --- a/src/components/NearbyStation.js +++ b/src/components/NearbyStation.js @@ -1,28 +1,15 @@ import React from 'react'; import axios from 'axios'; -/* -const StopLocation = ({ name, id, lat, long, track }) => ( -
-
-

{name}

-

{id}

-

{lat}

-

{lon}

-

{track}

-
-
-); -*/ class NearbyStation extends React.Component { state = { - lat: '57.5987', - long: '11.9454', - token: '2d596c20-a6e7-3272-8df6-51ed2468da63', + lat: '57.7', + long: '12.0', stops: [], + token: undefined, + device: '123', } - handleChangeLat = event => { this.setState({ lat: event.target.value}); } @@ -31,6 +18,10 @@ class NearbyStation extends React.Component { this.setState({ long: event.target.value}); } + handleChangeToken = event => { + this.setState({ token: event.target.value}) + } + handleSubmit = event => { event.preventDefault(); @@ -61,7 +52,11 @@ class NearbyStation extends React.Component { Longitude coord: - + +

{this.state.lat}