From 152dae91d724ed8f99649544f83c0b124b6f1c1a Mon Sep 17 00:00:00 2001
From: egradanin <ehvan@saburly.com>
Date: Wed, 16 Jan 2019 22:06:06 +0100
Subject: [PATCH] basic notification modal

---
 frontend-react/src/components/App.js          |  6 ++-
 .../src/components/NotificationModal.js       | 52 +++++++++++++++++++
 frontend-react/src/constants/actionTypes.js   |  2 +
 frontend-react/src/reducer.js                 |  4 +-
 frontend-react/src/reducers/modal.js          | 12 +++++
 .../src/utils/notificationmodalwrapper.js     | 19 +++++++
 package-lock.json                             |  3 ++
 7 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 frontend-react/src/components/NotificationModal.js
 create mode 100644 frontend-react/src/reducers/modal.js
 create mode 100644 frontend-react/src/utils/notificationmodalwrapper.js
 create mode 100644 package-lock.json

diff --git a/frontend-react/src/components/App.js b/frontend-react/src/components/App.js
index 1a85898..4a9a176 100644
--- a/frontend-react/src/components/App.js
+++ b/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>
     );
   }
diff --git a/frontend-react/src/components/NotificationModal.js b/frontend-react/src/components/NotificationModal.js
new file mode 100644
index 0000000..ad3a146
--- /dev/null
+++ b/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);
diff --git a/frontend-react/src/constants/actionTypes.js b/frontend-react/src/constants/actionTypes.js
index 77322ed..5799205 100644
--- a/frontend-react/src/constants/actionTypes.js
+++ b/frontend-react/src/constants/actionTypes.js
@@ -2,3 +2,5 @@ export const CATEGORY_SELECT = "CATEGORY_SELECT";
 export const SUBCATEGORY_SELECT = "SUBCATEGORY_SELECT";
 export const OPTION_CHANGE = "OPTION_CHANGE";
 export const ITEMS_CHANGED = "ITEMS_CHANGED";
+export const MODAL_CLOSE = "MODAL_CLOSE";
+export const MODAL_OPEN = " MODAL_OPEN";
diff --git a/frontend-react/src/reducer.js b/frontend-react/src/reducer.js
index 972c8e1..67fedbb 100644
--- a/frontend-react/src/reducer.js
+++ b/frontend-react/src/reducer.js
@@ -2,11 +2,13 @@ import category from "./reducers/category";
 import subcategory from "./reducers/subcategory";
 import options from "./reducers/options";
 import items from "./reducers/items";
+import modal from "./reducers/modal";
 import { combineReducers } from "redux";
 
 export default combineReducers({
   category,
   subcategory,
   options,
-  items
+  items,
+  modal
 });
diff --git a/frontend-react/src/reducers/modal.js b/frontend-react/src/reducers/modal.js
new file mode 100644
index 0000000..9ee95cc
--- /dev/null
+++ b/frontend-react/src/reducers/modal.js
@@ -0,0 +1,12 @@
+import { MODAL_CLOSE, MODAL_OPEN } from "constants/actionTypes";
+
+export default (state = false, action) => {
+  switch (action.type) {
+    case MODAL_CLOSE:
+      return false;
+    case MODAL_OPEN:
+      return true;
+    default:
+      return state;
+  }
+};
diff --git a/frontend-react/src/utils/notificationmodalwrapper.js b/frontend-react/src/utils/notificationmodalwrapper.js
new file mode 100644
index 0000000..d96ff5e
--- /dev/null
+++ b/frontend-react/src/utils/notificationmodalwrapper.js
@@ -0,0 +1,19 @@
+import { connect } from "react-redux";
+import { MODAL_CLOSE, MODAL_OPEN } from "constants/actionTypes";
+
+const mapStateToProps = state => {
+  return {
+    modal: state.modal
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onModalOpen: () => dispatch({ type: MODAL_OPEN }),
+  onModalClose: () => dispatch({ type: MODAL_CLOSE })
+});
+
+export const notificationmodalwrapper = component =>
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(component);
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}