Convert NotificationModal component to use JSX (#7550)

MetaMask · Nov 24, 2019 · d948a3b · d948a3b
1 parent 6e73d2b
commit d948a3b
Showing 1 changed file with 43 additions and 41 deletions.
diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js
@@ -1,8 +1,7 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../store/actions')
+import PropTypes from 'prop-types'
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+import { hideModal } from '../../../store/actions'
 
 class NotificationModal extends Component {
   render () {
@@ -17,41 +16,44 @@ class NotificationModal extends Component {
 
     const showButtons = showCancelButton || showConfirmButton
 
-    return h('div', [
-      h('div.notification-modal__wrapper', {
-      }, [
-
-        h('div.notification-modal__header', {}, [
-          this.context.t(header),
-        ]),
-
-        h('div.notification-modal__message-wrapper', {}, [
-          h('div.notification-modal__message', {}, [
-            this.context.t(message),
-          ]),
-        ]),
-
-        h('div.modal-close-x', {
-          onClick: hideModal,
-        }),
-
-        showButtons && h('div.notification-modal__buttons', [
-
-          showCancelButton && h('div.btn-default.notification-modal__buttons__btn', {
-            onClick: hideModal,
-          }, 'Cancel'),
-
-          showConfirmButton && h('div.button.btn-secondary.notification-modal__buttons__btn', {
-            onClick: () => {
-              onConfirm()
-              hideModal()
-            },
-          }, 'Confirm'),
-
-        ]),
-
-      ]),
-    ])
+    return (
+      <div>
+        <div className="notification-modal__wrapper">
+          <div className="notification-modal__header">
+            {this.context.t(header)}
+          </div>
+          <div className="notification-modal__message-wrapper">
+            <div className="notification-modal__message">
+              {this.context.t(message)}
+            </div>
+          </div>
+          <div className="modal-close-x" onClick={hideModal} />
+          {showButtons && (
+            <div className="notification-modal__buttons">
+              {showCancelButton && (
+                <div
+                  className="btn-default notification-modal__buttons__btn"
+                  onClick={hideModal}
+                >
+                  Cancel
+                </div>
+              )}
+              {showConfirmButton && (
+                <div
+                  className="button btn-secondary notification-modal__buttons__btn"
+                  onClick={() => {
+                    onConfirm()
+                    hideModal()
+                  }}
+                >
+                  Confirm
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    )
   }
 }
 
@@ -68,7 +70,7 @@ NotificationModal.propTypes = {
 const mapDispatchToProps = dispatch => {
   return {
     hideModal: () => {
-      dispatch(actions.hideModal())
+      dispatch(hideModal())
     },
   }
 }