new modal style and email validation

frontend-react/src/components/NotificationModal.js

@@ -1,39 +1,25 @@
 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";
 
-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"
-  };
-};
+function Transition(props) {
+  return <Slide direction="down" {...props} />;
+}
 
 class NotificationModal extends React.Component {
   handleOpen = () => {
@@ -43,8 +29,27 @@ class NotificationModal extends React.Component {
     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 = () => {
@@ -62,30 +67,105 @@ class NotificationModal extends React.Component {
   };
 
   render() {
-    const { modal } = this.props;
+    const {
+      modal,
+      classes,
+      userdata: { validEmail }
+    } = this.props;
 
     return (
       <div>
-        <button style={buttonStyle()} onClick={this.handleOpen}>
-          Open Modal
+        <button className={classes.buttonStyle} onClick={this.handleOpen}>
+          Napravi notifikaciju
         </button>
-
-        <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
-          <div>
-            <input
-              type="email"
-              placeholder="email"
-              onChange={this.handleInput}
+        <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>}
             />
-            <button onClick={this.handleSaveMarketAlert}>
-              Save Market Alert
-            </button>
-            <button onClick={this.handleClose}>Close Modal</button>
-          </div>
-        </div>
+
+            {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 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 notificationmodalwrapper(NotificationModal);
+export default withStyles(modalStyle)(
+  notificationmodalwrapper(NotificationModal)
+);