From 08462375ca12576ce588da464e6d418a53d6f55f Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Sat, 11 May 2024 20:35:08 +0100
Subject: [PATCH] Fix flashes when replacing For You (#3967)

* Fix flashes when replacing For You

* Switch to Discover if pinned after removing
---
 src/state/queries/preferences/index.ts | 40 +++++++++++++++++++++
 src/view/com/posts/FeedShutdownMsg.tsx | 48 ++++++++------------------
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/state/queries/preferences/index.ts b/src/state/queries/preferences/index.ts
index b3d2fa9ecd..555fd85a49 100644
--- a/src/state/queries/preferences/index.ts
+++ b/src/state/queries/preferences/index.ts
@@ -6,6 +6,7 @@ import {
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {track} from '#/lib/analytics/analytics'
+import {PROD_DEFAULT_FEED} from '#/lib/constants'
 import {replaceEqualDeep} from '#/lib/functions'
 import {getAge} from '#/lib/strings/time'
 import {STALE} from '#/state/queries'
@@ -244,6 +245,45 @@ export function useRemoveFeedMutation() {
   })
 }
 
+export function useReplaceForYouWithDiscoverFeedMutation() {
+  const queryClient = useQueryClient()
+  const {getAgent} = useAgent()
+
+  return useMutation({
+    mutationFn: async ({
+      forYouFeedConfig,
+      discoverFeedConfig,
+    }: {
+      forYouFeedConfig: AppBskyActorDefs.SavedFeed | undefined
+      discoverFeedConfig: AppBskyActorDefs.SavedFeed | undefined
+    }) => {
+      if (forYouFeedConfig) {
+        await getAgent().removeSavedFeeds([forYouFeedConfig.id])
+      }
+      if (!discoverFeedConfig) {
+        await getAgent().addSavedFeeds([
+          {
+            type: 'feed',
+            value: PROD_DEFAULT_FEED('whats-hot'),
+            pinned: true,
+          },
+        ])
+      } else {
+        await getAgent().updateSavedFeeds([
+          {
+            ...discoverFeedConfig,
+            pinned: true,
+          },
+        ])
+      }
+      // triggers a refetch
+      await queryClient.invalidateQueries({
+        queryKey: preferencesQueryKey,
+      })
+    },
+  })
+}
+
 export function useUpdateSavedFeedsMutation() {
   const queryClient = useQueryClient()
   const {getAgent} = useAgent()
diff --git a/src/view/com/posts/FeedShutdownMsg.tsx b/src/view/com/posts/FeedShutdownMsg.tsx
index bc047e8311..47f8941e2a 100644
--- a/src/view/com/posts/FeedShutdownMsg.tsx
+++ b/src/view/com/posts/FeedShutdownMsg.tsx
@@ -6,10 +6,9 @@ import {useLingui} from '@lingui/react'
 import {PROD_DEFAULT_FEED} from '#/lib/constants'
 import {logger} from '#/logger'
 import {
-  useAddSavedFeedsMutation,
   usePreferencesQuery,
   useRemoveFeedMutation,
-  useUpdateSavedFeedsMutation,
+  useReplaceForYouWithDiscoverFeedMutation,
 } from '#/state/queries/preferences'
 import {useSetSelectedFeed} from '#/state/shell/selected-feed'
 import * as Toast from '#/view/com/util/Toast'
@@ -24,12 +23,10 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
   const {_} = useLingui()
   const setSelectedFeed = useSetSelectedFeed()
   const {data: preferences} = usePreferencesQuery()
-  const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} =
-    useAddSavedFeedsMutation()
   const {mutateAsync: removeFeed, isPending: isRemovePending} =
     useRemoveFeedMutation()
-  const {mutateAsync: updateSavedFeeds, isPending: isUpdateFeedPending} =
-    useUpdateSavedFeedsMutation()
+  const {mutateAsync: replaceFeedWithDiscover, isPending: isReplacePending} =
+    useReplaceForYouWithDiscoverFeedMutation()
 
   const feedConfig = preferences?.savedFeeds?.find(
     f => f.value === feedUri && f.pinned,
@@ -46,6 +43,9 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
         await removeFeed(feedConfig)
         Toast.show(_(msg`Removed from your feeds`))
       }
+      if (hasDiscoverPinned) {
+        setSelectedFeed(`feedgen|${PROD_DEFAULT_FEED('whats-hot')}`)
+      }
     } catch (err: any) {
       Toast.show(
         _(
@@ -54,30 +54,15 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
       )
       logger.error('Failed up update feeds', {message: err})
     }
-  }, [removeFeed, feedConfig, _])
+  }, [removeFeed, feedConfig, _, hasDiscoverPinned, setSelectedFeed])
 
   const onReplaceFeed = React.useCallback(async () => {
     try {
-      if (!discoverFeedConfig) {
-        await addSavedFeeds([
-          {
-            type: 'feed',
-            value: PROD_DEFAULT_FEED('whats-hot'),
-            pinned: true,
-          },
-        ])
-      } else {
-        await updateSavedFeeds([
-          {
-            ...discoverFeedConfig,
-            pinned: true,
-          },
-        ])
-      }
+      await replaceFeedWithDiscover({
+        forYouFeedConfig: feedConfig,
+        discoverFeedConfig,
+      })
       setSelectedFeed(`feedgen|${PROD_DEFAULT_FEED('whats-hot')}`)
-      if (feedConfig) {
-        await removeFeed(feedConfig)
-      }
       Toast.show(_(msg`The feed has been replaced with Discover.`))
     } catch (err: any) {
       Toast.show(
@@ -88,17 +73,14 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
       logger.error('Failed up update feeds', {message: err})
     }
   }, [
-    addSavedFeeds,
-    updateSavedFeeds,
-    removeFeed,
+    replaceFeedWithDiscover,
     discoverFeedConfig,
     feedConfig,
     setSelectedFeed,
     _,
   ])
 
-  const isProcessing =
-    isAddSavedFeedPending || isUpdateFeedPending || isRemovePending
+  const isProcessing = isReplacePending || isRemovePending
   return (
     <View
       style={[
@@ -147,9 +129,7 @@ export function FeedShutdownMsg({feedUri}: {feedUri: string}) {
               <ButtonText>
                 <Trans>Replace with Discover</Trans>
               </ButtonText>
-              {(isAddSavedFeedPending || isUpdateFeedPending) && (
-                <ButtonIcon icon={Loader} />
-              )}
+              {isReplacePending && <ButtonIcon icon={Loader} />}
             </Button>
           )}
         </View>