diff --git a/src/components/Comment/Comment.js b/src/components/Comment/Comment.js index 9daef186e..5f3f1a5e8 100644 --- a/src/components/Comment/Comment.js +++ b/src/components/Comment/Comment.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import { Text, View, Alert, TouchableOpacity } from 'react-native' import { filter } from 'lodash/fp' import Clipboard from '@react-native-clipboard/clipboard' @@ -33,7 +33,6 @@ export default function Comment ({ const { showHyloActionSheet } = useHyloActionSheet() const currentUser = useSelector(getMe) const group = useSelector(state => getGroup(state, { slug })) - const canModerate = currentUser && currentUser.canModerate(group) const isCreator = currentUser && (comment.creator.id === currentUser.id) diff --git a/src/components/Comment/Comment.styles.js b/src/components/Comment/Comment.styles.js index 3260ebdea..654cdeb04 100644 --- a/src/components/Comment/Comment.styles.js +++ b/src/components/Comment/Comment.styles.js @@ -4,9 +4,10 @@ export default { container: { flexDirection: 'column', flex: 1, - padding: 15, + padding: 10, paddingTop: 3, - paddingBottom: 3 + paddingBottom: 3, + marginRight: 10 }, avatar: { marginRight: 10 @@ -48,7 +49,12 @@ export default { fontSize: 12 }, replyLink: { - flexDirection: 'row', + flexDirection: 'row' + }, + commentIdFromParams: { + borderRadius: 2, + borderWidth: 1, + borderColor: '#FDD549' }, // replyLinkText: { // fontSize: 12, diff --git a/src/components/Comments/Comments.js b/src/components/Comments/Comments.js index bec2cb461..ea0206c31 100644 --- a/src/components/Comments/Comments.js +++ b/src/components/Comments/Comments.js @@ -14,6 +14,7 @@ import { } from 'store/selectors/getComments' import fetchCommentsAction from 'store/actions/fetchComments' import { FETCH_COMMENTS } from 'store/constants' +import findCommentById from 'util/findComment' function Comments ({ postId, @@ -21,12 +22,14 @@ function Comments ({ style = {}, showMember, slug, + commentIdFromParams, panHandlers, onSelect }, ref) { const dispatch = useDispatch() const comments = useSelector(state => getComments(state, { postId })) || [] const pending = useSelector(state => state.pending[FETCH_COMMENTS]) + const [scrolled, setScrolled] = useState(false) const sections = comments.map(comment => ({ comment: omit(['subComments'], comment), data: comment.subComments @@ -41,12 +44,12 @@ function Comments ({ const sectionIndex = section.comment.sectionIndex const itemIndex = section.data.find(subComment => subCommentId === subComment.id)?.itemIndex || section.data.length + 1 - commentsListRef?.current.scrollToLocation({ sectionIndex, itemIndex, viewPosition }) + commentsListRef?.current.scrollToLocation({ sectionIndex, itemIndex, viewPosition, animated: true }) }, [sections]) const selectComment = useCallback(comment => { setHighlightedComment(comment) - scrollToComment(comment) + scrollToComment(comment, 0.5) onSelect(comment) }, [setHighlightedComment, scrollToComment, onSelect]) @@ -60,6 +63,16 @@ function Comments ({ dispatch(fetchCommentsAction({ postId })) }, [dispatch, postId]) + useEffect(() => { + if (comments && commentIdFromParams && !scrolled) { + const comment = findCommentById(comments, commentIdFromParams) + setHighlightedComment(comment) + scrollToComment(comment, 0.5) // when calling this here (instead of in the comment component), it only seems to be working for android, not IOS :( + // also tried the above functionality with just hitting selectComment(comment), didn't seem to work + setScrolled(true) // I think the comments selector is not memoized and is one of the selectors that is causing the extra rerenders. + } + }, [comments, commentIdFromParams, scrolled]) + const Header = () => ( <> {providedHeader} @@ -121,7 +134,20 @@ function Comments ({ sections={sections} keyExtractor={comment => comment.id} initialScrollIndex={0} + getItemLayout={(data, index) => ({ + length: 50, + offset: 50 * index, + index + })} // keyboardShouldPersistTaps='handled' + onScrollToIndexFailed={(error) => { + this.commentsListRef.scrollToOffset({ offset: error.averageItemLength * error.index, animated: false }) + setTimeout(() => { + if (this.state.data.length !== 0 && this.commentsListRef !== null) { + this.commentsListRef.scrollToIndex({ index: error.index, animated: true }) + } + }, 100) + }} keyboardShouldPersistTaps='never' keyboardDismissMode={isIOS ? 'interactive' : 'on-drag'} {...panHandlers} diff --git a/src/components/FeedList/FeedList.js b/src/components/FeedList/FeedList.js index 2e4a80160..def804896 100644 --- a/src/components/FeedList/FeedList.js +++ b/src/components/FeedList/FeedList.js @@ -115,8 +115,6 @@ export class FeedListClassComponent extends React.Component { backgroundColor: '#FFFFFF' } - console.log(postIds, 'postIds') - console.log({ yay: fetchPostParam.childPostInclusion}) return ( navigate(modalScreenName('Post Details'), { id: post.id }), + onPress: () => navigate(modalScreenName('Post Details'), { id: post.id, commentId: comment.id }), title: post.title } @@ -161,7 +161,7 @@ export function refineActivity ({ action, actor, comment, group, post, meta }, { return { body: `wrote: ${truncateHTML(comment.text)}`, header: 'New Comment on', - onPress: () => navigate(modalScreenName('Post Details'), { id: post.id }), + onPress: () => navigate(modalScreenName('Post Details'), { id: post.id, commentId: comment.id }), title: post.title } diff --git a/src/screens/NotificationsList/NotificationsList.store.test.js b/src/screens/NotificationsList/NotificationsList.store.test.js index 32ed7104c..103ec7ea6 100644 --- a/src/screens/NotificationsList/NotificationsList.store.test.js +++ b/src/screens/NotificationsList/NotificationsList.store.test.js @@ -105,7 +105,7 @@ describe('selectors/refiners', () => { const notification = session.Notification.withId('1') const actual = store.refineActivity(notification.activity, navigation) actual.onPress() - expect(navigation.navigate).toHaveBeenCalledWith(modalScreenName('Post Details'), { id: '333' }) + expect(navigation.navigate).toHaveBeenCalledWith(modalScreenName('Post Details'), { id: '333', commentId: '1' }) }) it('matches the previous ACTION_COMMENT_MENTION snapshot', () => { @@ -118,7 +118,7 @@ describe('selectors/refiners', () => { const notification = session.Notification.withId('1') const actual = store.refineActivity(notification.activity, navigation) actual.onPress() - expect(navigation.navigate).toHaveBeenCalledWith(modalScreenName('Post Details'), { id: '333' }) + expect(navigation.navigate).toHaveBeenCalledWith(modalScreenName('Post Details'), { id: '333', commentId: '1' }) }) it('matches the previous ACTION_MENTION snapshot', () => { diff --git a/src/screens/PostDetails/PostDetails.js b/src/screens/PostDetails/PostDetails.js index e2ad5f7e4..710883215 100644 --- a/src/screens/PostDetails/PostDetails.js +++ b/src/screens/PostDetails/PostDetails.js @@ -89,6 +89,7 @@ export default function PostDetails () {