From ce32fc7065752582fcfbb619da4f0d340f04d9d4 Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 25 Aug 2023 15:15:17 -0700 Subject: [PATCH 1/7] Get commentId to PostDetail and pass down --- src/components/Comment/Comment.js | 4 ++-- src/components/Comment/Comment.styles.js | 13 ++++++++++--- src/components/FeedList/FeedList.js | 2 -- .../NotificationsList/NotificationsList.store.js | 4 ++-- src/screens/PostDetails/PostDetails.js | 3 ++- src/store/models/Notification.js | 6 +++--- src/util/navigation.js | 6 +++--- 7 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/Comment/Comment.js b/src/components/Comment/Comment.js index 9daef186e..98f109af7 100644 --- a/src/components/Comment/Comment.js +++ b/src/components/Comment/Comment.js @@ -18,6 +18,7 @@ import ImageAttachments from 'components/ImageAttachments' export default function Comment ({ comment, clearHighlighted, + commentIdFromParams, displayPostTitle, showMenu = false, highlighted, @@ -33,7 +34,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) @@ -103,7 +103,7 @@ export default function Comment ({ return ( - + showMember(creator.id)}> diff --git a/src/components/Comment/Comment.styles.js b/src/components/Comment/Comment.styles.js index 3260ebdea..675b5aff6 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,13 @@ export default { fontSize: 12 }, replyLink: { - flexDirection: 'row', + flexDirection: 'row' + }, + commentIdFromParams: { + // border: 1px $color-mango-yellow solid; + borderRadius: 2, + borderWidth: 1, + borderColor: '#FDD549' }, // replyLinkText: { // fontSize: 12, 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/PostDetails/PostDetails.js b/src/screens/PostDetails/PostDetails.js index e2ad5f7e4..d9f9f9232 100644 --- a/src/screens/PostDetails/PostDetails.js +++ b/src/screens/PostDetails/PostDetails.js @@ -58,7 +58,7 @@ export default function PostDetails () { const scrollToSelectedComment = () => { commentsRef.current && commentsRef.current.scrollToComment(selectedComment) } - + console.log(route, 'route') useEffect(() => { (async function () { try { @@ -89,6 +89,7 @@ export default function PostDetails () { Date: Mon, 28 Aug 2023 12:54:49 -0700 Subject: [PATCH 2/7] Scroll to specific comment if in the route --- src/components/Comment/Comment.js | 8 +++- src/components/Comments/Comments.js | 37 ++++++++++++++++++- .../NotificationsList.store.test.js | 4 +- src/screens/PostDetails/PostDetails.js | 2 +- 4 files changed, 46 insertions(+), 5 deletions(-) diff --git a/src/components/Comment/Comment.js b/src/components/Comment/Comment.js index 98f109af7..dec624efc 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' @@ -101,6 +101,12 @@ export default function Comment ({ // return handleReply() } + useEffect(() => { + if (comment && commentIdFromParams === comment.id) { + scrollTo(0.5) + } + }, []) + return ( diff --git a/src/components/Comments/Comments.js b/src/components/Comments/Comments.js index bec2cb461..a5be58153 100644 --- a/src/components/Comments/Comments.js +++ b/src/components/Comments/Comments.js @@ -21,6 +21,7 @@ function Comments ({ style = {}, showMember, slug, + commentIdFromParams, panHandlers, onSelect }, ref) { @@ -33,6 +34,7 @@ function Comments ({ })) const [highlightedComment, setHighlightedComment] = useState() const commentsListRef = useRef() + const [shutUp, setShutUp] = useState(false) const scrollToComment = useCallback((comment, viewPosition = 0.2) => { const parentCommentId = comment.parentComment || comment.id @@ -41,7 +43,8 @@ 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 }) + console.log(sectionIndex, itemIndex, viewPosition, 'WEWEWEWEW') + commentsListRef?.current.scrollToLocation({ sectionIndex, itemIndex, viewPosition, animated: true }) }, [sections]) const selectComment = useCallback(comment => { @@ -60,6 +63,22 @@ function Comments ({ dispatch(fetchCommentsAction({ postId })) }, [dispatch, postId]) + // useEffect(() => { + // if (commentIdFromParams && comments.length > 0) { + // let allComments = [...comments] + // comments.forEach((comment, index) => { + // allComments = allComments.concat(comment.subComments) + // }) + + // const comment = allComments.find(c => c.id === commentIdFromParams) + // console.log(comment.id, 'ahahaha') + // if (comment && !shutUp) { + // scrollToComment(comment, 0.9) + // setShutUp(true) + // } + // } + // }, [commentIdFromParams]) + const Header = () => ( <> {providedHeader} @@ -83,6 +102,7 @@ function Comments ({ onReply={selectComment} scrollTo={viewPosition => scrollToComment(comment, viewPosition)} setHighlighted={() => setHighlightedComment(comment)} + commentIdFromParams={commentIdFromParams} showMember={showMember} slug={slug} key={comment.id} @@ -101,6 +121,7 @@ function Comments ({ scrollTo={viewPosition => scrollToComment(comment, viewPosition)} setHighlighted={() => setHighlightedComment(comment)} showMember={showMember} + commentIdFromParams={commentIdFromParams} slug={slug} style={styles.subComment} key={comment.id} @@ -121,7 +142,21 @@ function Comments ({ sections={sections} keyExtractor={comment => comment.id} initialScrollIndex={0} + getItemLayout={(data, index) => ({ + length: 50, + offset: 50 * index, + index + })} // keyboardShouldPersistTaps='handled' + onScrollToIndexFailed={(error) => { + console.log('ARE YOU OK BOWIE') + 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/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 d9f9f9232..710883215 100644 --- a/src/screens/PostDetails/PostDetails.js +++ b/src/screens/PostDetails/PostDetails.js @@ -58,7 +58,7 @@ export default function PostDetails () { const scrollToSelectedComment = () => { commentsRef.current && commentsRef.current.scrollToComment(selectedComment) } - console.log(route, 'route') + useEffect(() => { (async function () { try { From f0aad606ec58f604a4bc362d3123debaf771c0de Mon Sep 17 00:00:00 2001 From: Tom Date: Mon, 28 Aug 2023 13:01:38 -0700 Subject: [PATCH 3/7] Cleanup --- src/components/Comment/Comment.styles.js | 1 - src/components/Comments/Comments.js | 19 ------------------- 2 files changed, 20 deletions(-) diff --git a/src/components/Comment/Comment.styles.js b/src/components/Comment/Comment.styles.js index 675b5aff6..654cdeb04 100644 --- a/src/components/Comment/Comment.styles.js +++ b/src/components/Comment/Comment.styles.js @@ -52,7 +52,6 @@ export default { flexDirection: 'row' }, commentIdFromParams: { - // border: 1px $color-mango-yellow solid; borderRadius: 2, borderWidth: 1, borderColor: '#FDD549' diff --git a/src/components/Comments/Comments.js b/src/components/Comments/Comments.js index a5be58153..9e56b8245 100644 --- a/src/components/Comments/Comments.js +++ b/src/components/Comments/Comments.js @@ -34,7 +34,6 @@ function Comments ({ })) const [highlightedComment, setHighlightedComment] = useState() const commentsListRef = useRef() - const [shutUp, setShutUp] = useState(false) const scrollToComment = useCallback((comment, viewPosition = 0.2) => { const parentCommentId = comment.parentComment || comment.id @@ -43,7 +42,6 @@ function Comments ({ const sectionIndex = section.comment.sectionIndex const itemIndex = section.data.find(subComment => subCommentId === subComment.id)?.itemIndex || section.data.length + 1 - console.log(sectionIndex, itemIndex, viewPosition, 'WEWEWEWEW') commentsListRef?.current.scrollToLocation({ sectionIndex, itemIndex, viewPosition, animated: true }) }, [sections]) @@ -63,22 +61,6 @@ function Comments ({ dispatch(fetchCommentsAction({ postId })) }, [dispatch, postId]) - // useEffect(() => { - // if (commentIdFromParams && comments.length > 0) { - // let allComments = [...comments] - // comments.forEach((comment, index) => { - // allComments = allComments.concat(comment.subComments) - // }) - - // const comment = allComments.find(c => c.id === commentIdFromParams) - // console.log(comment.id, 'ahahaha') - // if (comment && !shutUp) { - // scrollToComment(comment, 0.9) - // setShutUp(true) - // } - // } - // }, [commentIdFromParams]) - const Header = () => ( <> {providedHeader} @@ -149,7 +131,6 @@ function Comments ({ })} // keyboardShouldPersistTaps='handled' onScrollToIndexFailed={(error) => { - console.log('ARE YOU OK BOWIE') this.commentsListRef.scrollToOffset({ offset: error.averageItemLength * error.index, animated: false }) setTimeout(() => { if (this.state.data.length !== 0 && this.commentsListRef !== null) { From 04c7211a4ac0d5d920820577741fd17d3392d6f4 Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 6 Sep 2023 13:50:56 -0700 Subject: [PATCH 4/7] Switched to reuse highlighted styling --- src/components/Comment/Comment.js | 2 +- src/components/Comment/Comment.styles.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Comment/Comment.js b/src/components/Comment/Comment.js index dec624efc..5ec63c301 100644 --- a/src/components/Comment/Comment.js +++ b/src/components/Comment/Comment.js @@ -109,7 +109,7 @@ export default function Comment ({ return ( - + showMember(creator.id)}> diff --git a/src/components/Comment/Comment.styles.js b/src/components/Comment/Comment.styles.js index 654cdeb04..9050bd202 100644 --- a/src/components/Comment/Comment.styles.js +++ b/src/components/Comment/Comment.styles.js @@ -51,11 +51,6 @@ export default { replyLink: { flexDirection: 'row' }, - commentIdFromParams: { - borderRadius: 2, - borderWidth: 1, - borderColor: '#FDD549' - }, // replyLinkText: { // fontSize: 12, // color: slateGrey80, From 19692dea38f33097532f8e8af128c5272529f499 Mon Sep 17 00:00:00 2001 From: Loren Johnson Date: Thu, 7 Sep 2023 12:47:18 +0200 Subject: [PATCH 5/7] Using comment selection system for highlighting comment from URL --- src/components/Comment/Comment.js | 11 ++--------- src/components/Comments/Comments.js | 20 +++++++++++++++++--- src/screens/PostDetails/PostDetails.js | 3 ++- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/Comment/Comment.js b/src/components/Comment/Comment.js index 5ec63c301..ce12c8557 100644 --- a/src/components/Comment/Comment.js +++ b/src/components/Comment/Comment.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React from 'react' import { Text, View, Alert, TouchableOpacity } from 'react-native' import { filter } from 'lodash/fp' import Clipboard from '@react-native-clipboard/clipboard' @@ -18,7 +18,6 @@ import ImageAttachments from 'components/ImageAttachments' export default function Comment ({ comment, clearHighlighted, - commentIdFromParams, displayPostTitle, showMenu = false, highlighted, @@ -101,15 +100,9 @@ export default function Comment ({ // return handleReply() } - useEffect(() => { - if (comment && commentIdFromParams === comment.id) { - scrollTo(0.5) - } - }, []) - return ( - + showMember(creator.id)}> diff --git a/src/components/Comments/Comments.js b/src/components/Comments/Comments.js index 9e56b8245..cd6dfdf46 100644 --- a/src/components/Comments/Comments.js +++ b/src/components/Comments/Comments.js @@ -17,11 +17,11 @@ import { FETCH_COMMENTS } from 'store/constants' function Comments ({ postId, + selectedCommentId, header: providedHeader = null, style = {}, showMember, slug, - commentIdFromParams, panHandlers, onSelect }, ref) { @@ -61,6 +61,22 @@ function Comments ({ dispatch(fetchCommentsAction({ postId })) }, [dispatch, postId]) + useEffect(() => { + if (!pending && selectedCommentId) { + comments.forEach(comment => { + if (comment.id === selectedCommentId) { + selectComment(comment) + } else { + comment.subComments.forEach(subComment => { + if (selectedCommentId === subComment.id) { + selectComment(subComment) + } + }) + } + }) + } + }, [pending, selectedCommentId]) + const Header = () => ( <> {providedHeader} @@ -84,7 +100,6 @@ function Comments ({ onReply={selectComment} scrollTo={viewPosition => scrollToComment(comment, viewPosition)} setHighlighted={() => setHighlightedComment(comment)} - commentIdFromParams={commentIdFromParams} showMember={showMember} slug={slug} key={comment.id} @@ -103,7 +118,6 @@ function Comments ({ scrollTo={viewPosition => scrollToComment(comment, viewPosition)} setHighlighted={() => setHighlightedComment(comment)} showMember={showMember} - commentIdFromParams={commentIdFromParams} slug={slug} style={styles.subComment} key={comment.id} diff --git a/src/screens/PostDetails/PostDetails.js b/src/screens/PostDetails/PostDetails.js index 710883215..6afc93bad 100644 --- a/src/screens/PostDetails/PostDetails.js +++ b/src/screens/PostDetails/PostDetails.js @@ -37,6 +37,7 @@ export default function PostDetails () { const postId = getRouteParam('id', route) const post = useSelector(state => getPresentedPost(state, { postId, forGroupId: currentGroup?.id })) const currentGroup = useSelector(getCurrentGroup) + const selectedCommentId = route.params?.commentId const commentsRef = React.useRef() const isModalScreen = useIsModalScreen() @@ -89,7 +90,7 @@ export default function PostDetails () { Date: Mon, 11 Sep 2023 08:22:36 +0200 Subject: [PATCH 6/7] Eliminate selector warning in dev by un-using reselect in getComments selectors --- src/store/selectors/getComments.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/store/selectors/getComments.js b/src/store/selectors/getComments.js index 5867d2ce2..453866006 100644 --- a/src/store/selectors/getComments.js +++ b/src/store/selectors/getComments.js @@ -1,5 +1,5 @@ -import { createSelector } from 'reselect' -import { get, reduce } from 'lodash/fp' +import { createSelector as ormCreateSelector } from 'redux-orm' +import { reduce } from 'lodash/fp' import orm from 'store/models' import { FETCH_COMMENTS } from 'store/constants' import { makeGetQueryResults } from 'store/reducers/queryResults' @@ -11,8 +11,8 @@ const normaliseCommentModel = comment => ({ .orderBy('position').toRefArray() }) -export const getComments = createSelector( - state => orm.session(state.orm), +export const getComments = ormCreateSelector( + orm, (_, props) => props.commentId, (_, props) => props.postId, ({ Comment }, parentComment, post) => { @@ -44,12 +44,12 @@ export const getComments = createSelector( const getCommentResults = makeGetQueryResults(FETCH_COMMENTS) -export const getHasMoreComments = createSelector( - getCommentResults, - get('hasMore') -) +export const getHasMoreComments = state => { + const commentResults = getCommentResults(state) + return commentResults?.hasMore +} -export const getTotalComments = createSelector( - getCommentResults, - get('total') -) +export const getTotalComments = state => { + const commentResults = getCommentResults(state) + return commentResults?.total +} From 53d54edd5f36f33457bc24d67e4d5ba0bddb9408 Mon Sep 17 00:00:00 2001 From: Loren Johnson Date: Mon, 11 Sep 2023 08:37:52 +0200 Subject: [PATCH 7/7] Tidy-up (Comment scrolling WIP) --- src/components/Comments/Comments.js | 41 +++++++++++++++----------- src/screens/PostDetails/PostDetails.js | 2 +- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/components/Comments/Comments.js b/src/components/Comments/Comments.js index cd6dfdf46..98dc36eae 100644 --- a/src/components/Comments/Comments.js +++ b/src/components/Comments/Comments.js @@ -45,6 +45,20 @@ function Comments ({ commentsListRef?.current.scrollToLocation({ sectionIndex, itemIndex, viewPosition, animated: true }) }, [sections]) + const scrollToCommentById = useCallback((commentId) => { + comments.forEach(comment => { + if (comment.id === selectedCommentId) { + selectComment(comment) + } else { + comment.subComments.forEach(subComment => { + if (selectedCommentId === subComment.id) { + selectComment(subComment) + } + }) + } + }) + }) + const selectComment = useCallback(comment => { setHighlightedComment(comment) scrollToComment(comment) @@ -63,17 +77,7 @@ function Comments ({ useEffect(() => { if (!pending && selectedCommentId) { - comments.forEach(comment => { - if (comment.id === selectedCommentId) { - selectComment(comment) - } else { - comment.subComments.forEach(subComment => { - if (selectedCommentId === subComment.id) { - selectComment(subComment) - } - }) - } - }) + scrollToCommentById(selectedCommentId) } }, [pending, selectedCommentId]) @@ -125,6 +129,8 @@ function Comments ({ ) } + if (pending) return + return ( { - 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) + console.log('!!!! error', 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'} diff --git a/src/screens/PostDetails/PostDetails.js b/src/screens/PostDetails/PostDetails.js index 6afc93bad..7ca69fef0 100644 --- a/src/screens/PostDetails/PostDetails.js +++ b/src/screens/PostDetails/PostDetails.js @@ -37,7 +37,7 @@ export default function PostDetails () { const postId = getRouteParam('id', route) const post = useSelector(state => getPresentedPost(state, { postId, forGroupId: currentGroup?.id })) const currentGroup = useSelector(getCurrentGroup) - const selectedCommentId = route.params?.commentId + const selectedCommentId = getRouteParam('commentId', route) const commentsRef = React.useRef() const isModalScreen = useIsModalScreen()