basic notification modal

frontend-react/src/components/App.js

@@ -8,8 +8,10 @@ import axios from "axios";
 
 import * as Vozila from "./categories/Vozila";
 import * as Nekretnine from "./categories/Nekretnine";
+
 import DeepCategoryWrapper from "components/widgets/DeepCategoryWrapper";
 import ItemsContainer from "./items/itemscontainer/ItemsContainer";
+import NotificationModal from "./NotificationModal";
 
 const options = [
   { value: "Vozila", label: "Vozila" },
@@ -68,7 +70,7 @@ class App extends React.Component {
   };
 
   render() {
-    const { category } = this.props;
+    const { category, items } = this.props;
 
     return (
       <div>
@@ -82,6 +84,8 @@ class App extends React.Component {
           Nekretnine: <DeepCategoryWrapper {...Nekretnine.properties} />
         })}
         <ItemsContainer />
+        <NotificationModal />
+        {items.length ? <NotificationModal /> : null}
       </div>
     );
   }

frontend-react/src/components/NotificationModal.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
+
+const modalStyle = function() {
+  let top = 50;
+  let left = 50;
+
+  return {
+    position: "absolute",
+    width: 400,
+    zIndex: 1040,
+    top: top + "%",
+    left: left + "%",
+    border: "1px solid #e5e5e5",
+    backgroundColor: "white",
+    boxShadow: "0 5px 15px rgba(0,0,0,.5)",
+    padding: 20
+  };
+};
+
+class NotificationModal extends React.Component {
+  handleOpen = () => {
+    this.props.onModalOpen();
+  };
+  handleClose = () => {
+    this.props.onModalClose();
+  };
+
+  render() {
+    const { modal } = this.props;
+
+    return (
+      <div>
+        <button onClick={this.handleOpen}>Open Modal</button>
+
+        <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
+          <div>
+            <h4 id="modal-label">Text in a modal</h4>
+            <input type="radio" name="send-option" value="Email" />
+            Email
+            <br />
+            <input type="radio" name="send-option" value="SMS" />
+            SMS <br />
+            <button onClick={this.handleClose}>Close Modal</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default notificationmodalwrapper(NotificationModal);