feat: changeCategoryView for mobile, better local data update

hyoban · hyoban · commit 8f66d91ce12a · 2025-06-18T16:46:27.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx
@@ -35,6 +35,7 @@ import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { getRouteParams, useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { useContextMenu } from "~/hooks/common/useContextMenu"
 import { createErrorToaster } from "~/lib/error-parser"
+import { invalidateEntriesQuery } from "~/queries/entries"
 import { getPreferredTitle } from "~/store/feed/hooks"
 
 import { useModalStack } from "../../components/ui/modal/stacked/hooks"
@@ -155,7 +156,17 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
     mutationFn: async (nextView: FeedViewType) => {
       if (!folderName) return
       if (typeof view !== "number") return
-      return subscriptionSyncService.changeCategoryView(folderName, view, nextView)
+      return subscriptionSyncService.changeCategoryView({
+        category: folderName,
+        currentView: view,
+        newView: nextView,
+      })
+    },
+
+    onSuccess(_data, variables) {
+      invalidateEntriesQuery({
+        views: [view, variables],
+      })
     },
   })
 
diff --git a/apps/desktop/layer/renderer/src/queries/entries.ts b/apps/desktop/layer/renderer/src/queries/entries.ts
@@ -1,11 +1,26 @@
+import type { FeedViewType } from "@follow/constants"
 import { useFeedUnreadIsDirty } from "@follow/store/atoms/feed"
 import { entrySyncServices } from "@follow/store/entry/store"
 
 import { useAuthInfiniteQuery, useAuthQuery } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { defineQuery } from "~/lib/defineQuery"
+import { queryClient } from "~/lib/query-client"
 import { getEntriesParams } from "~/lib/utils"
 
