From ae25cb33919c2d308d24d2ac20d884871ad71ce3 Mon Sep 17 00:00:00 2001 From: dan Date: Thu, 8 Aug 2024 17:58:58 +0100 Subject: Move onPressReply into child component (#4898) * Move ComposePrompt to post-thread/ * Move onPressReply into child component --- src/view/com/composer/Prompt.tsx | 59 -------------------- src/view/com/post-thread/PostThread.tsx | 34 ++++++++---- .../com/post-thread/PostThreadComposePrompt.tsx | 63 ++++++++++++++++++++++ src/view/screens/PostThread.tsx | 34 +----------- 4 files changed, 89 insertions(+), 101 deletions(-) delete mode 100644 src/view/com/composer/Prompt.tsx create mode 100644 src/view/com/post-thread/PostThreadComposePrompt.tsx (limited to 'src') diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx deleted file mode 100644 index 20637c7e9..000000000 --- a/src/view/com/composer/Prompt.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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 ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { - const {currentAccount} = useSession() - const {data: profile} = useProfileQuery({did: currentAccount?.did}) - const pal = usePalette('default') - const {_} = useLingui() - const {isDesktop} = useWebMediaQueries() - return ( - onPressCompose()} - accessibilityRole="button" - accessibilityLabel={_(msg`Compose reply`)} - accessibilityHint={_(msg`Opens composer`)}> - - - Write your reply - - - ) -} - -const styles = StyleSheet.create({ - prompt: { - paddingHorizontal: 16, - paddingTop: 10, - paddingBottom: 10, - flexDirection: 'row', - alignItems: 'center', - borderTopWidth: StyleSheet.hairlineWidth, - }, - labelMobile: { - paddingLeft: 12, - }, - labelDesktopWeb: { - paddingLeft: 12, - }, -}) 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 ( - {!isMobile && } + {!isMobile && ( + + )} ) } 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), }, ]}> - + ) } 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 ( + onPressCompose()} + accessibilityRole="button" + accessibilityLabel={_(msg`Compose reply`)} + accessibilityHint={_(msg`Opens composer`)}> + + + Write your reply + + + ) +} + +const styles = StyleSheet.create({ + prompt: { + paddingHorizontal: 16, + paddingTop: 10, + paddingBottom: 10, + flexDirection: 'row', + alignItems: 'center', + borderTopWidth: StyleSheet.hairlineWidth, + }, + labelMobile: { + paddingLeft: 12, + }, + labelDesktopWeb: { + paddingLeft: 12, + }, +}) diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 43dae2f1a..88d0726c1 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -1,14 +1,8 @@ import React from 'react' import {View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' -import { - RQKEY as POST_THREAD_RQKEY, - ThreadNode, -} from '#/state/queries/post-thread' import {useSetMinimalShellMode} from '#/state/shell' -import {useComposerControls} from '#/state/shell/composer' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {makeRecordUri} from 'lib/strings/url-helpers' import {s} from 'lib/styles' @@ -16,9 +10,8 @@ import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' type Props = NativeStackScreenProps export function PostThreadScreen({route}: Props) { - const queryClient = useQueryClient() const setMinimalShellMode = useSetMinimalShellMode() - const {openComposer} = useComposerControls() + const {name, rkey} = route.params const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) @@ -28,33 +21,10 @@ export function PostThreadScreen({route}: Props) { }, [setMinimalShellMode]), ) - const onPressReply = React.useCallback(() => { - if (!uri) { - return - } - const thread = queryClient.getQueryData(POST_THREAD_RQKEY(uri)) - 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: () => - queryClient.invalidateQueries({ - queryKey: POST_THREAD_RQKEY(uri), - }), - }) - }, [openComposer, queryClient, uri]) - return ( - + ) -- cgit 1.4.1