From fbcf0d79d11e70c89995e62db97e5a20dc3b1475 Mon Sep 17 00:00:00 2001 From: Paul Frazee <pfrazee@gmail.com> Date: Wed, 23 Nov 2022 13:28:29 -0600 Subject: [PATCH] Show parent post in composer when replying (close #3) --- src/state/models/shell-ui.ts | 12 ++++++++-- src/view/com/composer/ComposePost.tsx | 25 +++++++++++++++++++++ src/view/com/post-thread/PostThreadItem.tsx | 10 ++++++++- src/view/com/post/Post.tsx | 12 +++++++++- src/view/com/posts/FeedItem.tsx | 12 +++++++++- 5 files changed, 66 insertions(+), 5 deletions(-) diff --git a/src/state/models/shell-ui.ts b/src/state/models/shell-ui.ts index 13d72073..fa8e3c18 100644 --- a/src/state/models/shell-ui.ts +++ b/src/state/models/shell-ui.ts @@ -1,6 +1,5 @@ import {makeAutoObservable} from 'mobx' import {ProfileViewModel} from './profile-view' -import * as Post from '../../third-party/api/src/client/types/app/bsky/feed/post' export class ConfirmModel { name = 'confirm' @@ -52,8 +51,17 @@ export class ServerInputModel { } } +export interface ComposerOptsPostRef { + uri: string + cid: string + text: string + author: { + handle: string + displayName?: string + } +} export interface ComposerOpts { - replyTo?: Post.PostRef + replyTo?: ComposerOptsPostRef onPost?: () => void } diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 22659378..bb175f16 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -16,6 +16,7 @@ import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete import {Autocomplete} from './Autocomplete' import Toast from '../util/Toast' import ProgressCircle from '../util/ProgressCircle' +import {TextLink} from '../util/Link' import {useStores} from '../../../state' import * as apilib from '../../../state/lib/api' import {ComposerOpts} from '../../../state/models/shell-ui' @@ -163,6 +164,21 @@ export const ComposePost = observer(function ComposePost({ <Text style={s.red4}>{error}</Text> </View> )} + {replyTo ? ( + <View> + <Text style={s.gray4}> + Replying to{' '} + <TextLink + href={`/profile/${replyTo.author.handle}`} + text={'@' + replyTo.author.handle} + style={[s.bold, s.gray5]} + /> + </Text> + <View style={styles.replyToPost}> + <Text style={s.gray5}>{replyTo.text}</Text> + </View> + </View> + ) : undefined} <TextInput multiline scrollEnabled @@ -250,4 +266,13 @@ const styles = StyleSheet.create({ padding: 5, fontSize: 21, }, + replyToPost: { + paddingHorizontal: 8, + paddingVertical: 6, + borderWidth: 1, + borderColor: colors.gray2, + borderRadius: 6, + marginTop: 5, + marginBottom: 10, + }, }) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index adddd3f0..bb90afe1 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -50,7 +50,15 @@ export const PostThreadItem = observer(function PostThreadItem({ const onPressReply = () => { store.shell.openComposer({ - replyTo: {uri: item.uri, cid: item.cid}, + replyTo: { + uri: item.uri, + cid: item.cid, + text: item.record.text as string, + author: { + handle: item.author.handle, + displayName: item.author.displayName, + }, + }, onPost: onPostReply, }) } diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 10f8048f..d0df1b29 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -73,7 +73,17 @@ export const Post = observer(function Post({uri}: {uri: string}) { replyHref = `/profile/${urip.hostname}/post/${urip.rkey}` } const onPressReply = () => { - store.shell.openComposer({replyTo: {uri: item.uri, cid: item.cid}}) + store.shell.openComposer({ + replyTo: { + uri: item.uri, + cid: item.cid, + text: item.record.text as string, + author: { + handle: item.author.handle, + displayName: item.author.displayName, + }, + }, + }) } const onPressToggleRepost = () => { item diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 4d7b307b..7d28673b 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -43,7 +43,17 @@ export const FeedItem = observer(function FeedItem({ }, [record.reply]) const onPressReply = () => { - store.shell.openComposer({replyTo: {uri: item.uri, cid: item.cid}}) + store.shell.openComposer({ + replyTo: { + uri: item.uri, + cid: item.cid, + text: item.record.text as string, + author: { + handle: item.author.handle, + displayName: item.author.displayName, + }, + }, + }) } const onPressToggleRepost = () => { item