Non-existing button

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/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;