From e1f318d1230b0f54edc5ef69d7c99be270478455 Mon Sep 17 00:00:00 2001 From: sliptype Date: Thu, 3 Oct 2024 15:48:16 -0500 Subject: [PATCH 1/4] Add compose helper text --- packages/common/src/messages/comments.ts | 2 + .../src/components/comments/CommentForm.tsx | 84 ++++++++++++++++--- .../composer-input/ComposerInput.tsx | 5 +- .../src/components/composer-input/types.ts | 7 ++ 4 files changed, 84 insertions(+), 14 deletions(-) diff --git a/packages/common/src/messages/comments.ts b/packages/common/src/messages/comments.ts index f4675c4ad0a..305d1138364 100644 --- a/packages/common/src/messages/comments.ts +++ b/packages/common/src/messages/comments.ts @@ -14,11 +14,13 @@ export const commentsMessages = { showMoreReplies: 'Show More Replies', reply: 'Reply', replies: 'Replies', + replyingTo: (handle: string) => `Replying to @${handle}`, showReplies: (replyCount: number) => `${formatCount(replyCount)} ${pluralize('Reply', replyCount)}`, hideReplies: 'Hide Replies', commentsDisabled: 'Comments are disabled for this track', edited: 'edited', + editing: 'Editing comment', commentSettings: 'Comment Settings', description: 'Prevent certain users from commenting on your tracks.', unmute: 'Unmute', diff --git a/packages/mobile/src/components/comments/CommentForm.tsx b/packages/mobile/src/components/comments/CommentForm.tsx index ad537b13ca6..6418c901b0b 100644 --- a/packages/mobile/src/components/comments/CommentForm.tsx +++ b/packages/mobile/src/components/comments/CommentForm.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import { useGetUserById } from '@audius/common/api' import { useCurrentCommentSection } from '@audius/common/context' @@ -6,11 +6,56 @@ import { commentsMessages as messages } from '@audius/common/messages' import type { ID } from '@audius/common/models' import type { TextInput as RNTextInput } from 'react-native' -import { Box, Flex } from '@audius/harmony-native' +import { + Box, + Flex, + IconButton, + IconClose, + Text, + useTheme +} from '@audius/harmony-native' import { ComposerInput } from '../composer-input' import { ProfilePicture } from '../core' +type CommentFormHelperTextProps = { + replyingToUserHandle?: string +} + +const CommentFormHelperText = (props: CommentFormHelperTextProps) => { + const { replyingToUserHandle } = props + const { replyingToComment, setReplyingToComment, setEditingComment } = + useCurrentCommentSection() + const { color, spacing } = useTheme() + + const text = replyingToComment + ? messages.replyingTo(replyingToUserHandle ?? '') + : messages.editing + + const handlePressClear = useCallback(() => { + setReplyingToComment?.(undefined) + setEditingComment?.(undefined) + }, []) + + return ( + + {text} + + + ) +} + type CommentFormProps = { onSubmit: (commentMessage: string, mentions?: ID[]) => void initialValue?: string @@ -68,6 +113,8 @@ export const CommentForm = (props: CommentFormProps) => { ? messages.addComment : messages.firstComment + const showHelperText = editingComment || replyingToComment + return ( {currentUserId ? ( @@ -76,16 +123,29 @@ export const CommentForm = (props: CommentFormProps) => { style={{ width: 40, height: 40, flexShrink: 0 }} /> ) : null} - - - + + {showHelperText ? ( + + ) : null} + + + + ) } diff --git a/packages/mobile/src/components/composer-input/ComposerInput.tsx b/packages/mobile/src/components/composer-input/ComposerInput.tsx index ad543676617..a5b2f98dac3 100644 --- a/packages/mobile/src/components/composer-input/ComposerInput.tsx +++ b/packages/mobile/src/components/composer-input/ComposerInput.tsx @@ -93,7 +93,8 @@ export const ComposerInput = (props: ComposerInputProps) => { messageId, placeholder, presetMessage, - entityId + entityId, + styles: propStyles } = props const [value, setValue] = useState(presetMessage ?? '') const [selection, setSelection] = useState<{ start: number; end: number }>() @@ -267,7 +268,7 @@ export const ComposerInput = (props: ComposerInputProps) => { placeholder={placeholder ?? messages.sendMessagePlaceholder} Icon={renderIcon} styles={{ - root: styles.composeTextContainer, + root: [styles.composeTextContainer, propStyles?.container], input: [ styles.composeTextInput, Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null diff --git a/packages/mobile/src/components/composer-input/types.ts b/packages/mobile/src/components/composer-input/types.ts index 86887d31a3c..2545464d57a 100644 --- a/packages/mobile/src/components/composer-input/types.ts +++ b/packages/mobile/src/components/composer-input/types.ts @@ -1,6 +1,9 @@ import type { LinkEntity } from '@audius/common/hooks' import type { ID } from '@audius/common/models' import type { EntityType } from '@audius/sdk' +import type { TextStyle, ViewStyle } from 'react-native' + +import type { StylesProp } from 'app/styles' import type { TextInputProps } from '../core' @@ -12,6 +15,10 @@ export type ComposerInputProps = { onSubmit?: (value: string, linkEntities: LinkEntity[]) => void presetMessage?: string isLoading?: boolean + styles?: StylesProp<{ + container: ViewStyle + input: TextStyle + }> } & Pick< TextInputProps, 'maxLength' | 'placeholder' | 'onPressIn' | 'readOnly' | 'id' From c77c71e472af5266bbc7dfb4f514ffc696caa433 Mon Sep 17 00:00:00 2001 From: sliptype Date: Thu, 3 Oct 2024 16:20:14 -0500 Subject: [PATCH 2/4] Add clearing reply/editing --- .../mobile/src/components/comments/CommentForm.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/mobile/src/components/comments/CommentForm.tsx b/packages/mobile/src/components/comments/CommentForm.tsx index a0d5c36db7e..f5e8df96050 100644 --- a/packages/mobile/src/components/comments/CommentForm.tsx +++ b/packages/mobile/src/components/comments/CommentForm.tsx @@ -35,10 +35,13 @@ const CommentFormHelperText = (props: CommentFormHelperTextProps) => { const handlePressClear = useCallback(() => { setReplyingToComment?.(undefined) setEditingComment?.(undefined) - }, []) + }, [setEditingComment, setReplyingToComment]) return ( { borderTopLeftRadius: spacing.unit1, borderTopRightRadius: spacing.unit1, padding: spacing.xs, - paddingHorizontal: spacing.m + paddingLeft: spacing.m }} > {text} - + ) } From d96b9083c0c0a472759e5f6d6646dd32eab6af42 Mon Sep 17 00:00:00 2001 From: sliptype Date: Thu, 3 Oct 2024 16:25:05 -0500 Subject: [PATCH 3/4] Add footer divider --- packages/mobile/src/components/comments/CommentDrawer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mobile/src/components/comments/CommentDrawer.tsx b/packages/mobile/src/components/comments/CommentDrawer.tsx index c092c06cdea..ea3f130ce87 100644 --- a/packages/mobile/src/components/comments/CommentDrawer.tsx +++ b/packages/mobile/src/components/comments/CommentDrawer.tsx @@ -124,6 +124,7 @@ export const CommentDrawer = () => { const renderFooterComponent = useCallback( (props: BottomSheetFooterProps) => ( + Date: Thu, 3 Oct 2024 16:28:23 -0500 Subject: [PATCH 4/4] Fix radius --- packages/mobile/src/components/comments/CommentForm.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mobile/src/components/comments/CommentForm.tsx b/packages/mobile/src/components/comments/CommentForm.tsx index f5e8df96050..15b97408994 100644 --- a/packages/mobile/src/components/comments/CommentForm.tsx +++ b/packages/mobile/src/components/comments/CommentForm.tsx @@ -11,6 +11,7 @@ import { Flex, IconButton, IconClose, + spacing, Text, useTheme } from '@audius/harmony-native' @@ -148,8 +149,8 @@ export const CommentForm = (props: CommentFormProps) => { onSubmit={handleSubmit} styles={{ container: { - borderTopLeftRadius: showHelperText ? 0 : 8, - borderTopRightRadius: showHelperText ? 0 : 8 + borderTopLeftRadius: showHelperText ? 0 : spacing.unit1, + borderTopRightRadius: showHelperText ? 0 : spacing.unit1 } }} />