ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-11-29 22:07:46 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering 2 levels of replies thread and added button to show full thread

Browse Source
This commit is contained in:
noumantahir 2021-08-25 20:58:22 +05:00
parent 8b40f91a36
commit 64b0608d2e
6 changed files with 130 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/comment/view/commentStyles.js
View File

@ -19,6 +19,11 @@ export default EStyleSheet.create({
borderRadius: 20,
minWidth: 40,
},
moreButton: {
backgroundColor: '$iconColor',
height: 18,
borderRadius: 20,
},
moreText: {
color: '$white',
fontSize: 10,

85
src/components/comment/view/commentView.js → src/components/comment/view/commentView.tsx
View File

@ -36,12 +36,12 @@ const CommentView = ({
isLoggedIn,
isShowComments,
isShowMoreButton,
marginLeft,
mainAuthor = { mainAuthor },
isHideImage,
showAllComments,
isShowSubComments,
hideManyCommentsButton,
openReplyThread,
}) => {
const [_isShowSubComments, setIsShowSubComments] = useState(isShowSubComments || false);
const [isPressedShowButton, setIsPressedShowButton] = useState(false);
@ -61,6 +61,46 @@ const CommentView = ({
setIsPressedShowButton(true);
};
const _renderReadMoreButton = () => (
<TextWithIcon
wrapperStyle={styles.rightButton}
textStyle={!isPressedShowButton && styles.moreText}
iconType="MaterialIcons"
isClickable
iconStyle={styles.iconStyle}
iconSize={16}
onPress={() => openReplyThread && openReplyThread()}
text={
!isPressedShowButton
? intl.formatMessage({ id: 'comments.read_more' })
: ''
}
/>
)
const _renderReplies = () => {
return (
<Comments
isShowComments={isShowComments}
commentNumber={commentNumber + 1}
marginLeft={20}
isShowSubComments={true}
avatarSize={avatarSize || 24}
author={comment.author}
permlink={comment.permlink}
commentCount={comment.children}
comments={comment.replies}
isShowMoreButton={false}
hasManyComments={commentNumber === 5 && get(comment, 'children') > 0}
fetchPost={fetchPost}
hideManyCommentsButton={hideManyCommentsButton}
mainAuthor={mainAuthor}
/>
)
}
return (
<Fragment>
<View style={styles.commentContainer}>
@ -159,7 +199,8 @@ const CommentView = ({
)}
</Fragment>
)}
{!showAllComments && isShowMoreButton && (
{isShowMoreButton && (
<View style={styles.rightButtonWrapper}>
<TextWithIcon
wrapperStyle={styles.rightButton}
@ -178,24 +219,30 @@ const CommentView = ({
/>
</View>
)}
{/* { comment.children > 0 && !comment.replies?.length && (
<View style={styles.rightButtonWrapper}>
<TextWithIcon
wrapperStyle={styles.rightButton}
textStyle={!isPressedShowButton && styles.moreText}
iconType="MaterialIcons"
isClickable
iconStyle={styles.iconStyle}
iconSize={16}
onPress={() => openReplyThread && openReplyThread()}
text={
!isPressedShowButton
? intl.formatMessage({ id: 'post.open_thread' })
: ''
}
/>
</View>
)
} */}
</View>
{_isShowSubComments && commentNumber > 0 && (
<Comments
isShowComments={isShowComments}
commentNumber={commentNumber + 1}
marginLeft={20}
isShowSubComments={true}
avatarSize={avatarSize || 24}
author={comment.author}
permlink={comment.permlink}
commentCount={comment.children}
isShowMoreButton={false}
hasManyComments={commentNumber === 5 && get(comment, 'children') > 0}
fetchPost={fetchPost}
hideManyCommentsButton={hideManyCommentsButton}
mainAuthor={mainAuthor}
/>
)}
{ comment.children > 0 && !comment.replies?.length && _renderReadMoreButton() }
{_isShowSubComments && commentNumber > 0 && _renderReplies()}
</View>
</View>
</Fragment>

23
src/components/comments/container/commentsContainer.js
View File

@ -139,7 +139,7 @@ const CommentsContainer = ({
const _getComments = async () => {
if (isOwnProfile) {
fetchPost();
} else if (author && permlink) {
} else if (author && permlink && !comments) {
await getComments(author, permlink, name)
.then((__comments) => {
if (selectedFilter) {
@ -200,6 +200,17 @@ const CommentsContainer = ({
});
};
const _openReplyThread = (comment) => {
navigation.navigate({
routeName: ROUTES.SCREENS.POST,
key: comment.permlink,
params: {
author: comment.author,
permlink: comment.permlink,
},
});
};
const _handleOnPressCommentMenu = (index, selectedComment) => {
if (index === 0) {
writeToClipboard(`https://ecency.com${get(selectedComment, 'url')}`).then(() => {
@ -212,14 +223,7 @@ const CommentsContainer = ({
);
});
} else if (index === 1) {
navigation.navigate({
routeName: ROUTES.SCREENS.POST,
key: get(selectedComment, 'permlink'),
params: {
author: get(selectedComment, 'author'),
permlink: get(selectedComment, 'permlink'),
},
});
_openReplyThread(selectedComment);
}
};
@ -249,6 +253,7 @@ const CommentsContainer = ({
isShowSubComments={isShowSubComments}
showAllComments={showAllComments}
flatListProps={flatListProps}
openReplyThread={_openReplyThread}
/>
);
};

73
src/components/comments/view/commentsView.tsx
View File

@ -41,6 +41,7 @@ const CommentsView = ({
onScroll,
onEndReached,
flatListProps,
openReplyThread,
}) => {
const [selectedComment, setSelectedComment] = useState(null);
const intl = useIntl();
@ -56,15 +57,17 @@ const CommentsView = ({
setSelectedComment(item);
};
const _openReplyThread = (item) => {
if(item && openReplyThread){
openReplyThread(item)
}
}
const _readMoreComments = () => {
navigate({
routeName: ROUTES.SCREENS.POST,
key: comments[0].permlink,
params: {
author: comments[0].author,
permlink: comments[0].permlink,
},
});
if(comments[0] && openReplyThread){
openReplyThread(comments[0])
}
};
const _onMenuItemPress = (index) => {
@ -78,6 +81,7 @@ const CommentsView = ({
intl.formatMessage({ id: 'alert.cancel' }),
];
if (!hideManyCommentsButton && hasManyComments) {
return (
<TextButton
@ -90,31 +94,34 @@ const CommentsView = ({
}
const _renderItem = ({ item }) => (
<Comment
mainAuthor={mainAuthor}
avatarSize={avatarSize}
hideManyCommentsButton={hideManyCommentsButton}
comment={item}
commentCount={commentCount || get(item, 'children')}
commentNumber={commentNumber}
handleDeleteComment={handleDeleteComment}
currentAccountUsername={currentAccountUsername}
fetchPost={fetchPost}
handleOnEditPress={handleOnEditPress}
handleOnReplyPress={handleOnReplyPress}
handleOnUserPress={handleOnUserPress}
handleOnVotersPress={handleOnVotersPress}
isHideImage={isHideImage}
isLoggedIn={isLoggedIn}
isShowMoreButton={commentNumber === 1 && get(item, 'children') > 0}
showAllComments={showAllComments}
isShowSubComments={isShowSubComments}
key={get(item, 'permlink')}
marginLeft={marginLeft}
handleOnLongPress={() => _openCommentMenu(item)}
/>
);
const _renderItem = ({ item }) => {
return (
<Comment
mainAuthor={mainAuthor}
avatarSize={avatarSize}
hideManyCommentsButton={hideManyCommentsButton}
comment={item}
commentCount={commentCount || get(item, 'children')}
commentNumber={commentNumber}
handleDeleteComment={handleDeleteComment}
currentAccountUsername={currentAccountUsername}
fetchPost={fetchPost}
handleOnEditPress={handleOnEditPress}
handleOnReplyPress={handleOnReplyPress}
handleOnUserPress={handleOnUserPress}
handleOnVotersPress={handleOnVotersPress}
isHideImage={isHideImage}
isLoggedIn={isLoggedIn}
isShowMoreButton={isShowMoreButton || (commentNumber === 1 && get(item, 'children') > 0)}
showAllComments={showAllComments}
isShowSubComments={isShowSubComments}
key={get(item, 'permlink')}
marginLeft={marginLeft}
handleOnLongPress={() => _openCommentMenu(item)}
openReplyThread={()=> _openReplyThread(item)}
/>
)
};

5
src/components/postElements/body/view/postBodyView.js
View File

@ -506,7 +506,10 @@ const PostBody = ({
<AutoHeightWebView
source={{ html }}
allowsFullscreenVideo={true}
style={{ width: isComment ? WIDTH - (32 + 34 * (commentDepth % 6)) : WIDTH - 32 }}
style={{
width: isComment ? WIDTH - (32 + 34 * (commentDepth % 6)) : WIDTH - 32,
height: 100,
}}
customStyle={customStyle}
onMessage={_handleOnLinkPress}
customScript={customBodyScript}

2
src/providers/hive/dhive.js
View File

@ -636,7 +636,7 @@ export const deleteComment = (currentAccount, pin, permlink) => {
}
};
export const getComments = async (author, permlink, currentUserName = null) => {
export const getComments = async (author, permlink) => {
try {
const commentsMap = await client.call('bridge', 'get_discussion', { author, permlink });