Add react-modal, replace confirm usage with it

client/js/components/modals/Confirm.js

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import withModal from 'components/modals/withModal';
+import Button from 'components/ui/Button';
+
+const Confirm = ({
+  payload: { question, confirmation, onConfirm },
+  onClose
+}) => {
+  const handleConfirm = useCallback(() => {
+    onClose(false);
+    onConfirm();
+  }, []);
+
+  return (
+    <>
+      <p>{question}</p>
+      <Button onClick={handleConfirm}>{confirmation || 'OK'}</Button>
+      <Button category="normal" onClick={onClose}>
+        Cancel
+      </Button>
+    </>
+  );
+};
+
+export default withModal({
+  name: 'confirm'
+})(Confirm);

client/js/components/modals/index.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import Confirm from 'components/modals/Confirm';
+
+const Modals = () => (
+  <>
+    <Confirm />
+  </>
+);
+
+export default memo(Modals, () => true);

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