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

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

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
 });

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;
+  }
+};

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

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}