Add reply information to feed items

2 files changed, 72 insertions, 0 deletions

diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 684b261a8..53abc4309 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -8,6 +8,7 @@ import {FeedViewItemModel} from '../../../state/models/feed-view'
 import {ComposePostModel, SharePostModel} from '../../../state/models/shell'
 import {Link} from '../util/Link'
 import {PostDropdownBtn} from '../util/DropdownBtn'
+import {UserInfoText} from '../util/UserInfoText'
 import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
 import {DEF_AVATER} from '../../lib/assets'
@@ -26,6 +27,16 @@ export const FeedItem = observer(function FeedItem({
   }, [item.uri, item.author.name])
   const itemTitle = `Post by ${item.author.name}`
   const authorHref = `/profile/${item.author.name}`
+  const replyAuthorDid = useMemo(() => {
+    if (!record.reply) return ''
+    const urip = new AdxUri(record.reply.parent || record.reply.root)
+    return urip.hostname
+  }, [record.reply])
+  const replyHref = useMemo(() => {
+    if (!record.reply) return ''
+    const urip = new AdxUri(record.reply.parent || record.reply.root)
+    return `/profile/${urip.hostname}/post/${urip.recordKey}`
+  }, [record.reply])
 
   const onPressReply = () => {
     store.shell.openModal(new ComposePostModel(item.uri))
@@ -90,6 +101,19 @@ export const FeedItem = observer(function FeedItem({
               />
             </PostDropdownBtn>
           </View>
+          {replyHref !== '' && (
+            <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
+              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
+              <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
+              <Link href={replyHref} title="Parent post">
+                <UserInfoText
+                  did={replyAuthorDid}
+                  style={[s.f12, s.gray5]}
+                  prefix="@"
+                />
+              </Link>
+            </View>
+          )}
           <Text style={[styles.postText, s.f15, s['lh15-1.3']]}>
             {record.text}
           </Text>
diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx
new file mode 100644
index 000000000..39aef3306
--- /dev/null
+++ b/src/view/com/util/UserInfoText.tsx
@@ -0,0 +1,48 @@
+import React, {useState, useEffect} from 'react'
+import * as TodoSocialGetProfile from '../../../third-party/api/src/types/todo/social/getProfile'
+import {StyleProp, Text, TextStyle} from 'react-native'
+import {useStores} from '../../../state'
+
+export function UserInfoText({
+  did,
+  attr,
+  loading,
+  failed,
+  prefix,
+  style,
+}: {
+  did: string
+  attr?: keyof TodoSocialGetProfile.OutputSchema
+  loading?: string
+  failed?: string
+  prefix?: string
+  style?: StyleProp<TextStyle>
+}) {
+  attr = attr || 'name'
+  loading = loading || '...'
+  failed = failed || 'user'
+
+  const store = useStores()
+  const [profile, setProfile] = useState<
+    undefined | TodoSocialGetProfile.OutputSchema
+  >(undefined)
+  const [didFail, setFailed] = useState<boolean>(false)
+
+  useEffect(() => {
+    // TODO use caching to reduce loads
+    store.api.todo.social.getProfile({user: did}).then(
+      v => {
+        setProfile(v.data)
+      },
+      _err => {
+        setFailed(true)
+      },
+    )
+  }, [did, store.api.todo.social])
+
+  return (
+    <Text style={style}>
+      {didFail ? failed : profile ? `${prefix}${profile[attr]}` : loading}
+    </Text>
+  )
+}