From 66ff07697ffc0f73cfcc7a730a5595bc7cd43567 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 9 May 2018 18:21:54 -0600
Subject: [PATCH] add confirmation modal for external links

---
 src/renderer/component/externalLink/index.js  | 11 ++++++
 src/renderer/component/externalLink/view.jsx  | 34 ++++++++++++++++
 .../component/markdownPreview/view.jsx        | 36 ++++++-----------
 .../modal/modalOpenExternalLink/index.js      | 11 ++++++
 .../modal/modalOpenExternalLink/view.jsx      | 39 +++++++++++++++++++
 src/renderer/modal/modalRouter/view.jsx       |  3 ++
 6 files changed, 109 insertions(+), 25 deletions(-)
 create mode 100644 src/renderer/component/externalLink/index.js
 create mode 100644 src/renderer/component/externalLink/view.jsx
 create mode 100644 src/renderer/modal/modalOpenExternalLink/index.js
 create mode 100644 src/renderer/modal/modalOpenExternalLink/view.jsx

diff --git a/src/renderer/component/externalLink/index.js b/src/renderer/component/externalLink/index.js
new file mode 100644
index 000000000..806dd7499
--- /dev/null
+++ b/src/renderer/component/externalLink/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
+import ExternalLink from './view';
+
+const select = () => ({});
+const perform = dispatch => ({
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
+});
+
+export default connect(select, perform)(ExternalLink);
diff --git a/src/renderer/component/externalLink/view.jsx b/src/renderer/component/externalLink/view.jsx
new file mode 100644
index 000000000..7f2bf9928
--- /dev/null
+++ b/src/renderer/component/externalLink/view.jsx
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import { MODALS } from 'lbry-redux';
+import Button from 'component/button';
+
+type Props = {
+  href?: string,
+  title?: string,
+  children: React.Node,
+  openModal: string => void,
+};
+
+class ExternalLink extends React.PureComponent<Props> {
+  static defaultProps = {
+    href: null,
+    title: null,
+  };
+  render() {
+    const { href, title, children, openModal } = this.props;
+    return href ? (
+      <Button
+        button="link"
+        title={title}
+        onClick={() => openModal({ id: MODALS.CONFIRM_EXTERNAL_LINK }, { url: href })}
+      >
+        {children}
+      </Button>
+    ) : (
+      <span>children</span>
+    );
+  }
+}
+
+export default ExternalLink;
diff --git a/src/renderer/component/markdownPreview/view.jsx b/src/renderer/component/markdownPreview/view.jsx
index 7b1ac6b79..0dc36526f 100644
--- a/src/renderer/component/markdownPreview/view.jsx
+++ b/src/renderer/component/markdownPreview/view.jsx
@@ -2,42 +2,28 @@
 import * as React from 'react';
 import remark from 'remark';
 import reactRenderer from 'remark-react';
-import Button from 'component/button';
+import ExternalLink from 'component/externalLink';
 
-type Props = {
-  children: React.Node,
-};
+type MarkdownProps = { content: string };
+type TitleProps = { children: React.Node };
 
-const TitleMarkdown = (props: Props) => {
+const MarkdownTitle = (props: TitleProps) => {
   const { children } = props;
   return <div className="markdown-preview__title">{children}</div>;
 };
 
-const LinkMarkDown = (props: Props) => {
-  const { children } = props;
-  return (
-    <Button button="link" {...props}>
-      {children}
-    </Button>
-  );
-};
-
-type MarkdownProps = {
-  content: string,
-};
-
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content } = props;
   const remarkOptions = {
     sanatize: true,
     remarkReactComponents: {
-      a: LinkMarkDown,
-      h1: TitleMarkdown,
-      h2: TitleMarkdown,
-      h3: TitleMarkdown,
-      h4: TitleMarkdown,
-      h5: TitleMarkdown,
-      h6: TitleMarkdown,
+      a: ExternalLink,
+      h1: MarkdownTitle,
+      h2: MarkdownTitle,
+      h3: MarkdownTitle,
+      h4: MarkdownTitle,
+      h5: MarkdownTitle,
+      h6: MarkdownTitle,
     },
   };
   return (
diff --git a/src/renderer/modal/modalOpenExternalLink/index.js b/src/renderer/modal/modalOpenExternalLink/index.js
new file mode 100644
index 000000000..6efc9efbe
--- /dev/null
+++ b/src/renderer/modal/modalOpenExternalLink/index.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { doHideNotification } from 'lbry-redux';
+import ModalOpenExternalLink from './view';
+
+const select = () => ({});
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideNotification()),
+});
+
+export default connect(select, perform)(ModalOpenExternalLink);
diff --git a/src/renderer/modal/modalOpenExternalLink/view.jsx b/src/renderer/modal/modalOpenExternalLink/view.jsx
new file mode 100644
index 000000000..ea18032d1
--- /dev/null
+++ b/src/renderer/modal/modalOpenExternalLink/view.jsx
@@ -0,0 +1,39 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import { shell } from 'electron';
+
+type Props = {
+  url: string,
+  closeModal: () => void,
+};
+
+class ModalOpenExternalLink extends React.PureComponent<Props> {
+  openExternalLink() {
+    const { url } = this.props;
+    const { openExternal } = shell;
+    openExternal(url);
+  }
+
+  render() {
+    const { url, closeModal } = this.props;
+    return (
+      <Modal
+        isOpen
+        contentLabel={__('Confirm External Link')}
+        type="confirm"
+        confirmButtonLabel={__('Continue')}
+        onConfirmed={() => this.openExternalLink(url)}
+        onAborted={closeModal}
+      >
+        <p>
+          {__('This link leads to an external website:')}
+          <cite>{url}</cite>
+          {__('LBRY Inc is not responsible for its content, click OK to proceed at your own risk.')}
+        </p>
+      </Modal>
+    );
+  }
+}
+
+export default ModalOpenExternalLink;
diff --git a/src/renderer/modal/modalRouter/view.jsx b/src/renderer/modal/modalRouter/view.jsx
index e425dddf0..8e4402372 100644
--- a/src/renderer/modal/modalRouter/view.jsx
+++ b/src/renderer/modal/modalRouter/view.jsx
@@ -21,6 +21,7 @@ import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalSendTip from '../modalSendTip';
 import ModalPublish from '../modalPublish';
 import ModalSearch from '../modalSearch';
+import ModalOpenExternalLink from '../modalOpenExternalLink';
 
 class ModalRouter extends React.PureComponent {
   constructor(props) {
@@ -155,6 +156,8 @@ class ModalRouter extends React.PureComponent {
         return <ModalPublish {...notificationProps} />;
       case MODALS.SEARCH:
         return <ModalSearch {...notificationProps} />;
+      case MODALS.CONFIRM_EXTERNAL_LINK:
+        return <ModalOpenExternalLink {...notificationProps} />;
       default:
         return null;
     }