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

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import Slide from "@material-ui/core/Slide";
import withStyles from "@material-ui/core/styles/withStyles";
import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
import modalStyle from "assets/modalStyle.js";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import Close from "@material-ui/icons/Close";
import Input from "@material-ui/core/Input";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Typography from "@material-ui/core/Typography";
import Tooltip from "@material-ui/core/Tooltip";
import axios from "axios";

function Transition(props) {
  return <Slide direction="down" {...props} />;
}

class NotificationModal extends React.Component {
  handleOpen = () => {
    this.props.onModalOpen();
  };
  handleClose = () => {
    this.props.onModalClose();
  };

  checkEmail = email =>
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );

  handleInput = e => {
    this.props.onUserDataChange({ info: "email", value: e.target.value });
    this.props.onUserDataChange({
      info: "validEmail",
      value: this.checkEmail(e.target.value)
    });
  };

  isChecked = optionName => Boolean(this.props.userdata[optionName]);

  optionChange = optionName => {
    const { userdata } = this.props;
    this.props.onUserDataChange({
      info: optionName,
      value: !userdata[optionName]
    });
  };

  handleSaveMarketAlert = () => {
    const {
      userdata: { email, last_date, olx_url }
    } = this.props;
    axios
      .post("/marketalerts", {
        email,
        last_date,
        olx_url
      })
      .then(response => console.log(response.data))
      .catch(error => console.log(error));
  };

  render() {
    const {
      modal,
      classes,
      userdata: { validEmail }
    } = this.props;

    return (
      <div>
        <button className={classes.buttonStyle} onClick={this.handleOpen}>
          Napravi notifikaciju
        </button>
        <Dialog
          classes={{
            root: classes.center,
            paper: classes.modal
          }}
          open={modal}
          TransitionComponent={Transition}
          keepMounted
          onClose={() => this.handleClose()}
          aria-labelledby="classic-modal-slide-title"
          aria-describedby="classic-modal-slide-description"
        >
          <DialogTitle
            id="classic-modal-slide-title"
            disableTypography
            className={classes.modalHeader}
          >
            <IconButton
              className={classes.modalCloseButton}
              key="close"
              aria-label="Close"
              color="inherit"
              onClick={() => this.handleClose()}
            >
              <Close className={classes.modalClose} />
            </IconButton>
            <h4 className={classes.modalTitle}>Save Market Alert</h4>
          </DialogTitle>
          <DialogContent
            id="classic-modal-slide-description"
            className={classes.modalBody}
          >
            <FormControlLabel
              className={classes.whiteText}
              control={
                <Checkbox
                  className={classes.checkBoxStyle}
                  checked={this.isChecked("emailChecked")}
                  type={"checkbox"}
                  value={""}
                  onChange={() => this.optionChange("emailChecked")}
                />
              }
              label={<Typography style={{ color: "white" }}>Email</Typography>}
            />

            {this.isChecked("emailChecked") ? (
              <Input
                className={classes.inputStyle}
                placeholder="Email"
                inputProps={{
                  "aria-label": "Min"
                }}
                type="email"
                onChange={this.handleInput}
              />
            ) : null}
          </DialogContent>
          <DialogActions className={classes.modalFooter}>
            {validEmail ? (
              <Button
                onClick={this.handleSaveMarketAlert}
                className={classes.saveButton}
              >
                Save
              </Button>
            ) : (
              <Tooltip
                title="Provide a valid email"
                placement="top"
                classes={{ tooltip: classes.tooltip }}
              >
                <div>
                  <Button disabled className={classes.saveButton}>
                    Save
                  </Button>
                </div>
              </Tooltip>
            )}

            <Button
              className={classes.closeButton}
              onClick={() => this.handleClose()}
            >
              Close
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

export default withStyles(modalStyle)(
  notificationmodalwrapper(NotificationModal)
);