Merge pull request #452 from esteemapp/bugfix/#373

Bugfix/#373

src/components/basicUIElements/view/textWithIcon/textWithIconView.js

@@ -4,12 +4,20 @@ import { Icon } from '../../../icon';
 import styles from './textWithIconStyles';
 
 const TextWithIcon = ({
-  iconName, text, isClickable, onPress, iconStyle, iconType, iconSize,
+  iconName,
+  text,
+  isClickable,
+  onPress,
+  iconStyle,
+  iconType,
+  iconSize,
+  wrapperStyle,
+  textStyle,
 }) => (
   <View style={styles.container}>
     {isClickable || onPress ? (
       <TouchableHighlight
-        style={styles.wrapper}
+        style={[styles.wrapper, wrapperStyle]}
         underlayColor="transparent"
         onPress={() => onPress && onPress()}
       >
@@ -19,7 +27,7 @@ const TextWithIcon = ({
             name={iconName}
             iconType={iconType}
           />
-          <Text style={[styles.text]}>{text}</Text>
+          <Text style={[styles.text, textStyle]}>{text}</Text>
         </Fragment>
       </TouchableHighlight>
     ) : (

src/components/comment/index.js

@@ -0,0 +1,4 @@
+import Comment from './view/commentView';
+
+export { Comment };
+export default Comment;

src/components/comment/view/commentStyles.js

@@ -0,0 +1,39 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  leftIcon: {
+    color: '$iconColor',
+  },
+  leftButton: {
+    marginLeft: 10,
+  },
+  rightButton: {
+    backgroundColor: '$iconColor',
+    height: 18,
+    flexDirection: 'row-reverse',
+    borderRadius: 20,
+  },
+  moreText: {
+    color: '$white',
+    fontSize: 10,
+    marginLeft: 12,
+    marginRight: 2,
+  },
+  bodyWrapper: {
+    marginTop: -10,
+  },
+  iconStyle: {
+    color: '$white',
+    marginRight: 12,
+    marginTop: 1,
+  },
+  footerWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  rightButtonWrapper: {
+    alignSelf: 'flex-end',
+    position: 'absolute',
+    right: 0,
+  },
+});

src/components/comment/view/commentView.js

@@ -0,0 +1,127 @@
+import React, { PureComponent, Fragment } from 'react';
+import { View } from 'react-native';
+
+import { getTimeFromNow } from '../../../utils/time';
+// Constants
+
+// Components
+import { PostBody, PostHeaderDescription } from '../../postElements';
+import { Upvote } from '../../upvote';
+import { IconButton } from '../../iconButton';
+import { Comments } from '../../comments';
+import { TextWithIcon } from '../../basicUIElements';
+
+// Styles
+import styles from './commentStyles';
+
+class CommentView extends PureComponent {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowSubComments: props.isShowSubComments || false,
+    };
+  }
+
+  // Component Life Cycles
+  // Component Functions
+
+  _showSubCommentsToggle = () => {
+    const { isShowSubComments } = this.state;
+
+    this.setState({ isShowSubComments: !isShowSubComments });
+  };
+
+  render() {
+    const {
+      avatarSize,
+      currentAccountUsername,
+      handleOnEditPress,
+      handleOnReplyPress,
+      handleOnUserPress,
+      isLoggedIn,
+      marginLeft,
+      isShowMoreButton,
+      comment,
+      commentNumber,
+      fetchPost,
+      isShowComments,
+    } = this.props;
+    const { isShowSubComments } = this.state;
+
+    return (
+      <View style={{ marginLeft: marginLeft || 29 }}>
+        <PostHeaderDescription
+          key={comment.permlink}
+          date={getTimeFromNow(comment.created)}
+          name={comment.author}
+          reputation={comment.author_reputation}
+          size={avatarSize || 24}
+        />
+        <View style={[{ marginLeft: marginLeft || 29 }, styles.bodyWrapper]}>
+          <PostBody isComment handleOnUserPress={handleOnUserPress} body={comment.body} />
+          <View style={styles.footerWrapper}>
+            {isLoggedIn && (
+              <Fragment>
+                <Upvote isShowPayoutValue content={comment} />
+                <IconButton
+                  size={18}
+                  iconStyle={styles.leftIcon}
+                  style={styles.leftButton}
+                  name="reply"
+                  onPress={() => handleOnReplyPress && handleOnReplyPress(comment)}
+                  iconType="MaterialIcons"
+                />
+                {currentAccountUsername === comment.author && (
+                  <IconButton
+                    size={18}
+                    iconStyle={styles.leftIcon}
+                    style={styles.leftButton}
+                    name="create"
+                    onPress={() => handleOnEditPress && handleOnEditPress(comment)}
+                    iconType="MaterialIcons"
+                  />
+                )}
+              </Fragment>
+            )}
+            {isShowMoreButton && (
+              <View style={styles.rightButtonWrapper}>
+                <TextWithIcon
+                  wrapperStyle={styles.rightButton}
+                  iconName={isShowSubComments ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
+                  textStyle={styles.moreText}
+                  iconType="MaterialIcons"
+                  isClickable
+                  iconStyle={styles.iconStyle}
+                  iconSize={16}
+                  onPress={() => this._showSubCommentsToggle()}
+                  text={`${comment.children} more replies`}
+                />
+              </View>
+            )}
+          </View>
+          {isShowSubComments && commentNumber > 0 && (
+            <Comments
+              isShowComments={isShowComments}
+              commentNumber={commentNumber && commentNumber * 2}
+              marginLeft={20}
+              isShowSubComments={isShowSubComments}
+              avatarSize={avatarSize || 16}
+              author={comment.author}
+              permlink={comment.permlink}
+              commentCount={comment.children}
+              isShowMoreButton={false}
+              fetchPost={fetchPost}
+            />
+          )}
+        </View>
+      </View>
+    );
+  }
+}
+
+export default CommentView;

src/components/comments/container/commentsContainer.js

@@ -82,29 +82,36 @@ class CommentsContainer extends Component {
   };
 
   render() {
-    const { comments: _comments } = this.state;
+    const { comments: _comments, selectedPermlink } = this.state;
     const {
       isLoggedIn,
       commentCount,
       author,
       permlink,
       currentAccount,
-      isProfilePreview,
+      commentNumber,
       comments,
+      fetchPost,
+      isShowMoreButton,
+      selectedPermlink: _selectedPermlink,
     } = this.props;
 
     return (
       <CommentsView
+        key={permlink}
+        selectedPermlink={_selectedPermlink || selectedPermlink}
         author={author}
-        commentNumber={commentCount}
-        comments={comments || _comments}
+        isShowMoreButton={isShowMoreButton}
+        commentNumber={commentNumber || 1}
+        commentCount={commentCount}
+        comments={_comments || comments}
         currentAccountUsername={currentAccount.name}
         handleOnEditPress={this._handleOnEditPress}
         handleOnReplyPress={this._handleOnReplyPress}
         isLoggedIn={isLoggedIn}
         permlink={permlink}
-        fetchPost={this._getComments}
-        isProfilePreview={isProfilePreview}
+        fetchPost={fetchPost}
+        {...this.props}
       />
     );
   }

src/components/comments/view/commentsView.js

@@ -1,14 +1,8 @@
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import { View, FlatList } from 'react-native';
 
-import { getTimeFromNow } from '../../../utils/time';
-// Constants
-
 // Components
-import Comments from '../container/commentsContainer';
-import { PostBody, PostHeaderDescription } from '../../postElements';
-import { Upvote } from '../../upvote';
-import { IconButton } from '../../iconButton';
+import { Comment } from '../../comment';
 
 // Styles
 // import styles from './commentStyles';
@@ -41,81 +35,37 @@ class CommentsView extends PureComponent {
       handleOnReplyPress,
       handleOnUserPress,
       isLoggedIn,
-      isProfilePreview,
       marginLeft,
+      isShowSubComments,
       fetchPost,
+      commentCount,
     } = this.props;
 
     return (
-      <View>
-        {!!comments && (
-          <FlatList
-            data={comments}
-            keyExtractor={this._keyExtractor}
-            renderItem={({ item, index }) => (
-              <View key={index}>
-                <PostHeaderDescription
-                  key={item.permlink}
-                  // date={intl.formatRelative(item.created)}
-                  date={getTimeFromNow(item.created)}
-                  name={item.author}
-                  reputation={item.author_reputation}
-                  size={avatarSize || 24}
-                />
-                <View
-                  style={{
-                    marginLeft: marginLeft || 29,
-                    flexDirection: 'column',
-                    marginTop: -10,
-                  }}
-                >
-                  <PostBody isComment handleOnUserPress={handleOnUserPress} body={item.body} />
-                  <View style={{ flexDirection: 'row' }}>
-                    {isLoggedIn && (
-                      <Fragment>
-                        <Upvote isShowPayoutValue content={item} />
-                        <IconButton
-                          size={18}
-                          iconStyle={{ color: '#c1c5c7' }}
-                          style={{ marginLeft: 10 }}
-                          name="reply"
-                          onPress={() => handleOnReplyPress && handleOnReplyPress(item)}
-                          iconType="MaterialIcons"
-                        />
-                        {currentAccountUsername === item.author && (
-                          <IconButton
-                            size={18}
-                            iconStyle={{ color: '#c1c5c7' }}
-                            style={{ marginLeft: 10 }}
-                            name="create"
-                            onPress={() => handleOnEditPress && handleOnEditPress(item)}
-                            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>
-                )}
-              </View>
-            )}
-          />
+      <FlatList
+        data={comments}
+        keyExtractor={this._keyExtractor}
+        renderItem={({ item, index }) => (
+          <View key={index}>
+            <Comment
+              isShowMoreButton={commentNumber === 1 && item.children > 0}
+              comment={item}
+              marginLeft={marginLeft}
+              commentNumber={commentNumber}
+              fetchPost={fetchPost}
+              commentCount={commentCount || item.children}
+              isShowSubComments={isShowSubComments}
+              avatarSize={avatarSize}
+              currentAccountUsername={currentAccountUsername}
+              handleOnReplyPress={handleOnReplyPress}
+              handleOnEditPress={handleOnEditPress}
+              handleOnUserPress={handleOnUserPress}
+              isLoggedIn={isLoggedIn}
+              showComentsToggle={this._showComentsToggle}
+            />
+          </View>
         )}
-      </View>
+      />
     );
   }
 }