Add generalized button class

src/components/Button.js

@@ -1,14 +1,31 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 
 class Button extends Component {
-    render() {
+    // Multiple onClick functions
+    onClick = () => {
+        console.log(this.props.onClick);
 
+        if (this.props.onClick !== null
+            && this.props.onClick !== undefined) {
+            if (Array.isArray(this.props.onClick)) {
+                this.props.onClick.forEach(func => {
+                    func();
+                });
+            } else {
+                console.log("Error when parsing Button onClick functions.");
+            }
+        } else {
+            console.log("Error when parsing Button onClick functions.");
+        }
+    }
+
+    render() {
         return (
-            <a href={this.props.destination}>
+            <button onClick={this.onClick}>
-                {this.props.title}
+                {this.props.children}
-            </a>
+            </button>
         );
     }
 }
-// TODO Add css
+
-export default Button
+export default Button;

src/components/DisruptionButton.js

@@ -1,24 +1,29 @@
 import addNotification from "react-push-notification";
 
+import Button from './Button.js';
 import disruptIcon from '../img/flash.svg';
 
-const DisruptionButton = () => {
-  const genDisrupt = () => {
-    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 (
+class DisruptionButton extends Button {
-      <button onClick={genDisrupt} className="disruptBtn">
+	genDisrupt = () => {
-        <img src={disruptIcon} alt="" />
+		addNotification({
-        Generera Störning
+			title: "Warning",
-      </button>
+			subtitle: "This is a subtitle",
-  );
+			message: "This is a very long message",
-};
+			theme: "blue",
+			native: true, // when using native, your OS will handle theming.
+		});
+	}
+
+	render() {
+		return (
+			<Button onClick={this.props.onClick.concat([this.genDisrupt])} className="disruptBtn">
+				<img src={disruptIcon} alt="" />
+				<span>Generera Störning</span>
+			</Button>
+		);
+	}
+}
+
 
 export default DisruptionButton;

src/components/MenuButton.js

@@ -1,20 +1,21 @@
-import React, { Component } from 'react';
+import Button from './Button.js';
 
-class MenuButton extends Component {
+
+class MenuButton extends Button {
     render() {
         if (this.props.childOrderReverse) {
             return (
-                <button>
+                <Button>
                     <span>{this.props.label}</span>
                     <img src={this.props.icon} alt="" />
-                </button>
+                </Button>
             );
         } else {
             return (
-                <button>
+                <Button>
                     <img src={this.props.icon} alt="" />
                     <span>{this.props.label}</span>
-                </button>
+                </Button>
             );
         }
     }

src/components/NavigationDrawer.js

@@ -2,11 +2,18 @@ import React, { Component } from 'react';
 import './css/NavigationDrawer.css';
 
 import DisruptionButton from "./DisruptionButton.js";
+import Popup from './Popup.js';
+import Button from './Button.js';
 
 import userIcon from '../img/user.svg';
 
 
 class NavigationDrawer extends Component {
+    constructor(props) {
+        super(props);
+        this.popupElem = React.createRef();
+    }
+
     state = {
         open: false
     };
@@ -30,9 +37,23 @@ class NavigationDrawer extends Component {
         });
     };
 
+    showPopup = () => {
+        this.popupElem.current.show();
+    };
+
     render() {
         return (
             <>
+                <Popup ref={this.popupElem}>
+                    <h3>Välj hållplats:</h3>
+                    <ul>
+                        <li><Button>Hållplats 1</Button></li>
+                        <li><Button>Hållplats 2</Button></li>
+                        <li><Button>Hållplats 3</Button></li>
+                        <li><Button>Hållplats 4</Button></li>
+                    </ul>
+                </Popup>
+
                 <div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
                     <header>
                         <img src={userIcon} alt="" />
@@ -40,7 +61,7 @@ class NavigationDrawer extends Component {
                         <span>example@gmail.com</span>
                     </header>
                     <div id="navList">
-                        <DisruptionButton />
+                        <DisruptionButton onClick={[this.showPopup, this.close]} />
                     </div>
                     <hr />
                     <span id="version">Projektgrupp 3 - Utmaning 7</span>