[C-5071] Scroll to top for new comments on mobile

packages/common/src/context/comments/commentsContext.tsx

@@ -34,9 +34,9 @@ type CommentSectionProviderProps = {
   // These are optional because they are only used on mobile
   // and provided for the components in CommentDrawer
   replyingToComment?: Comment | ReplyComment
-  setReplyingToComment?: (comment: Comment | ReplyComment) => void
+  setReplyingToComment?: (comment: Comment | ReplyComment | undefined) => void
   editingComment?: Comment | ReplyComment
-  setEditingComment?: (comment: Comment | ReplyComment) => void
+  setEditingComment?: (comment: Comment | ReplyComment | undefined) => void
 }
 
 type CommentSectionContextType = {

packages/mobile/src/components/comments/CommentDrawer.tsx

@@ -1,11 +1,15 @@
+import type { RefObject } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import {
   CommentSectionProvider,
   useCurrentCommentSection
 } from '@audius/common/context'
 import type { Comment, ReplyComment } from '@audius/common/models'
-import type { BottomSheetFooterProps } from '@gorhom/bottom-sheet'
+import type {
+  BottomSheetFlatListMethods,
+  BottomSheetFooterProps
+} from '@gorhom/bottom-sheet'
 import {
   BottomSheetFlatList,
   BottomSheetBackdrop,
@@ -26,7 +30,10 @@ import { NoComments } from './NoComments'
 import { useGestureEventsHandlers } from './useGestureEventHandlers'
 import { useScrollEventsHandlers } from './useScrollEventHandlers'
 
-const CommentDrawerContent = () => {
+const CommentDrawerContent = (props: {
+  commentListRef: RefObject<BottomSheetFlatListMethods>
+}) => {
+  const { commentListRef } = props
   const {
     comments,
     commentSectionLoading: isLoading,
@@ -56,6 +63,7 @@ const CommentDrawerContent = () => {
 
   return (
     <BottomSheetFlatList
+      ref={commentListRef}
       data={comments}
       keyExtractor={({ id }) => id.toString()}
       ListHeaderComponent={<Box h='l' />}
@@ -89,6 +97,7 @@ const BORDER_RADIUS = 40
 export const CommentDrawer = () => {
   const { color } = useTheme()
   const insets = useSafeAreaInsets()
+  const commentListRef = useRef<BottomSheetFlatListMethods>(null)
 
   const [replyingToComment, setReplyingToComment] = useState<
     Comment | ReplyComment
@@ -122,7 +131,7 @@ export const CommentDrawer = () => {
           editingComment={editingComment}
           setEditingComment={setEditingComment}
         >
-          <CommentDrawerForm />
+          <CommentDrawerForm commentListRef={commentListRef} />
         </CommentSectionProvider>
       </BottomSheetFooter>
     ),
@@ -163,7 +172,7 @@ export const CommentDrawer = () => {
         >
           <CommentDrawerHeader bottomSheetModalRef={bottomSheetModalRef} />
           <Divider orientation='horizontal' />
-          <CommentDrawerContent />
+          <CommentDrawerContent commentListRef={commentListRef} />
         </CommentSectionProvider>
       </BottomSheetModal>
       <Box

packages/mobile/src/components/comments/CommentDrawerForm.tsx

@@ -1,3 +1,4 @@
+import type { RefObject } from 'react'
 import React from 'react'
 
 import {
@@ -7,13 +8,22 @@ import {
 } from '@audius/common/context'
 import type { ID } from '@audius/common/models'
 import { Status } from '@audius/common/models'
+import type { BottomSheetFlatListMethods } from '@gorhom/bottom-sheet'
 
 import { Box } from '@audius/harmony-native'
 
 import { CommentForm } from './CommentForm'
 
-export const CommentDrawerForm = () => {
-  const { editingComment, replyingToComment } = useCurrentCommentSection()
+export const CommentDrawerForm = (props: {
+  commentListRef: RefObject<BottomSheetFlatListMethods>
+}) => {
+  const { commentListRef } = props
+  const {
+    editingComment,
+    replyingToComment,
+    setReplyingToComment,
+    setEditingComment
+  } = useCurrentCommentSection()
   const [postComment, { status: postCommentStatus }] = usePostComment()
   const [editComment] = useEditComment()
 
@@ -24,6 +34,14 @@ export const CommentDrawerForm = () => {
     }
 
     postComment(message, replyingToComment?.id)
+
+    // Scroll to top of comments when posting a new comment
+    if (!editingComment && !replyingToComment) {
+      commentListRef.current?.scrollToOffset({ offset: 0 })
+    }
+
+    setReplyingToComment?.(undefined)
+    setEditingComment?.(undefined)
   }
 
   const isLoading = postCommentStatus === Status.LOADING

packages/mobile/src/components/comments/CommentForm.tsx

@@ -78,6 +78,7 @@ export const CommentForm = (props: CommentFormProps) => {
       ) : null}
       <Box flex={1}>
         <ComposerInput
+          ref={ref}
           isLoading={isLoading}
           messageId={messageId}
           entityId={entityId}

packages/mobile/src/components/composer-input/ComposerInput.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import type { Ref } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 
 import { useGetTrackById } from '@audius/common/api'
 import { useAudiusLinkResolver } from '@audius/common/hooks'
@@ -8,6 +9,7 @@ import {
   timestampRegex
 } from '@audius/common/utils'
 import { Platform, TouchableOpacity, View } from 'react-native'
+import type { TextInput as RnTextInput } from 'react-native'
 import type {
   NativeSyntheticEvent,
   TextInputKeyPressEventData,
@@ -84,7 +86,10 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   }
 }))
 
-export const ComposerInput = (props: ComposerInputProps) => {
+export const ComposerInput = forwardRef(function ComposerInput(
+  props: ComposerInputProps,
+  ref: Ref<RnTextInput>
+) {
   const styles = useStyles()
   const {
     onSubmit,
@@ -264,6 +269,7 @@ export const ComposerInput = (props: ComposerInputProps) => {
   return (
     <>
       <TextInput
+        ref={ref}
         placeholder={placeholder ?? messages.sendMessagePlaceholder}
         Icon={renderIcon}
         styles={{
@@ -296,4 +302,4 @@ export const ComposerInput = (props: ComposerInputProps) => {
       </View>
     </>
   )
-}
+})