working on comments

src/components/comments/container/commentsContainer.js

@@ -27,6 +27,8 @@ class CommentsContainer extends Component {
     super(props);
     this.state = {
       comments: [],
+      isShowComments: false,
+      isRenderRequire: true,
     };
   }
 
@@ -81,14 +83,42 @@ 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;
+    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}
@@ -101,6 +131,8 @@ class CommentsContainer extends Component {
         />
       );
     }
+    return null;
+  }
 }
 
 const mapStateToProps = state => ({

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,15 +100,32 @@ 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 && (
+                {!isProfilePreview
+                  && item.children > 0
+                  && (isShowComments
+                    && (selectedPermlink === item.permlink
+                      || selectedPermlink === item.parent_permlink) && (
                       <View style={{ marginLeft: marginLeft || 29 }}>
-                    {commentNumber !== 8 && (
                         <Comments
-                        commentNumber={commentNumber ? commentNumber * 2 : 1}
+                          key={item.permlink}
+                          selectedPermlink={selectedPermlink}
+                          parentPermlink={item.parent_permlink}
+                          isShowComments={isShowComments}
+                          commentNumber={commentNumber && commentNumber * 2}
                           marginLeft={20}
                           avatarSize={avatarSize || 16}
                           author={item.author}
@@ -110,9 +133,8 @@ class CommentsView extends PureComponent {
                           commentCount={item.children}
                           fetchPost={fetchPost}
                         />
-                    )}
                       </View>
-                )}
+                  ))}
               </View>
             )}
           />