diff --git a/packages/common/src/context/comments/commentsContext.tsx b/packages/common/src/context/comments/commentsContext.tsx index 1d6b9cf1633..1a2caa449df 100644 --- a/packages/common/src/context/comments/commentsContext.tsx +++ b/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 = { diff --git a/packages/mobile/src/components/comments/CommentDrawer.tsx b/packages/mobile/src/components/comments/CommentDrawer.tsx index 67480ece696..33068f6aa41 100644 --- a/packages/mobile/src/components/comments/CommentDrawer.tsx +++ b/packages/mobile/src/components/comments/CommentDrawer.tsx @@ -1,3 +1,4 @@ +import type { RefObject } from 'react' import React, { useCallback, useEffect, useRef, useState } from 'react' import { @@ -5,7 +6,10 @@ import { 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 +}) => { + const { commentListRef } = props const { comments, commentSectionLoading: isLoading, @@ -56,6 +63,7 @@ const CommentDrawerContent = () => { return ( id.toString()} ListHeaderComponent={} @@ -89,6 +97,7 @@ const BORDER_RADIUS = 40 export const CommentDrawer = () => { const { color } = useTheme() const insets = useSafeAreaInsets() + const commentListRef = useRef(null) const [replyingToComment, setReplyingToComment] = useState< Comment | ReplyComment @@ -122,7 +131,7 @@ export const CommentDrawer = () => { editingComment={editingComment} setEditingComment={setEditingComment} > - + ), @@ -163,7 +172,7 @@ export const CommentDrawer = () => { > - + { - const { editingComment, replyingToComment } = useCurrentCommentSection() +export const CommentDrawerForm = (props: { + commentListRef: RefObject +}) => { + 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 diff --git a/packages/mobile/src/components/comments/CommentForm.tsx b/packages/mobile/src/components/comments/CommentForm.tsx index ad537b13ca6..16dc128394a 100644 --- a/packages/mobile/src/components/comments/CommentForm.tsx +++ b/packages/mobile/src/components/comments/CommentForm.tsx @@ -78,6 +78,7 @@ export const CommentForm = (props: CommentFormProps) => { ) : null} ({ } })) -export const ComposerInput = (props: ComposerInputProps) => { +export const ComposerInput = forwardRef(function ComposerInput( + props: ComposerInputProps, + ref: Ref +) { const styles = useStyles() const { onSubmit, @@ -264,6 +269,7 @@ export const ComposerInput = (props: ComposerInputProps) => { return ( <> { ) -} +})