From 3e0455da73fc4ccf326667323dbbc35257594064 Mon Sep 17 00:00:00 2001
From: u-e <ugurerdal93@gmail.com>
Date: Wed, 16 Jan 2019 17:27:30 +0300
Subject: [PATCH] working on comments

---
 .../comments/container/commentsContainer.js   | 64 ++++++++++++++-----
 src/components/comments/view/commentsView.js  | 52 ++++++++++-----
 2 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/components/comments/container/commentsContainer.js b/src/components/comments/container/commentsContainer.js
index 0754427c7..5320d1188 100644
--- a/src/components/comments/container/commentsContainer.js
+++ b/src/components/comments/container/commentsContainer.js
@@ -27,6 +27,8 @@ class CommentsContainer extends Component {
     super(props);
     this.state = {
       comments: [],
+      isShowComments: false,
+      isRenderRequire: true,
     };
   }
 
@@ -81,25 +83,55 @@ class CommentsContainer extends Component {
     });
   };
 
+  _showComentsToggle = (permlink) => {
+    const { isShowComments, selectedPermlink } = this.state;
+    const { selectedPermlink: _selectedPermlink } = this.props;
+
+    if (_selectedPermlink !== selectedPermlink) {
+      this.setState({ isShowComments: !!isShowComments, selectedPermlink: permlink });
+    } else {
+      this.setState({ isShowComments: !isShowComments, selectedPermlink: permlink });
+    }
+
+    this.setState({ isRenderRequire: false }, () => this.setState({ isRenderRequire: true }));
+  };
+
   render() {
-    const { comments } = this.state;
     const {
-      isLoggedIn, commentCount, author, permlink, currentAccount, fetchPost,
+      comments, isShowComments, isRenderRequire, selectedPermlink,
+    } = this.state;
+    const {
+      isLoggedIn,
+      commentCount,
+      author,
+      permlink,
+      currentAccount,
+      commentNumber,
+      fetchPost,
+      selectedPermlink: _selectedPermlink,
     } = this.props;
-    return (
-      <CommentsView
-        author={author}
-        commentCount={commentCount}
-        comments={comments}
-        currentAccountUsername={currentAccount.name}
-        handleOnEditPress={this._handleOnEditPress}
-        handleOnReplyPress={this._handleOnReplyPress}
-        isLoggedIn={isLoggedIn}
-        permlink={permlink}
-        fetchPost={fetchPost}
-        {...this.props}
-      />
-    );
+    if (isRenderRequire) {
+      return (
+        <CommentsView
+          key={permlink}
+          selectedPermlink={_selectedPermlink || selectedPermlink}
+          isShowComments={isShowComments}
+          showComentsToggle={this._showComentsToggle}
+          author={author}
+          commentNumber={commentNumber || 1}
+          commentCount={commentCount}
+          comments={comments}
+          currentAccountUsername={currentAccount.name}
+          handleOnEditPress={this._handleOnEditPress}
+          handleOnReplyPress={this._handleOnReplyPress}
+          isLoggedIn={isLoggedIn}
+          permlink={permlink}
+          fetchPost={fetchPost}
+          {...this.props}
+        />
+      );
+    }
+    return null;
   }
 }
 
diff --git a/src/components/comments/view/commentsView.js b/src/components/comments/view/commentsView.js
index e206d3afa..0f719671c 100644
--- a/src/components/comments/view/commentsView.js
+++ b/src/components/comments/view/commentsView.js
@@ -46,8 +46,14 @@ class CommentsView extends PureComponent {
       marginLeft,
       fetchPost,
       intl,
+      showComentsToggle,
+      isShowComments,
+      parentPermlink,
+      selectedPermlink,
     } = this.props;
 
+    //    if (isShowComments) alert(isShowComments);
+
     return (
       <View>
         {!!comments && (
@@ -94,25 +100,41 @@ class CommentsView extends PureComponent {
                             iconType="MaterialIcons"
                           />
                         )}
+                        {item.children > 0 && commentNumber === 1 && (
+                          <IconButton
+                            size={18}
+                            iconStyle={{ color: '#c1c5c7' }}
+                            style={{ marginLeft: 10 }}
+                            name="star"
+                            onPress={() => showComentsToggle(item.permlink)}
+                            iconType="MaterialIcons"
+                          />
+                        )}
                       </Fragment>
                     )}
                   </View>
                 </View>
-                {!isProfilePreview && (
-                  <View style={{ marginLeft: marginLeft || 29 }}>
-                    {commentNumber !== 8 && (
-                      <Comments
-                        commentNumber={commentNumber ? commentNumber * 2 : 1}
-                        marginLeft={20}
-                        avatarSize={avatarSize || 16}
-                        author={item.author}
-                        permlink={item.permlink}
-                        commentCount={item.children}
-                        fetchPost={fetchPost}
-                      />
-                    )}
-                  </View>
-                )}
+                {!isProfilePreview
+                  && item.children > 0
+                  && (isShowComments
+                    && (selectedPermlink === item.permlink
+                      || selectedPermlink === item.parent_permlink) && (
+                      <View style={{ marginLeft: marginLeft || 29 }}>
+                        <Comments
+                          key={item.permlink}
+                          selectedPermlink={selectedPermlink}
+                          parentPermlink={item.parent_permlink}
+                          isShowComments={isShowComments}
+                          commentNumber={commentNumber && commentNumber * 2}
+                          marginLeft={20}
+                          avatarSize={avatarSize || 16}
+                          author={item.author}
+                          permlink={item.permlink}
+                          commentCount={item.children}
+                          fetchPost={fetchPost}
+                        />
+                      </View>
+                  ))}
               </View>
             )}
           />