DRAFT: HRN 598 (1): Scroll to Post Comment Path

src/components/Comment/Comment.styles.js

@@ -50,7 +50,7 @@ export default {
     fontSize: 12
   },
   replyLink: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   // replyLinkText: {
   //   fontSize: 12,

src/components/Comments/Comments.js

@@ -17,6 +17,7 @@ import { FETCH_COMMENTS } from 'store/constants'
 
 function Comments ({
   postId,
+  selectedCommentId,
   header: providedHeader = null,
   style = {},
   showMember,
@@ -41,9 +42,23 @@ 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 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)
@@ -60,6 +75,12 @@ function Comments ({
     dispatch(fetchCommentsAction({ postId }))
   }, [dispatch, postId])
 
+  useEffect(() => {
+    if (!pending && selectedCommentId) {
+      scrollToCommentById(selectedCommentId)
+    }
+  }, [pending, selectedCommentId])
+
   const Header = () => (
     <>
       {providedHeader}
@@ -108,6 +129,8 @@ function Comments ({
     )
   }
 
+  if (pending) return <Loading />
+
   return (
     <SectionList
       style={style}
@@ -121,7 +144,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('!!!! 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'}
       {...panHandlers}

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

@@ -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 = getRouteParam('commentId', route)
 
   const commentsRef = React.useRef()
   const isModalScreen = useIsModalScreen()
@@ -89,6 +90,7 @@ export default function PostDetails () {
       <Comments
         ref={commentsRef}
         postId={post.id}
+        selectedCommentId={selectedCommentId}
         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/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
+}

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