connecting to remote mysql db, saving market alerts

frontend-react/src/components/App.js

@@ -1,7 +1,11 @@
 import React from "react";
 import Select from "react-select";
 import { connect } from "react-redux";
-import { CATEGORY_SELECT, ITEMS_CHANGED } from "constants/actionTypes";
+import {
+  CATEGORY_SELECT,
+  ITEMS_CHANGED,
+  USER_DATA_CHANGED
+} from "constants/actionTypes";
 import { hoc, areObjectEqual } from "utils/helpers";
 import { createOlxLink } from "utils/createOlxLink";
 import axios from "axios";
@@ -23,13 +27,15 @@ const mapStateToProps = state => {
     category: state.category,
     options: state.options,
     subcategory: state.subcategory,
-    items: state.items
+    items: state.items,
+    userdata: state.userdata
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option }),
-  onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items })
+  onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items }),
+  onUserDataChange: change => dispatch({ type: USER_DATA_CHANGED, ...change })
 });
 
 let lastUpdateTime = null;
@@ -38,13 +44,26 @@ class App extends React.Component {
   componentDidMount() {
     interval = setInterval(() => {
       if (lastUpdateTime && Date.now() - lastUpdateTime > 2000) {
-        const { category, options, subcategory, onItemsChanged } = this.props;
+        const {
+          category,
+          options,
+          subcategory,
+          onItemsChanged,
+          onUserDataChange
+        } = this.props;
         let url = createOlxLink(category, subcategory, options);
         url = encodeURI(url);
+        onUserDataChange({ info: "olx_url", value: url });
         if (url) {
           axios
             .get(`/api/${url}`)
-            .then(response => onItemsChanged(response.data))
+            .then(response => {
+              onItemsChanged(response.data.items);
+              onUserDataChange({
+                info: "last_date",
+                value: response.data.last_date
+              });
+            })
             .catch(error => console.log(error));
         }
         lastUpdateTime = null;
@@ -84,7 +103,6 @@ class App extends React.Component {
           Nekretnine: <DeepCategoryWrapper {...Nekretnine.properties} />
         })}
         <ItemsContainer />
-        <NotificationModal />
         {items.length ? <NotificationModal /> : null}
       </div>
     );

frontend-react/src/components/NotificationModal.js

@@ -1,9 +1,10 @@
 import React from "react";
 import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
+import axios from "axios";
 
 const modalStyle = function() {
-  let top = 50;
-  let left = 50;
+  let top = 20;
+  let left = 20;
 
   return {
     position: "absolute",
@@ -26,6 +27,24 @@ class NotificationModal extends React.Component {
     this.props.onModalClose();
   };
 
+  handleInput = e => {
+    this.props.onUserDataChange({ info: "email", value: e.target.value });
+  };
+
+  handleSaveMarketAlert = () => {
+    const {
+      userdata: { email, last_date, olx_url }
+    } = this.props;
+    axios
+      .post("/api/marketalerts", {
+        email,
+        last_date,
+        olx_url
+      })
+      .then(response => console.log(response.data))
+      .catch(error => console.log(error));
+  };
+
   render() {
     const { modal } = this.props;
 
@@ -35,12 +54,14 @@ class NotificationModal extends React.Component {
 
         <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 />
+            <input
+              type="email"
+              placeholder="email"
+              onChange={this.handleInput}
+            />
+            <button onClick={this.handleSaveMarketAlert}>
+              Save Market Alert
+            </button>
             <button onClick={this.handleClose}>Close Modal</button>
           </div>
         </div>

frontend-react/src/constants/actionTypes.js

@@ -4,3 +4,4 @@ export const OPTION_CHANGE = "OPTION_CHANGE";
 export const ITEMS_CHANGED = "ITEMS_CHANGED";
 export const MODAL_CLOSE = "MODAL_CLOSE";
 export const MODAL_OPEN = " MODAL_OPEN";
+export const USER_DATA_CHANGED = "USER_DATA_CHANGED";

frontend-react/src/reducer.js

@@ -3,6 +3,7 @@ import subcategory from "./reducers/subcategory";
 import options from "./reducers/options";
 import items from "./reducers/items";
 import modal from "./reducers/modal";
+import userdata from "./reducers/userdata";
 import { combineReducers } from "redux";
 
 export default combineReducers({
@@ -10,5 +11,6 @@ export default combineReducers({
   subcategory,
   options,
   items,
-  modal
+  modal,
+  userdata
 });

frontend-react/src/reducers/userdata.js

@@ -0,0 +1,10 @@
+import { USER_DATA_CHANGED } from "constants/actionTypes";
+
+export default (state = {}, action) => {
+  switch (action.type) {
+    case USER_DATA_CHANGED:
+      return { ...state, [action.info]: action.value };
+    default:
+      return state;
+  }
+};

frontend-react/src/utils/notificationmodalwrapper.js

@@ -1,15 +1,21 @@
 import { connect } from "react-redux";
-import { MODAL_CLOSE, MODAL_OPEN } from "constants/actionTypes";
+import {
+  MODAL_CLOSE,
+  MODAL_OPEN,
+  USER_DATA_CHANGED
+} from "constants/actionTypes";
 
 const mapStateToProps = state => {
   return {
-    modal: state.modal
+    modal: state.modal,
+    userdata: state.userdata
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   onModalOpen: () => dispatch({ type: MODAL_OPEN }),
-  onModalClose: () => dispatch({ type: MODAL_CLOSE })
+  onModalClose: () => dispatch({ type: MODAL_CLOSE }),
+  onUserDataChange: change => dispatch({ type: USER_DATA_CHANGED, ...change })
 });
 
 export const notificationmodalwrapper = component =>