+export function invalidateEntriesQuery({ views }: { views: FeedViewType[] }) {
+  return queryClient.invalidateQueries({
+    predicate: (query) => {
+      const { queryKey } = query
+      if (Array.isArray(queryKey) && queryKey[0] === "entries") {
+        const view = queryKey[2]
+        return views.includes(view as FeedViewType)
+      }
+      return false
+    },
+  })
+}
+
 export const entries = {
   entries: ({
     feedId,
diff --git a/apps/mobile/src/modules/context-menu/feeds.tsx b/apps/mobile/src/modules/context-menu/feeds.tsx
@@ -1,5 +1,9 @@
 import { FeedViewType } from "@follow/constants"
-import { useEntriesQuery, useEntryIdsByFeedId } from "@follow/store/entry/hooks"
+import {
+  getInvalidateEntriesQueryPredicate,
+  useEntriesQuery,
+  useEntryIdsByFeedId,
+} from "@follow/store/entry/hooks"
 import { getFeedById } from "@follow/store/feed/getter"
 import { getSubscriptionById } from "@follow/store/subscription/getter"
 import { getSubscriptionCategory } from "@follow/store/subscription/hooks"
@@ -20,6 +24,7 @@ import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformA
 import { views } from "@/src/constants/views"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import type { Navigation } from "@/src/lib/navigation/Navigation"
+import { queryClient } from "@/src/lib/query-client"
 import { toast } from "@/src/lib/toast"
 import { FollowScreen } from "@/src/screens/(modal)/FollowScreen"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
@@ -309,7 +314,19 @@ export const SubscriptionFeedCategoryContextMenu = ({
                 <ContextMenu.CheckboxItem
                   key={`SubContent/${view.name}`}
                   value={isSelected}
-                  // onSelect={onSelect}
+                  onSelect={() => {
+                    subscriptionSyncService
+                      .changeCategoryView({
+                        category,
+                        currentView,
+                        newView: view.view,
+                      })
+                      .then(() => {
+                        queryClient.invalidateQueries({
+                          predicate: getInvalidateEntriesQueryPredicate([view.view, currentView]),
+                        })
+                      })
+                  }}
                 >
                   <ContextMenu.ItemTitle>{t(view.name, { ns: "common" })}</ContextMenu.ItemTitle>
                 </ContextMenu.CheckboxItem>
diff --git a/packages/internal/store/src/entry/hooks.ts b/packages/internal/store/src/entry/hooks.ts
@@ -1,4 +1,5 @@
 import type { FeedViewType } from "@follow/constants"
+import type { Query } from "@tanstack/react-query"
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query"
 import { useCallback } from "react"
 
@@ -7,6 +8,17 @@ import { getEntry } from "./getter"
 import { entrySyncServices, useEntryStore } from "./store"
 import type { EntryModel, FetchEntriesProps, FetchEntriesPropsSettings } from "./types"
 
+export const getInvalidateEntriesQueryPredicate = (views: FeedViewType[]) => {
+  return (query: Query) => {
+    const { queryKey } = query
+    if (Array.isArray(queryKey) && queryKey[0] === "entries") {
+      const view = queryKey[4]
+      return views.includes(view as FeedViewType)
+    }
+    return false
+  }
+}
+
 export const useEntriesQuery = (
   props?: Omit<FetchEntriesProps, "pageParam" | "read"> & FetchEntriesPropsSettings,
 ) => {
diff --git a/packages/internal/store/src/subscription/store.ts b/packages/internal/store/src/subscription/store.ts
@@ -501,31 +501,77 @@ class SubscriptionSyncService {
     await tx.run()
   }
 
-  async changeCategoryView(
-    category: string,
-    currentView: FeedViewType,
-    changeToView: FeedViewType,
-  ) {
-    // TODO: handle local state update
-    const state = get()
-    const folderFeedIds = [] as string[]
-    for (const feedId of state.feedIdByView[currentView]) {
-      const subscription = state.data[feedId]
-      if (!subscription) continue
-      if (subscription.category === category || getDefaultCategory(subscription) === category) {
-        folderFeedIds.push(feedId)
-      }
-    }
-    await Promise.all(
-      folderFeedIds.map((feedId) =>
-        apiClient().subscriptions.$patch({
-          json: {
-            feedId,
-            view: changeToView,
-          },
-        }),
-      ),
-    )
+  async changeCategoryView({
+    category,
+    currentView,
+    newView,
+  }: {
+    category: string
+    currentView: FeedViewType
+    newView: FeedViewType
+  }) {
+    const folderFeedIds = getCategoryFeedIds(category, currentView)
+
+    const tx = createTransaction()
+    tx.store(() => {
+      immerSet((draft) => {
+        for (const feedId of folderFeedIds) {
+          const subscription = draft.data[feedId]
+          if (!subscription) continue
+          subscription.view = newView
+
+          draft.feedIdByView[currentView].delete(feedId)
+          draft.feedIdByView[newView].add(feedId)
+
+          if (subscription.category) {
+            draft.categories[newView].add(subscription.category)
+            draft.categories[currentView].delete(subscription.category)
+          }
+        }
+      })
+    })
+
+    tx.rollback(() => {
+      immerSet((draft) => {
+        for (const feedId of folderFeedIds) {
+          const subscription = draft.data[feedId]
+          if (!subscription) continue
+          subscription.view = currentView
+
+          draft.feedIdByView[newView].delete(feedId)
+          draft.feedIdByView[currentView].add(feedId)
+
+          if (subscription.category) {
+            draft.categories[currentView].add(subscription.category)
+            draft.categories[newView].delete(subscription.category)
+          }
+        }
+      })
+    })
+
+    tx.request(async () => {
+      await Promise.all(
+        folderFeedIds.map((feedId) =>
+          apiClient().subscriptions.$patch({
+            json: {
+              feedId,
+              view: newView,
+            },
+          }),
+        ),
+      )
+    })
+
+    tx.persist(() => {
+      return SubscriptionService.patchMany({
+        feedIds: folderFeedIds,
+        data: {
+          view: newView,
+        },
+      })
+    })
+
+    await tx.run()
   }
 
   async renameCategory({
