Add Access Token class as template for generating future tokens

src/App.js

@@ -18,6 +18,7 @@ class App extends Component {
                 />
                 */}
                 <AccessToken />
+                <NearbyStation />
                 <NavigationDrawer />                
                 <Header />
                 <PageArea />

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',
+    token: 'No Token',
-    responseFromVT: 'No response'
   }
 
   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 })
+  handleFetch = event => {
-      .then(response => {
+    event.preventDefault();
-        this.setState({
+    this.setState({token: globToken})
-          responseFromVT: response.data.access_token,
-          token: 'token sent'
-        })
-      .error(res => {
-        this.setState({
-          responseFromVT: "some error",
-          token: "some error occured"
-        })
-      })
-    })
   }
 
   render() {
     return (
       <div>
         <form onSubmit={this.handleSubmit}>
-          <label>
-            Key:
-            <input type="text" name="token" onChange={this.handleChange} />
-          </label>
           <button type="submit">Get Token</button>
         </form>
-        <h1>
-          {this.state.responseFromVT}
-        </h1>
         <h1>
           {this.state.token}
         </h1>
+        <form onSubmit={this.handleFetch}>
+          <button type="submit">fetch</button>
+        </form>
       </div>
     )
   }
 }
+
 export default AccessToken
-
-//'https://reqres.in/api/articles'
-
-//'https://api.vasttrafik.se/token'
-
-//grant_type=client_credentials&scope=<device_id>
-
-//5ty7gxmAfQlUHDHdm7kgaqXwK5Ia 
-//wpIOURnJJcTtO6rORYmYYPq4wXka 

src/components/NearbyStation.js

@@ -1,28 +1,15 @@
 import React from 'react';
 import axios from 'axios';
 
-/*
-const StopLocation = ({ name, id, lat, long, track }) => (
-    <div>
-        <div>
-            <p>{name}</p>
-            <p>{id}</p>
-            <p>{lat}</p>
-            <p>{lon}</p>
-            <p>{track}</p>
-        </div>
-    </div>
-);
-*/
 class NearbyStation extends React.Component {
     state = {
-        lat: '57.5987',
+        lat: '57.7',
-        long: '11.9454',
+        long: '12.0',
-        token: '2d596c20-a6e7-3272-8df6-51ed2468da63',
         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:
                         <input type="text" name="long" onChange={this.handleChangeLong} />
                     </label>
-                    <button type="submit">Get Token</button>
+                    <label>
+                        Token:
+                        <input type="text" name="token" onChange={this.handleChangeToken} />
+                    </label>
+                    <button type="submit">Stops</button>
                 </form>
                 <h1>
                     {this.state.lat}