old-web/frontend-react/src/components/NotificationModal.js

import React from "react";
import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
import axios from "axios";

const modalStyle = function() {
  let top = 20;
  let left = 20;

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

const buttonStyle = function() {
  return {
    width: "100px",
    margin: "0 auto",
    position: "relative",
    borderRadius: "8px",
    display: "block",
    padding: "10px 10px",
    textAlign: "center",
    marginBottom: "20px",
    color: "white",
    backgroundColor: "#e91e63",
    border: "1px solid #e91e63"
  };
};

class NotificationModal extends React.Component {
  handleOpen = () => {
    this.props.onModalOpen();
  };
  handleClose = () => {
    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;

    return (
      <div>
        <button style={buttonStyle()} onClick={this.handleOpen}>
          Open Modal
        </button>

        <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
          <div>
            <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>
      </div>
    );
  }
}

export default notificationmodalwrapper(NotificationModal);