working on comments

This commit is contained in:
u-e 2019-01-16 17:27:30 +03:00
parent 2b0dbfb05b
commit 3e0455da73
2 changed files with 85 additions and 31 deletions

View File

@ -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;
}
}

View File

@ -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>
)}
/>