diff --git a/apps/renderer/src/modules/discover/inbox-form.tsx b/apps/renderer/src/modules/discover/inbox-form.tsx index 993abe0eee..22b4a512cb 100644 --- a/apps/renderer/src/modules/discover/inbox-form.tsx +++ b/apps/renderer/src/modules/discover/inbox-form.tsx @@ -81,7 +81,7 @@ const InboxInnerForm = ({ onSuccess, inbox, }: { - onSuccess?: () => void + onSuccess?: (title?: string) => void inbox?: Nullable }) => { const { t } = useTranslation() @@ -114,13 +114,13 @@ const InboxInnerForm = ({ const mutationChange = useMutation({ mutationFn: async ({ handle, title }: { handle: string; title: string }) => { + onSuccess?.(title) await apiClient.inboxes.$put({ json: { handle, title, }, }) - onSuccess?.() }, onSuccess: () => { subscriptionActions.fetchByView(FeedViewType.Articles) diff --git a/apps/renderer/src/modules/discover/inbox-list-form.tsx b/apps/renderer/src/modules/discover/inbox-list-form.tsx index ffaf4078dd..eeb7bdbccd 100644 --- a/apps/renderer/src/modules/discover/inbox-list-form.tsx +++ b/apps/renderer/src/modules/discover/inbox-list-form.tsx @@ -1,5 +1,6 @@ import { env } from "@follow/shared/env" import { useMutation } from "@tanstack/react-query" +import { useEffect, useState } from "react" import { useTranslation } from "react-i18next" import { toast } from "sonner" @@ -27,6 +28,21 @@ export function DiscoverInboxList() { const { present } = useModalStack() + const [inboxListData, setInboxListData] = useState(inboxes.data || []) + + useEffect(() => { + if (inboxes.data) { + setInboxListData(inboxes.data) + } + }, [inboxes.data]) + + const optimisticUpdateInboxListData = (inboxId, title) => { + const updatedInboxes = inboxListData.map((inbox) => + inbox.id === inboxId ? { ...inbox, title } : inbox, + ) + setInboxListData(updatedInboxes) + } + return ( <>
@@ -51,7 +67,7 @@ export function DiscoverInboxList() { - {inboxes.data?.map((inbox) => ( + {inboxListData?.map((inbox) => ( {inbox.id} @@ -102,7 +118,15 @@ export function DiscoverInboxList() { present({ title: t("sidebar.feed_actions.edit_inbox"), content: ({ dismiss }) => ( - + { + optimisticUpdateInboxListData(inbox.id, title) + dismiss() + inboxes.refetch() + }} + /> ), }) }}