Implement scene invitation and membership controls

src/view/com/notifications/FeedItem.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {Image, StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 import {AtUri} from '../../../third-party/uri'
 import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
 import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
@@ -11,6 +11,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {PostText} from '../post/PostText'
 import {Post} from '../post/Post'
 import {Link} from '../util/Link'
+import {InviteAccepter} from './InviteAccepter'
 
 const MAX_AUTHORS = 8
 
@@ -20,10 +21,10 @@ export const FeedItem = observer(function FeedItem({
   item: NotificationsViewItemModel
 }) {
   const itemHref = useMemo(() => {
-    if (item.isUpvote || item.isRepost) {
+    if (item.isUpvote || item.isRepost || item.isTrend) {
       const urip = new AtUri(item.subjectUri)
       return `/profile/${urip.host}/post/${urip.rkey}`
-    } else if (item.isFollow) {
+    } else if (item.isFollow || item.isAssertion) {
       return `/profile/${item.author.handle}`
     } else if (item.isReply) {
       const urip = new AtUri(item.uri)
@@ -34,7 +35,7 @@ export const FeedItem = observer(function FeedItem({
   const itemTitle = useMemo(() => {
     if (item.isUpvote || item.isRepost) {
       return 'Post'
-    } else if (item.isFollow) {
+    } else if (item.isFollow || item.isAssertion) {
       return item.author.handle
     } else if (item.isReply) {
       return 'Post'
@@ -66,6 +67,10 @@ export const FeedItem = observer(function FeedItem({
     action = 'reposted your post'
     icon = 'retweet'
     iconStyle = [s.green3]
+  } else if (item.isTrend) {
+    action = 'Your post is trending with'
+    icon = 'arrow-trend-up'
+    iconStyle = [s.blue3]
   } else if (item.isReply) {
     action = 'replied to your post'
     icon = ['far', 'comment']
@@ -73,6 +78,10 @@ export const FeedItem = observer(function FeedItem({
     action = 'followed you'
     icon = 'user-plus'
     iconStyle = [s.blue3]
+  } else if (item.isInvite) {
+    icon = 'users'
+    iconStyle = [s.blue3]
+    action = 'invited you to join their scene'
   } else {
     return <></>
   }
@@ -133,6 +142,9 @@ export const FeedItem = observer(function FeedItem({
             ) : undefined}
           </View>
           <View style={styles.meta}>
+            {item.isTrend && (
+              <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+            )}
             <Link
               key={authors[0].href}
               style={styles.metaItem}
@@ -150,7 +162,9 @@ export const FeedItem = observer(function FeedItem({
                 </Text>
               </>
             ) : undefined}
-            <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+            {!item.isTrend && (
+              <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+            )}
             <Text style={[styles.metaItem, s.f15, s.gray5]}>
               {ago(item.indexedAt)}
             </Text>
@@ -162,6 +176,11 @@ export const FeedItem = observer(function FeedItem({
           )}
         </View>
       </View>
+      {item.isInvite && (
+        <View style={styles.addedContainer}>
+          <InviteAccepter item={item} />
+        </View>
+      )}
       {item.isReply ? (
         <View style={s.pt5}>
           <Post uri={item.uri} />
@@ -216,6 +235,7 @@ const styles = StyleSheet.create({
   },
   meta: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     paddingTop: 6,
     paddingBottom: 2,
   },
@@ -225,4 +245,9 @@ const styles = StyleSheet.create({
   postText: {
     paddingBottom: 5,
   },
+
+  addedContainer: {
+    paddingTop: 4,
+    paddingLeft: 36,
+  },
 })