From fe327300256a81adf261a7c8e9537b86feb0fd71 Mon Sep 17 00:00:00 2001
From: Ansh <anshnanda10@gmail.com>
Date: Wed, 5 Jul 2023 17:56:26 -0700
Subject: [PATCH] [APP-702] Render Custom Feed likes properly (#980)

* render href for custom feed likes properly

* fix custom feed text in push notification

* fix custom feed accessibility title

* fix lint
---
 src/lib/notifee.ts                      |  5 ++++-
 src/state/models/feeds/notifications.ts |  8 +++++++-
 src/view/com/notifications/FeedItem.tsx | 12 ++++++++++++
 src/view/com/pager/TabBar.tsx           |  4 ++--
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/lib/notifee.ts b/src/lib/notifee.ts
index 42feb01c..485d79ae 100644
--- a/src/lib/notifee.ts
+++ b/src/lib/notifee.ts
@@ -1,5 +1,5 @@
 import notifee, {EventType} from '@notifee/react-native'
-import {AppBskyEmbedImages} from '@atproto/api'
+import {AppBskyEmbedImages, AtUri} from '@atproto/api'
 import {RootStoreModel} from 'state/models/root-store'
 import {NotificationsFeedItemModel} from 'state/models/feeds/notifications'
 import {enforceLen} from 'lib/strings/helpers'
@@ -63,6 +63,9 @@ export function displayNotificationFromModel(
   } else if (notification.isFollow) {
     title = 'New follower!'
     body = `${author} has followed you`
+  } else if (notification.isCustomFeedLike) {
+    title = `${author} liked your custom feed`
+    body = `${new AtUri(notification.subjectUri).rkey}`
   } else {
     return
   }
diff --git a/src/state/models/feeds/notifications.ts b/src/state/models/feeds/notifications.ts
index 5005f1d9..05e2ef0d 100644
--- a/src/state/models/feeds/notifications.ts
+++ b/src/state/models/feeds/notifications.ts
@@ -145,7 +145,7 @@ export class NotificationsFeedItemModel {
   }
 
   get isLike() {
-    return this.reason === 'like'
+    return this.reason === 'like' && !this.isCustomFeedLike // the reason property for custom feed likes is also 'like'
   }
 
   get isRepost() {
@@ -168,6 +168,12 @@ export class NotificationsFeedItemModel {
     return this.reason === 'follow'
   }
 
+  get isCustomFeedLike() {
+    return (
+      this.reason === 'like' && this.reasonSubject?.includes('feed.generator')
+    )
+  }
+
   get needsAdditionalData() {
     if (
       this.isLike ||
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 7994c53a..6c03d7f9 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -65,6 +65,9 @@ export const FeedItem = observer(function ({
     } else if (item.isReply) {
       const urip = new AtUri(item.uri)
       return `/profile/${urip.host}/post/${urip.rkey}`
+    } else if (item.isCustomFeedLike) {
+      const urip = new AtUri(item.subjectUri)
+      return `/profile/${urip.host}/feed/${urip.rkey}`
     }
     return ''
   }, [item])
@@ -75,6 +78,8 @@ export const FeedItem = observer(function ({
       return item.author.handle
     } else if (item.isReply) {
       return 'Post'
+    } else if (item.isCustomFeedLike) {
+      return 'Custom Feed'
     }
   }, [item])
 
@@ -160,6 +165,13 @@ export const FeedItem = observer(function ({
     action = 'followed you'
     icon = 'user-plus'
     iconStyle = [s.blue3 as FontAwesomeIconStyle]
+  } else if (item.isCustomFeedLike) {
+    action = `liked your custom feed '${new AtUri(item.subjectUri).rkey}'`
+    icon = 'HeartIconSolid'
+    iconStyle = [
+      s.red3 as FontAwesomeIconStyle,
+      {position: 'relative', top: -4},
+    ]
   } else {
     return null
   }
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 5f309b56..9ca02a7f 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -109,7 +109,7 @@ const styles = isDesktopWeb
         paddingHorizontal: 10,
         borderBottomWidth: 3,
         borderBottomColor: 'transparent',
-        justifyContent: 'center'
+        justifyContent: 'center',
       },
     })
   : StyleSheet.create({
@@ -130,6 +130,6 @@ const styles = isDesktopWeb
         paddingHorizontal: isMobileWeb ? 8 : 0,
         borderBottomWidth: 3,
         borderBottomColor: 'transparent',
-        justifyContent: 'center'
+        justifyContent: 'center',
       },
     })