From aa1d1c23a58592b3fa12aba5fdb41627d3548622 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 18 Apr 2024 10:34:51 -0500
Subject: [PATCH] Handle saved feed screen edge case

---
 src/view/com/feeds/FeedSourceCard.tsx | 101 +++++++++++++-------------
 src/view/screens/ProfileFeed.tsx      |   4 +-
 src/view/screens/SavedFeeds.tsx       |  46 ++++++++----
 3 files changed, 86 insertions(+), 65 deletions(-)

diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx
index c1caeb7149..c5cd9ff4c8 100644
--- a/src/view/com/feeds/FeedSourceCard.tsx
+++ b/src/view/com/feeds/FeedSourceCard.tsx
@@ -193,11 +193,9 @@ export function FeedSourceCardLoaded({
       </View>
     )
 
-  const showFeedSaveButton = showSaveBtn && feed.type === 'feed'
+  const primaryAlgo = preferences?.primaryAlgorithm
   const isPrimaryAlgo =
-    preferences.primaryAlgorithm?.enabled &&
-    preferences.primaryAlgorithm?.uri &&
-    preferences.primaryAlgorithm.uri === feed.uri
+    primaryAlgo?.enabled && primaryAlgo?.uri && primaryAlgo.uri === feed.uri
 
   return (
     <>
@@ -236,52 +234,57 @@ export function FeedSourceCardLoaded({
             </Text>
           </View>
 
-          {showFeedSaveButton &&
-            (gate('reduced_onboarding_and_home_algo') && isPrimaryAlgo ? (
-              <Button
-                variant="solid"
-                color="secondary"
-                size="small"
-                label={_(
-                  msg`This feed is already set as your primary algorithm.`,
-                )}
-                onPress={() => {
-                  primaryAlgoDialogControl.open()
-                }}>
-                <ButtonIcon icon={Check} position="left" />
-                <ButtonText>Primary Algorithm</ButtonText>
-              </Button>
-            ) : (
-              <View style={[s.justifyCenter]}>
-                <Pressable
-                  testID={`feed-${feed.displayName}-toggleSave`}
-                  disabled={isSavePending || isPinPending || isRemovePending}
-                  accessibilityRole="button"
-                  accessibilityLabel={
-                    isSaved
-                      ? _(msg`Remove from my feeds`)
-                      : _(msg`Add to my feeds`)
-                  }
-                  accessibilityHint=""
-                  onPress={onToggleSaved}
-                  hitSlop={15}
-                  style={styles.btn}>
-                  {isSaved ? (
-                    <FontAwesomeIcon
-                      icon={['far', 'trash-can']}
-                      size={19}
-                      color={pal.colors.icon}
-                    />
-                  ) : (
-                    <FontAwesomeIcon
-                      icon="plus"
-                      size={18}
-                      color={pal.colors.link}
-                    />
+          {showSaveBtn && feed.type === 'feed' && (
+            <>
+              {gate('reduced_onboarding_and_home_algo') && isPrimaryAlgo ? (
+                <Button
+                  variant="solid"
+                  color="secondary"
+                  size="small"
+                  label={_(
+                    msg`This feed is already set as your primary algorithm.`,
                   )}
-                </Pressable>
-              </View>
-            ))}
+                  onPress={() => {
+                    primaryAlgoDialogControl.open()
+                  }}>
+                  <ButtonIcon icon={Check} position="left" />
+                  <ButtonText>
+                    <Trans>Primary Algorithm</Trans>
+                  </ButtonText>
+                </Button>
+              ) : (
+                <View style={[s.justifyCenter]}>
+                  <Pressable
+                    testID={`feed-${feed.displayName}-toggleSave`}
+                    disabled={isSavePending || isPinPending || isRemovePending}
+                    accessibilityRole="button"
+                    accessibilityLabel={
+                      isSaved
+                        ? _(msg`Remove from my feeds`)
+                        : _(msg`Add to my feeds`)
+                    }
+                    accessibilityHint=""
+                    onPress={onToggleSaved}
+                    hitSlop={15}
+                    style={styles.btn}>
+                    {isSaved ? (
+                      <FontAwesomeIcon
+                        icon={['far', 'trash-can']}
+                        size={19}
+                        color={pal.colors.icon}
+                      />
+                    ) : (
+                      <FontAwesomeIcon
+                        icon="plus"
+                        size={18}
+                        color={pal.colors.link}
+                      />
+                    )}
+                  </Pressable>
+                </View>
+              )}
+            </>
+          )}
         </View>
 
         {showDescription && feed.description ? (
diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx
index 16d88fed70..270e59eea7 100644
--- a/src/view/screens/ProfileFeed.tsx
+++ b/src/view/screens/ProfileFeed.tsx
@@ -341,7 +341,9 @@ export function ProfileFeedScreenInner({
                       primaryAlgoDialogControl.open()
                     }}>
                     <ButtonIcon icon={Check} position="left" />
-                    <ButtonText>Primary Algorithm</ButtonText>
+                    <ButtonText>
+                      <Trans>Primary Algorithm</Trans>
+                    </ButtonText>
                   </NewButton>
                 ) : (
                   <NewButton
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index 0003dbd5d9..ba41f2fdc0 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -7,6 +7,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {track} from '#/lib/analytics/analytics'
+import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {
   usePinFeedMutation,
@@ -14,6 +15,7 @@ import {
   useSetSaveFeedsMutation,
   useUnpinFeedMutation,
 } from '#/state/queries/preferences'
+import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useHaptics} from 'lib/haptics'
@@ -112,6 +114,7 @@ export function SavedFeeds({}: Props) {
                 setSavedFeeds={setSavedFeeds}
                 resetSaveFeedsMutationState={resetSaveFeedsMutationState}
                 currentFeeds={currentFeeds}
+                preferences={preferences}
               />
             ))
           )
@@ -145,6 +148,7 @@ export function SavedFeeds({}: Props) {
                 setSavedFeeds={setSavedFeeds}
                 resetSaveFeedsMutationState={resetSaveFeedsMutationState}
                 currentFeeds={currentFeeds}
+                preferences={preferences}
               />
             ))
           )
@@ -179,6 +183,7 @@ function ListItem({
   currentFeeds,
   setSavedFeeds,
   resetSaveFeedsMutationState,
+  preferences,
 }: {
   feedUri: string // uri
   isPinned: boolean
@@ -187,6 +192,7 @@ function ListItem({
   resetSaveFeedsMutationState: ReturnType<
     typeof useSetSaveFeedsMutation
   >['reset']
+  preferences: UsePreferencesQueryResponse
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -195,6 +201,13 @@ function ListItem({
   const {isPending: isUnpinPending, mutateAsync: unpinFeed} =
     useUnpinFeedMutation()
   const isPending = isPinPending || isUnpinPending
+  const gate = useGate()
+  const primaryAlgo = preferences.primaryAlgorithm
+  const isPrimaryAlgoExperimentEnabled = gate(
+    'reduced_onboarding_and_home_algo',
+  )
+  const isPrimaryAlgo = primaryAlgo?.enabled && primaryAlgo?.uri === feedUri
+  const showPinButton = !(isPrimaryAlgoExperimentEnabled && isPrimaryAlgo)
 
   const onTogglePinned = React.useCallback(async () => {
     playHaptic()
@@ -303,20 +316,24 @@ function ListItem({
         showSaveBtn
         showMinimalPlaceholder
       />
-      <Pressable
-        disabled={isPending}
-        accessibilityRole="button"
-        hitSlop={10}
-        onPress={onTogglePinned}
-        style={state => ({
-          opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
-        })}>
-        <FontAwesomeIcon
-          icon="thumb-tack"
-          size={20}
-          color={isPinned ? colors.blue3 : pal.colors.icon}
-        />
-      </Pressable>
+      {showPinButton && (
+        <View style={{paddingRight: 16}}>
+          <Pressable
+            disabled={isPending}
+            accessibilityRole="button"
+            hitSlop={10}
+            onPress={onTogglePinned}
+            style={state => ({
+              opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
+            })}>
+            <FontAwesomeIcon
+              icon="thumb-tack"
+              size={20}
+              color={isPinned ? colors.blue3 : pal.colors.icon}
+            />
+          </Pressable>
+        </View>
+      )}
     </Pressable>
   )
 }
@@ -345,7 +362,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderBottomWidth: 1,
-    paddingRight: 16,
   },
   webArrowButtonsContainer: {
     paddingLeft: 16,