diff options
Diffstat (limited to 'src/view/com/post-thread')
-rw-r--r-- | src/view/com/post-thread/PostThread.tsx | 34 | ||||
-rw-r--r-- | src/view/com/post-thread/PostThreadComposePrompt.tsx | 63 |
2 files changed, 87 insertions, 10 deletions
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 401457412..704c7d325 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -24,6 +24,7 @@ import { } from '#/state/queries/post-thread' import {usePreferencesQuery} from '#/state/queries/preferences' import {useSession} from '#/state/session' +import {useComposerControls} from '#/state/shell' import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' import {useMinimalShellFabTransform} from 'lib/hooks/useMinimalShellTransform' import {useSetTitle} from 'lib/hooks/useSetTitle' @@ -34,9 +35,9 @@ import {CenteredView} from 'view/com/util/Views' import {atoms as a, useTheme} from '#/alf' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' import {Text} from '#/components/Typography' -import {ComposePrompt} from '../composer/Prompt' import {List, ListMethods} from '../util/List' import {ViewHeader} from '../util/ViewHeader' +import {PostThreadComposePrompt} from './PostThreadComposePrompt' import {PostThreadItem} from './PostThreadItem' import {PostThreadLoadMore} from './PostThreadLoadMore' import {PostThreadShowHiddenReplies} from './PostThreadShowHiddenReplies' @@ -84,13 +85,7 @@ const keyExtractor = (item: RowItem) => { return item._reactKey } -export function PostThread({ - uri, - onPressReply, -}: { - uri: string | undefined - onPressReply: () => unknown -}) { +export function PostThread({uri}: {uri: string | undefined}) { const {hasSession, currentAccount} = useSession() const {_} = useLingui() const t = useTheme() @@ -307,6 +302,23 @@ export function PostThread({ setMaxReplies(prev => prev + 50) }, [isFetching, maxReplies, posts.length]) + const {openComposer} = useComposerControls() + const onPressReply = React.useCallback(() => { + if (thread?.type !== 'post') { + return + } + openComposer({ + replyTo: { + uri: thread.post.uri, + cid: thread.post.cid, + text: thread.record.text, + author: thread.post.author, + embed: thread.post.embed, + }, + onPost: () => refetch(), + }) + }, [openComposer, thread, refetch]) + const canReply = !error && rootPost && !rootPost.viewer?.replyDisabled const hasParents = skeleton?.highlightedPost?.type === 'post' && @@ -319,7 +331,9 @@ export function PostThread({ if (item === REPLY_PROMPT && hasSession) { return ( <View> - {!isMobile && <ComposePrompt onPressCompose={onPressReply} />} + {!isMobile && ( + <PostThreadComposePrompt onPressCompose={onPressReply} /> + )} </View> ) } else if (item === SHOW_HIDDEN_REPLIES || item === SHOW_MUTED_REPLIES) { @@ -487,7 +501,7 @@ function MobileComposePrompt({onPressReply}: {onPressReply: () => unknown}) { bottom: clamp(safeAreaInsets.bottom, 15, 30), }, ]}> - <ComposePrompt onPressCompose={onPressReply} /> + <PostThreadComposePrompt onPressCompose={onPressReply} /> </Animated.View> ) } diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx new file mode 100644 index 000000000..62b28cc75 --- /dev/null +++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useProfileQuery} from '#/state/queries/profile' +import {useSession} from '#/state/session' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' + +export function PostThreadComposePrompt({ + onPressCompose, +}: { + onPressCompose: () => void +}) { + const {currentAccount} = useSession() + const {data: profile} = useProfileQuery({did: currentAccount?.did}) + const pal = usePalette('default') + const {_} = useLingui() + const {isDesktop} = useWebMediaQueries() + return ( + <TouchableOpacity + testID="replyPromptBtn" + style={[pal.view, pal.border, styles.prompt]} + onPress={() => onPressCompose()} + accessibilityRole="button" + accessibilityLabel={_(msg`Compose reply`)} + accessibilityHint={_(msg`Opens composer`)}> + <UserAvatar + avatar={profile?.avatar} + size={38} + type={profile?.associated?.labeler ? 'labeler' : 'user'} + /> + <Text + type="xl" + style={[ + pal.text, + isDesktop ? styles.labelDesktopWeb : styles.labelMobile, + ]}> + <Trans>Write your reply</Trans> + </Text> + </TouchableOpacity> + ) +} + +const styles = StyleSheet.create({ + prompt: { + paddingHorizontal: 16, + paddingTop: 10, + paddingBottom: 10, + flexDirection: 'row', + alignItems: 'center', + borderTopWidth: StyleSheet.hairlineWidth, + }, + labelMobile: { + paddingLeft: 12, + }, + labelDesktopWeb: { + paddingLeft: 12, + }, +}) |