Add Test file for trying to access the API, Not successful

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",

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",

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"
                 />
                 */}
+                <AccessToken />
                 <NavigationDrawer />                
                 <Header />
                 <PageArea />

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 (
+      <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>
+      </div>
+    )
+  }
+}
+export default AccessToken
+
+//'https://reqres.in/api/articles'
+
+//'https://api.vasttrafik.se/token'
+
+//grant_type=client_credentials&scope=<device_id>
+
+//BPvMjPidHckBtETZxr3dHP1rptQa
+//z5MFCS_wwmqprc0s4iLZWBAUJdga

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
+export default Button