Add: AccessToken now updated to seperate class

package-lock.json

@@ -3446,6 +3446,15 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6343,6 +6352,12 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -10133,6 +10148,12 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
@@ -12255,6 +12276,11 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-axios": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.3.tgz",
+      "integrity": "sha512-63kY2iupdRgbvPq9G8xmM0NWUnt2Q5YmpotMoLQsxKOzKXKZg2Lo6CzF/bcZvtmv3WnfjBU6Bg8nZQO28eIAZw=="
+    },
     "react-dev-utils": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz",
@@ -12360,6 +12386,16 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-native-push-notification": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-6.1.3.tgz",
+      "integrity": "sha512-qNbFCkObCXwSFQbK6hJyx1Bym1D7V4XM8iN2L6eL3GAdNLmeBTdLdx3mPbKJtuaDJ1+deniFTQ2rz6hU4ELOXA=="
+    },
+    "react-push-notification": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-push-notification/-/react-push-notification-1.3.0.tgz",
+      "integrity": "sha512-hyYKZqwtNOgRP74fAafVIivEr99vUtH0nDgcWkPKd302BhMuUMr5wuuEX236bSbCoM4nxlOge1m0CKIEtWBqLA=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -15252,7 +15288,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -15838,7 +15878,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^12.2.2",
     "axios": "^0.21.0",
     "react": "^17.0.1",
+    "react-axios": "^2.0.3",
     "react-dom": "^17.0.1",
+    "react-native-push-notification": "^6.1.3",
+    "react-push-notification": "^1.3.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "web-vitals": "^0.2.4"

src/App.js

@@ -1,39 +1,39 @@
-import './variables.css';
-import './App.css';
+import "./variables.css";
+import "./App.css";
 
-import React, { Component } from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import React, { Component } from "react";
+import { BrowserRouter as Router, Route } from "react-router-dom";
 
-import NavigationDrawer from './components/NavigationDrawer.js'
-import BottomMenu from './components/BottomMenu.js'
-import AccessToken from './components/AccessToken.js'
-import NearbyStation from './components/NearbyStation';
+import NavigationDrawer from "./components/NavigationDrawer.js";
+import BottomMenu from "./components/BottomMenu.js";
+//import AccessToken from "./components/AccessToken.js";
+import NearbyStation from "./components/NearbyStation";
 
-import Tickets from './components/pages/Tickets.js'; 
-import TicketsBuy from './components/pages/TicketsBuy.js';
-import Travel from './components/pages/Travel.js';
-import TrafficInfo from './components/pages/TrafficInfo.js';
+import Tickets from "./components/pages/Tickets.js";
+import TicketsBuy from "./components/pages/TicketsBuy.js";
+import Travel from "./components/pages/Travel.js";
+import TrafficInfo from "./components/pages/TrafficInfo.js";
+
+import "./variables.css";
 
-import './variables.css';
- 
 class App extends Component {
-    render() {
-        return (
-            <Router>
-                <div className="App"> 
-                    <NavigationDrawer />
+  render() {
+    return (
+      <Router>
+        <div className="App">
+          <NavigationDrawer />
 
-                    <Route path="/" exact component={TicketsBuy} />
-                    <Route path="/tickets" exact component={Tickets} />
-                    <Route path="/ticketsBuy" exact component={TicketsBuy} />
-                    <Route path="/travel" exact component={Travel} />     
-                    <Route path="/traffic" exact component={TrafficInfo} />     
+          <Route path="/" exact component={TicketsBuy} />
+          <Route path="/tickets" exact component={Tickets} />
+          <Route path="/ticketsBuy" exact component={TicketsBuy} />
+          <Route path="/travel" exact component={Travel} />
+          <Route path="/traffic" exact component={TrafficInfo} />
 
-                    <BottomMenu />
-                </div>
-            </Router>
-        );
-    }
+          <BottomMenu />
+        </div>
+      </Router>
+    );
+  }
 }
 
 export default App;

src/classes/AccessToken.js

@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+class AccessToken {
+    credentials = 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth'
+    device = '123'
+
+    constructor() {
+        const headers = {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Authorization': 'Basic ' + this.credentials
+        };
+
+        axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+this.device, {headers} )
+            .then(response => {
+                console.log(response);
+                this.token = response.data.access_token
+        });
+    }
+}
+
+export default AccessToken

src/components/AccessToken.js

