From d0e3dd8f990a438e3177f6b770d58da017b0d11f Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Tue, 11 Jul 2017 14:57:56 +0700
Subject: [PATCH] Extract TruncatedMarkdown component

---
 ui/js/component/common.js                  | 36 --------------------
 ui/js/component/fileCard/view.jsx          |  8 ++---
 ui/js/component/truncatedMarkdown/index.js |  5 +++
 ui/js/component/truncatedMarkdown/view.jsx | 39 ++++++++++++++++++++++
 4 files changed, 46 insertions(+), 42 deletions(-)
 create mode 100644 ui/js/component/truncatedMarkdown/index.js
 create mode 100644 ui/js/component/truncatedMarkdown/view.jsx

diff --git a/ui/js/component/common.js b/ui/js/component/common.js
index 57314bdd3..38dbf83fd 100644
--- a/ui/js/component/common.js
+++ b/ui/js/component/common.js
@@ -1,7 +1,5 @@
 import React from "react";
-import ReactDOMServer from "react-dom/server";
 import lbry from "../lbry.js";
-import ReactMarkdown from "react-markdown";
 
 //component/icon.js
 export class Icon extends React.PureComponent {
@@ -44,40 +42,6 @@ export class TruncatedText extends React.PureComponent {
   }
 }
 
-export class TruncatedMarkdown extends React.PureComponent {
-  static propTypes = {
-    lines: React.PropTypes.number,
-  };
-
-  static defaultProps = {
-    lines: null,
-  };
-
-  transformMarkdown(text) {
-    // render markdown to html string then trim html tag
-    let htmlString = ReactDOMServer.renderToStaticMarkup(
-      <ReactMarkdown source={this.props.children} />
-    );
-    var txt = document.createElement("textarea");
-    txt.innerHTML = htmlString;
-    return txt.value.replace(/<(?:.|\n)*?>/gm, "");
-  }
-
-  render() {
-    let content = this.props.children && typeof this.props.children === "string"
-      ? this.transformMarkdown(this.props.children)
-      : this.props.children;
-    return (
-      <span
-        className="truncated-text"
-        style={{ WebkitLineClamp: this.props.lines }}
-      >
-        {content}
-      </span>
-    );
-  }
-}
-
 export class BusyMessage extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,
diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx
index 256bc9014..c6e179af7 100644
--- a/ui/js/component/fileCard/view.jsx
+++ b/ui/js/component/fileCard/view.jsx
@@ -1,15 +1,11 @@
 import React from "react";
 import lbryuri from "lbryuri.js";
 import Link from "component/link";
-import {
-  Thumbnail,
-  TruncatedText,
-  Icon,
-  TruncatedMarkdown,
-} from "component/common";
+import { Thumbnail, TruncatedText, Icon } from "component/common";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 import NsfwOverlay from "component/nsfwOverlay";
+import TruncatedMarkdown from "component/truncatedMarkdown";
 
 class FileCard extends React.PureComponent {
   constructor(props) {
diff --git a/ui/js/component/truncatedMarkdown/index.js b/ui/js/component/truncatedMarkdown/index.js
new file mode 100644
index 000000000..7cec6defe
--- /dev/null
+++ b/ui/js/component/truncatedMarkdown/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import TruncatedMarkdown from "./view";
+
+export default connect()(TruncatedMarkdown);
diff --git a/ui/js/component/truncatedMarkdown/view.jsx b/ui/js/component/truncatedMarkdown/view.jsx
new file mode 100644
index 000000000..59e42d6af
--- /dev/null
+++ b/ui/js/component/truncatedMarkdown/view.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import ReactDOMServer from "react-dom/server";
+
+class TruncatedMarkdown extends React.PureComponent {
+  static propTypes = {
+    lines: React.PropTypes.number,
+  };
+
+  static defaultProps = {
+    lines: null,
+  };
+
+  transformMarkdown(text) {
+    // render markdown to html string then trim html tag
+    let htmlString = ReactDOMServer.renderToStaticMarkup(
+      <ReactMarkdown source={this.props.children} />
+    );
+    var txt = document.createElement("textarea");
+    txt.innerHTML = htmlString;
+    return txt.value.replace(/<(?:.|\n)*?>/gm, "");
+  }
+
+  render() {
+    let content = this.props.children && typeof this.props.children === "string"
+      ? this.transformMarkdown(this.props.children)
+      : this.props.children;
+    return (
+      <span
+        className="truncated-text"
+        style={{ WebkitLineClamp: this.props.lines }}
+      >
+        {content}
+      </span>
+    );
+  }
+}
+
+export default TruncatedMarkdown;