DRAFT: HRN 598 (2): Scroll to Post Comment Path (keep comment component dumb)

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)
 

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,

src/components/Comments/Comments.js

@@ -14,19 +14,22 @@ 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,
   header: providedHeader = null,
   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}

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 (
       <View style={styles.container}>
         <FlatList

src/screens/NotificationsList/NotificationsList.store.js

@@ -153,15 +153,15 @@ export function refineActivity ({ action, actor, comment, group, post, meta }, {
         body: `wrote: ${truncateHTML(comment.text)}`,
         header: 'mentioned you in a comment on',
         nameInHeader: true,
-        onPress: () => navigate(modalScreenName('Post Details'), { id: post.id }),
+        onPress: () => navigate(modalScreenName('Post Details'), { id: post.id, commentId: comment.id }),
         title: post.title
       }
 
     case ACTION_NEW_COMMENT:
       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
       }
 

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', () => {

src/screens/PostDetails/PostDetails.js

@@ -89,6 +89,7 @@ export default function PostDetails () {
       <Comments
         ref={commentsRef}
         postId={post.id}
+        commentIdFromParams={route.params?.commentId}
         header={(
           <PostCardForDetails
             post={post}

src/store/models/Notification.js

@@ -1,7 +1,7 @@
 import { attr, fk, Model } from 'redux-orm'
 import { get } from 'lodash/fp'
 import {
-  commentUrl,
+  postCommentUrl,
   postUrl,
   groupUrl
 } from 'util/navigation'
@@ -40,7 +40,7 @@ export function urlForNotification ({ activity: { action, post, comment, group,
     case ACTION_APPROVED_JOIN_REQUEST:
       return groupUrl(groupSlug)
     case ACTION_COMMENT_MENTION:
-      return commentUrl(post.id, comment.id, { groupSlug })
+      return postCommentUrl({ postId: post.id, commentId: comment.id, groupSlug })
     case ACTION_EVENT_INVITATION:
       return postUrl(post.id, { groupSlug })
     case ACTION_GROUP_CHILD_GROUP_INVITE:
@@ -56,7 +56,7 @@ export function urlForNotification ({ activity: { action, post, comment, group,
     case ACTION_MENTION:
       return postUrl(post.id, { groupSlug })
     case ACTION_NEW_COMMENT:
-      return commentUrl(post.id, comment.id, { groupSlug })
+      return postCommentUrl({ postId: post.id, commentId: comment.id, groupSlug })
     case ACTION_TAG:
       return postUrl(post.id, { groupSlug })
   }

src/util/findComment.js

@@ -0,0 +1,18 @@
+export default function findCommentById (comments, commentId) {
+  for (let i = 0; i < comments.length; i++) {
+    const comment = comments[i]
+
+    if (comment.id === commentId) {
+      return comment
+    }
+
+    if (comment.subComments) {
+      const found = findCommentById(comment.subComments, commentId)
+      if (found) {
+        return found
+      }
+    }
+  }
+
+  return null
+}

src/util/navigation.js

@@ -7,7 +7,7 @@ export const HYLO_ID_MATCH = '\\d+'
 export const POST_ID_MATCH = HYLO_ID_MATCH
 export const OPTIONAL_POST_MATCH = `:detail(post)?/:postId(${POST_ID_MATCH})?/:action(new|edit)?`
 export const OPTIONAL_NEW_POST_MATCH = ':detail(post)?/:action(new)?' // TODO: need this?
-export const POST_DETAIL_MATCH = `:detail(post)/:postId(${POST_ID_MATCH})/:action(edit)?`
+export const POST_DETAIL_MATCH = `:detail(post)/:postId(${POST_ID_MATCH})/:action(edit|comments)?/:commentId?`
 
 export const REQUIRED_EDIT_POST_MATCH = `:detail(post)/:postId(${POST_ID_MATCH})/:action(edit)`
 
@@ -109,8 +109,8 @@ export function editPostUrl (id, opts = {}, querystringParams = {}) {
   return postUrl(id, { ...opts, action: 'edit' }, querystringParams)
 }
 
-export function commentUrl (postId, commentId, opts = {}, querystringParams = {}) {
-  return `${postUrl(postId, opts, querystringParams)}#comment_${commentId}`
+export function postCommentUrl ({ postId, commentId, ...opts }, querystringParams = {}) {
+  return `${postUrl(postId, opts, querystringParams)}/comments/${commentId}`
 }
 
 // Messages URLs