@@ -1,65 +0,0 @@
-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',
-  }
-
-  handleChange = event => {
-    this.setState({ token: event.target.value});
-  }
-
-  handleSubmit = event => {
-    event.preventDefault();
-
-    this.setState({
-      credentials: 'Attempting to send token'
-    });
-    GetToken();
-  }
-
-  handleFetch = event => {
-    event.preventDefault();
-    this.setState({token: globToken})
-  }
-
-  render() {
-    return (
-      <div>
-        <form onSubmit={this.handleSubmit}>
-          <button type="submit">Get Token</button>
-        </form>
-        <h1>
-          {this.state.token}
-        </h1>
-        <form onSubmit={this.handleFetch}>
-          <button type="submit">fetch</button>
-        </form>
-      </div>
-    )
-  }
-}
-
-export default AccessToken

src/components/NearbyStation.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import axios from 'axios';
+import AccessToken from '../classes/AccessToken'
 
 class NearbyStation extends React.Component {
     state = {
@@ -7,7 +8,7 @@ class NearbyStation extends React.Component {
         long: '12.0',
         stops: [],
         token: undefined,
-        device: '123',
+        tokenClass: new AccessToken()
     }
 
     handleChangeLat = event => {
@@ -18,15 +19,11 @@ class NearbyStation extends React.Component {
         this.setState({ long: event.target.value});
     }
 
-    handleChangeToken = event => {
-        this.setState({ token: event.target.value})
-    }
-
     handleSubmit = event => {
         event.preventDefault();
 
         const headers = {
-            'Authorization': 'Bearer ' + this.state.token
+            'Authorization': 'Bearer ' + this.state.tokenClass.token
         };
 
         console.log('Attempted connection')
@@ -52,10 +49,6 @@ class NearbyStation extends React.Component {
                         Longitude coord:
                         <input type="text" name="long" onChange={this.handleChangeLong} />
                     </label>
-                    <label>
-                        Token:
-                        <input type="text" name="token" onChange={this.handleChangeToken} />
-                    </label>
                     <button type="submit">Stops</button>
                 </form>
                 <h1>

src/components/pages/Disruption.js

@@ -0,0 +1,23 @@
+import addNotification from "react-push-notification";
+
+const Disruption = () => {
+  const buttonClick = () => {
+    addNotification({
+      title: "Warning",
+      subtitle: "This is a subtitle",
+      message: "This is a very long message",
+      theme: "blue",
+      native: true, // when using native, your OS will handle theming.
+    });
+  };
+
+  return (
+    <div className="page">
+      <button onClick={buttonClick} className="button">
+        Störning
+      </button>
+    </div>
+  );
+};
+
+export default Disruption;

src/components/pages/TrafficInfo.js

@@ -1,38 +1,49 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import Header from '../Header.js';
-import TopMenu from '../TopMenu.js';
-import MainArea from '../MainArea.js';
-import StopTitle from '../StopTitle.js';
-import TrafficList from '../TrafficList.js';
+import Header from "../Header.js";
+import TopMenu from "../TopMenu.js";
+import MainArea from "../MainArea.js";
+import StopTitle from "../StopTitle.js";
+import TrafficList from "../TrafficList.js";
 
-import Stop from '../../classes/Stop.js';
-import Departure from '../../classes/Departure.js';
+import Stop from "../../classes/Stop.js";
+import Departure from "../../classes/Departure.js";
+
+import Disruption from "./Disruption.js";
 
 class TrafficInfo extends Component {
-    render() {
-        let testStop =
-            new Stop(
-                "Lemmingsgatan",
-                ["Läge A", "Läge B", "Läge C"],
-                [
-                    new Departure("519", "Mot Heden", "11:59", "Trafikolycka vid Partille Centrum."),
-                    new Departure("58", "Mot Västra Eriksberg", "12:07")
-                ],
-            );
+  render() {
+    let testStop = new Stop(
+      "Lemmingsgatan",
+      ["Läge A", "Läge B", "Läge C"],
+      [
+        new Departure(
+          "519",
+          "Mot Heden",
+          "11:59",
+          "Trafikolycka vid Partille Centrum."
+        ),
+        new Departure("58", "Mot Västra Eriksberg", "12:07"),
+      ]
+    );
 
-        return (
-            <>
-                <Header title="Trafikinfo" />
-                <TopMenu>
-                    <StopTitle stop={testStop} />
-                </TopMenu>
-                <MainArea>
-                    <TrafficList departures={testStop.departures} />
-                </MainArea>
-            </>
-        );
-    }
+    return (
+      <>
+        <Header title="Trafikinfo" />
+        <TopMenu>
+          <StopTitle stop={testStop} />
+        </TopMenu>
+        <MainArea>
+          <TrafficList departures={testStop.departures} />
+        </MainArea>
+        <Disruption>
+          <button onClick={Disruption} className="button">
+            Störning
+          </button>
+        </Disruption>
+      </>
+    );
+  }
 }
 
-export default TrafficInfo;
+export default TrafficInfo;