connecting to remote mysql db, saving market alerts

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>