73-post-embeds (#253)

* update api to 0.1.3

* add repost modal with reposting functionality

* add quote post UI

* allow creation and view of quote posts

* Validate the post record before rendering a quote post

* Use createdAt in quote posts for now

* add web modal support

* Tune the quote post rendering

* Make did and declarationCid optional in postmeta

* Make did and declarationCid optional in postmeta

* dont allow image or link preview if quote post

* Handle no-text quote posts

* Tune the repost modal

* Tweak composer post text

* Fix lint

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 26 insertions, 4 deletions

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index a07d91899..0c5d41cab 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -4,15 +4,17 @@ import {Text} from './text/Text'
 import {ago} from 'lib/strings/time'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
+import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
 import FollowButton from '../profile/FollowButton'
 
 interface PostMetaOpts {
+  authorAvatar: string | undefined
   authorHandle: string
   authorDisplayName: string | undefined
   timestamp: string
-  did: string
-  declarationCid: string
+  did?: string
+  declarationCid?: string
   showFollowBtn?: boolean
 }
 
@@ -27,11 +29,18 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
   //      don't change this UI immediately, but rather upon future
   //      renders
   const isFollowing = React.useMemo(
-    () => store.me.follows.isFollowing(opts.did),
+    () =>
+      typeof opts.did === 'string' && store.me.follows.isFollowing(opts.did),
     [opts.did, store.me.follows],
   )
 
-  if (opts.showFollowBtn && !isMe && !isFollowing) {
+  if (
+    opts.showFollowBtn &&
+    !isMe &&
+    !isFollowing &&
+    opts.did &&
+    opts.declarationCid
+  ) {
     // two-liner with follow button
     return (
       <View style={[styles.metaTwoLine]}>
@@ -71,6 +80,16 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
   // one-liner
   return (
     <View style={styles.meta}>
+      {typeof opts.authorAvatar !== 'undefined' && (
+        <View style={[styles.metaItem, styles.avatar]}>
+          <UserAvatar
+            avatar={opts.authorAvatar}
+            handle={opts.authorHandle}
+            displayName={opts.authorDisplayName}
+            size={16}
+          />
+        </View>
+      )}
       <View style={[styles.metaItem, styles.maxWidth]}>
         <Text
           type="lg-bold"
@@ -107,6 +126,9 @@ const styles = StyleSheet.create({
   metaItem: {
     paddingRight: 5,
   },
+  avatar: {
+    alignSelf: 'center',
+  },
   maxWidth: {
     maxWidth: '80%',
   },