From 8eaac3eaa20aadab7ccc5fd1535777453f7723fe Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 18 Aug 2017 19:50:56 +0700
Subject: [PATCH] Tiny refactor..

---
 .../containers/ProfileContainer.js            |  5 +-
 client/talk-plugin-history/Comment.js         | 83 ++++++++++---------
 client/talk-plugin-history/CommentHistory.js  |  6 +-
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 3423cb6e2..6ffad3c87 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -51,7 +51,7 @@ class ProfileContainer extends Component {
   };
 
   render() {
-    const {auth, auth: {user}, asset, showSignInDialog, stopIgnoringUser} = this.props;
+    const {auth, auth: {user}, showSignInDialog, stopIgnoringUser, root, data} = this.props;
     const {me} = this.props.root;
     const loading = this.props.data.loading;
 
@@ -87,7 +87,7 @@ class ProfileContainer extends Component {
 
         <h3>{t('framework.my_comments')}</h3>
         {me.comments.nodes.length
-          ? <CommentHistory comments={me.comments} asset={asset} link={link} loadMore={this.loadMore}/>
+          ? <CommentHistory data={data} root={root} comments={me.comments} link={link} loadMore={this.loadMore}/>
           : <p>{t('user_no_comment')}</p>}
       </div>
     );
@@ -138,7 +138,6 @@ const withProfileQuery = withQuery(
 `);
 
 const mapStateToProps = (state) => ({
-  asset: state.asset,
   auth: state.auth
 });
 
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index f90362e2d..d1640cb5e 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -7,54 +7,57 @@ import CommentContent from '../coral-embed-stream/src/components/CommentContent'
 
 import t from 'coral-framework/services/i18n';
 
-const Comment = (props) => {
-  return (
-    <div className={styles.myComment}>
-      <div>
-        <Slot
-          fill="commentContent"
-          defaultComponent={CommentContent}
-          className={`${styles.commentBody} myCommentBody`}
-          comment={props.comment}
-        />
-        <p className="myCommentAsset">
-          <a
-            className={`${styles.assetURL} myCommentAnchor`}
-            href="#"
-            onClick={props.link(`${props.asset.url}`)}>
-            Story: {props.asset.title ? props.asset.title : props.asset.url}
-          </a>
-        </p>
-      </div>
-      <div className={styles.sidebar}>
-        <ul>
-          <li>
-            <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
-              <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
+class Comment extends React.Component {
+
+  render() {
+    const {comment, link, data, root} = this.props;
+    return (
+      <div className={styles.myComment}>
+        <div>
+          <Slot
+            fill="commentContent"
+            defaultComponent={CommentContent}
+            className={`${styles.commentBody} myCommentBody`}
+            data={data}
+            root={root}
+            comment={comment}
+            asset={comment.asset}
+          />
+          <p className="myCommentAsset">
+            <a
+              className={`${styles.assetURL} myCommentAnchor`}
+              href="#"
+              onClick={link(`${comment.asset.url}`)}>
+              Story: {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
-          </li>
-          <li>
-            <Icon name="schedule" className={styles.iconDate}/>
-            <PubDate
-              className={styles.pubdate}
-              created_at={props.comment.created_at}
-            />
-          </li>
-        </ul>
+          </p>
+        </div>
+        <div className={styles.sidebar}>
+          <ul>
+            <li>
+              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)}>
+                <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
+              </a>
+            </li>
+            <li>
+              <Icon name="schedule" className={styles.iconDate}/>
+              <PubDate
+                className={styles.pubdate}
+                created_at={comment.created_at}
+              />
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 Comment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string,
     body: PropTypes.string
   }).isRequired,
-  asset: PropTypes.shape({
-    url: PropTypes.string,
-    title: PropTypes.string
-  }).isRequired
 };
 
 export default Comment;
diff --git a/client/talk-plugin-history/CommentHistory.js b/client/talk-plugin-history/CommentHistory.js
index d584d6a0a..43ae93f1d 100644
--- a/client/talk-plugin-history/CommentHistory.js
+++ b/client/talk-plugin-history/CommentHistory.js
@@ -22,16 +22,18 @@ class CommentHistory extends React.Component {
   }
 
   render() {
-    const {link, comments} = this.props;
+    const {link, comments, data, root} = this.props;
     return (
       <div className={`${styles.header} commentHistory`}>
         <div className="commentHistory__list">
           {comments.nodes.map((comment, i) => {
             return <Comment
               key={i}
+              data={data}
+              root={root}
               comment={comment}
               link={link}
-              asset={comment.asset} />;
+            />;
           })}
         </div>
         {comments.hasNextPage &&