Add react-modal, replace confirm usage with it

client/js/components/modals/withModal.js

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import Modal from 'react-modal';
+import { createSelector } from 'reselect';
+import { getModals, closeModal } from 'state/modals';
+import connect from 'utils/connect';
+
+Modal.setAppElement('#root');
+
+export default function withModal({ name, ...modalProps }) {
+  modalProps = {
+    className: {
+      base: `modal modal-${name}`,
+      afterOpen: 'modal-opening',
+      beforeClose: 'modal-closing'
+    },
+    overlayClassName: {
+      base: 'modal-overlay',
+      afterOpen: 'modal-overlay-opening',
+      beforeClose: 'modal-overlay-closing'
+    },
+    closeTimeoutMS: 200,
+    ...modalProps
+  };
+
+  return WrappedComponent => {
+    const ReduxModal = ({ onRequestClose, ...props }) => {
+      const handleRequestClose = useCallback(
+        (dismissed = true) => {
+          onRequestClose();
+
+          if (dismissed && props.payload.onDismiss) {
+            props.payload.onDismiss();
+          }
+        },
+        [props.payload.onDismiss]
+      );
+
+      return (
+        <Modal
+          contentLabel={name}
+          onRequestClose={handleRequestClose}
+          {...modalProps}
+          {...props}
+        >
+          <WrappedComponent onClose={handleRequestClose} {...props} />
+        </Modal>
+      );
+    };
+
+    const mapState = createSelector(
+      getModals,
+      modals => modals[name] || { payload: {} }
+    );
+
+    const mapDispatch = dispatch => ({
+      onRequestClose: () => dispatch(closeModal(name))
+    });
+
+    return connect(
+      mapState,
+      mapDispatch
+    )(ReduxModal);
+  };
+}