[C-5212] Open comment drawer from empty state (#10117)

Author: sliptype

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

@@ -199,6 +199,7 @@ const BORDER_RADIUS = 40
 export type CommentDrawerData = {
   entityId: number
   navigation: NativeStackNavigationProp<ParamListBase>
+  autoFocusInput?: boolean
 }
 
 type CommentDrawerProps = {
@@ -207,7 +208,13 @@ type CommentDrawerProps = {
 } & CommentDrawerData
 
 export const CommentDrawer = (props: CommentDrawerProps) => {
-  const { entityId, navigation, bottomSheetModalRef, handleClose } = props
+  const {
+    entityId,
+    navigation,
+    bottomSheetModalRef,
+    handleClose,
+    autoFocusInput
+  } = props
   const { color } = useTheme()
   const insets = useSafeAreaInsets()
   const commentListRef = useRef<BottomSheetFlatListMethods>(null)
@@ -245,6 +252,7 @@ export const CommentDrawer = (props: CommentDrawerProps) => {
             commentListRef={commentListRef}
             onAutocompleteChange={onAutoCompleteChange}
             setAutocompleteHandler={setAutocompleteHandler}
+            autoFocus={autoFocusInput}
           />
         </CommentSectionProvider>
       </BottomSheetFooter>

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

@@ -54,8 +54,7 @@ export const CommentDrawerProvider = (props: PropsWithChildren) => {
       {children}
       {drawerData ? (
         <CommentDrawer
-          entityId={drawerData!.entityId}
-          navigation={drawerData!.navigation}
+          {...drawerData}
           bottomSheetModalRef={bottomSheetModalRef}
           handleClose={close}
         />

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

@@ -23,10 +23,16 @@ type CommentDrawerFormProps = {
   commentListRef: RefObject<BottomSheetFlatListMethods>
   onAutocompleteChange?: (isActive: boolean, value: string) => void
   setAutocompleteHandler?: (handler: (user: UserMetadata) => void) => void
+  autoFocus?: boolean
 }
 
 export const CommentDrawerForm = (props: CommentDrawerFormProps) => {
-  const { commentListRef, onAutocompleteChange, setAutocompleteHandler } = props
+  const {
+    commentListRef,
+    onAutocompleteChange,
+    setAutocompleteHandler,
+    autoFocus
+  } = props
   const insets = useSafeAreaInsets()
   const { entityId, replyingAndEditingState, setReplyingAndEditingState } =
     useCurrentCommentSection()
@@ -69,6 +75,7 @@ export const CommentDrawerForm = (props: CommentDrawerFormProps) => {
         onAutocompleteChange={onAutocompleteChange}
         setAutocompleteHandler={setAutocompleteHandler}
         TextInputComponent={BottomSheetTextInput as any}
+        autoFocus={autoFocus}
       />
     </Box>
   )

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

@@ -69,22 +69,24 @@ const CommentFormHelperText = (props: CommentFormHelperTextProps) => {
 }
 
 type CommentFormProps = {
-  onSubmit: (commentMessage: string, mentions?: ID[]) => void
+  onSubmit?: (commentMessage: string, mentions?: ID[]) => void
   initialValue?: string
   isLoading?: boolean
   onAutocompleteChange?: (isActive: boolean, value: string) => void
   setAutocompleteHandler?: (handler: (user: UserMetadata) => void) => void
   TextInputComponent?: typeof RNTextInput
+  autoFocus?: boolean
 }
 
 export const CommentForm = (props: CommentFormProps) => {
   const {
     isLoading,
     setAutocompleteHandler,
     onAutocompleteChange,
-    onSubmit,
+    onSubmit = () => {},
     initialValue,
-    TextInputComponent
+    TextInputComponent,
+    autoFocus
   } = props
   const [messageId, setMessageId] = useState(0)
   const [initialMessage, setInitialMessage] = useState(initialValue)
@@ -128,6 +130,12 @@ export const CommentForm = (props: CommentFormProps) => {
     }
   }, [editingComment])
 
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus()
+    }
+  }, [autoFocus])
+
   const handleLayout = useCallback(() => {
     if (
       (replyingToComment || editingComment) &&

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

@@ -2,12 +2,11 @@ import { useCallback } from 'react'
 
 import {
   CommentSectionProvider,
-  useCurrentCommentSection,
-  usePostComment
+  useCurrentCommentSection
 } from '@audius/common/context'
 import { commentsMessages as messages } from '@audius/common/messages'
 import type { ID } from '@audius/common/models'
-import { TouchableOpacity } from 'react-native'
+import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
 import { useEffectOnce } from 'react-use'
 
 import {
@@ -29,6 +28,7 @@ import { CommentForm } from './CommentForm'
 type CommentSectionHeaderProps = {
   openCommentDrawer: () => void
 }
+
 const CommentSectionHeader = (props: CommentSectionHeaderProps) => {
   const { openCommentDrawer } = props
   const {
@@ -68,18 +68,25 @@ const CommentSectionHeader = (props: CommentSectionHeaderProps) => {
   )
 }
 
-const CommentSectionContent = () => {
+type CommentSectionContentProps = {
+  openCommentDrawer: (args?: { autoFocusInput?: boolean }) => void
+}
+
+const CommentSectionContent = (props: CommentSectionContentProps) => {
+  const { openCommentDrawer } = props
   const {
     commentSectionLoading: isLoading,
     commentIds,
     isEntityOwner
   } = useCurrentCommentSection()
 
-  const [postComment] = usePostComment()
+  const handlePress = useCallback(() => {
+    openCommentDrawer()
+  }, [openCommentDrawer])
 
-  const handlePostComment = (message: string, mentions?: ID[]) => {
-    postComment(message, undefined, undefined, mentions)
-  }
+  const handleFormPress = useCallback(() => {
+    openCommentDrawer({ autoFocusInput: true })
+  }, [openCommentDrawer])
 
   // Loading state
   if (isLoading) {
@@ -101,12 +108,22 @@ const CommentSectionContent = () => {
         <Text variant='body'>
           {isEntityOwner ? messages.noCommentsOwner : messages.noComments}
         </Text>
-        <CommentForm onSubmit={handlePostComment} />
+        <TouchableWithoutFeedback onPress={handleFormPress}>
+          <View>
+            <View pointerEvents='none'>
+              <CommentForm />
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
       </Flex>
     )
   }
 
-  return <CommentBlock commentId={commentIds[0]} hideActions />
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <CommentBlock commentId={commentIds[0]} hideActions />
+    </TouchableOpacity>
+  )
 }
 
 type CommentSectionProps = {
@@ -122,9 +139,13 @@ export const CommentSection = (props: CommentSectionProps) => {
   const navigation = useNavigation()
   const { open } = useCommentDrawer()
 
-  const openCommentDrawer = useCallback(() => {
-    open({ entityId, navigation })
-  }, [open, entityId, navigation])
+  const openCommentDrawer = useCallback(
+    (args: { autoFocusInput?: boolean } = {}) => {
+      const { autoFocusInput } = args
+      open({ entityId, navigation, autoFocusInput })
+    },
+    [open, entityId, navigation]
+  )
 
   useEffectOnce(() => {
     if (showComments) {
@@ -137,9 +158,7 @@ export const CommentSection = (props: CommentSectionProps) => {
       <Flex gap='s' direction='column' w='100%' alignItems='flex-start'>
         <CommentSectionHeader openCommentDrawer={openCommentDrawer} />
         <Paper w='100%' direction='column' gap='s' p='l'>
-          <TouchableOpacity onPress={openCommentDrawer}>
-            <CommentSectionContent />
-          </TouchableOpacity>
+          <CommentSectionContent openCommentDrawer={openCommentDrawer} />
         </Paper>
       </Flex>
     </CommentSectionProvider>