diff --git a/src/app/(dashboard)/dashboard/notes/edit/page.tsx b/src/app/(dashboard)/dashboard/notes/edit/page.tsx index b92836fd73..a09e8929ae 100644 --- a/src/app/(dashboard)/dashboard/notes/edit/page.tsx +++ b/src/app/(dashboard)/dashboard/notes/edit/page.tsx @@ -31,6 +31,7 @@ import { } from '~/components/modules/dashboard/writing/Writing' import { LoadingButtonWrapper, StyledButton } from '~/components/ui/button' import { PublishEvent, WriteEditEvent } from '~/events' +import { useRefetchData } from '~/hooks/biz/use-refetch-data' import { useEventCallback } from '~/hooks/common/use-event-callback' import { cloneDeep } from '~/lib/_' import { dayOfYear } from '~/lib/datetime' @@ -42,15 +43,17 @@ export default function Page() { const search = useSearchParams() const id = search.get('id') - const { data, isLoading } = useQuery({ + const { data, isLoading, refetch } = useQuery({ ...adminQueries.note.getNote(id!), enabled: !!id, }) + const [key] = useRefetchData(refetch) + if (id) { if (isLoading) return - return + return } return } diff --git a/src/app/(dashboard)/dashboard/posts/edit/page.tsx b/src/app/(dashboard)/dashboard/posts/edit/page.tsx index 1bc10d9c26..5e5237315e 100644 --- a/src/app/(dashboard)/dashboard/posts/edit/page.tsx +++ b/src/app/(dashboard)/dashboard/posts/edit/page.tsx @@ -31,6 +31,7 @@ import { } from '~/components/modules/dashboard/writing/Writing' import { LoadingButtonWrapper, StyledButton } from '~/components/ui/button' import { PublishEvent, WriteEditEvent } from '~/events' +import { useRefetchData } from '~/hooks/biz/use-refetch-data' import { useEventCallback } from '~/hooks/common/use-event-callback' import { cloneDeep } from '~/lib/_' import { toast } from '~/lib/toast' @@ -41,15 +42,17 @@ export default function Page() { const search = useSearchParams() const id = search.get('id') - const { data, isLoading } = useQuery({ + const { data, isLoading, refetch } = useQuery({ ...adminQueries.post.getPost(id!), enabled: !!id, }) + const [key] = useRefetchData(refetch) + if (id) { if (isLoading) return - return + return } return } diff --git a/src/components/modules/dashboard/crossbell/XLogEnabled.tsx b/src/components/modules/dashboard/crossbell/XLogEnabled.tsx index 8785fbd9d8..4391e2a883 100644 --- a/src/components/modules/dashboard/crossbell/XLogEnabled.tsx +++ b/src/components/modules/dashboard/crossbell/XLogEnabled.tsx @@ -1,8 +1,20 @@ -import { lazy } from 'react' +import { lazy, Suspense, useMemo } from 'react' -const XLogEnableImpl = lazy(() => - import('./XlogSwitch').then((mo) => ({ default: mo.XlogSwitch })), -) export const XLogEnable = () => { - return 'ethereum' in window ? : null + return 'ethereum' in window ? : null +} + +const XlogSwitchLazy = () => { + const Component = useMemo( + () => + lazy(() => + import('./XlogSwitch').then((mo) => ({ default: mo.XlogSwitch })), + ), + [], + ) + return ( + + + + ) } diff --git a/src/components/modules/dashboard/crossbell/XlogSwitch.tsx b/src/components/modules/dashboard/crossbell/XlogSwitch.tsx index e9ce2516a1..1611f2b7ea 100644 --- a/src/components/modules/dashboard/crossbell/XlogSwitch.tsx +++ b/src/components/modules/dashboard/crossbell/XlogSwitch.tsx @@ -5,6 +5,7 @@ import { useAtom, useStore } from 'jotai' import { XLogIcon } from '~/components/icons/platform/XLogIcon' import { LabelSwitch } from '~/components/ui/switch' import { PublishEvent } from '~/events' +import { RefetchEvent } from '~/events/refetch' import { apiClient } from '~/lib/request' import { syncToXlogAtom } from '../writing/atoms' @@ -57,7 +58,9 @@ const PublishEventSubscriber = () => { const enabled = store.get(syncToXlogAtom) if (!enabled) return - CrossBellConnector.createOrUpdate(ev.data) + CrossBellConnector.createOrUpdate(ev.data).then(() => { + window.dispatchEvent(new RefetchEvent()) + }) }) }, [store]) diff --git a/src/constants/keys.ts b/src/constants/keys.ts index f2e66c5d68..f0f361e494 100644 --- a/src/constants/keys.ts +++ b/src/constants/keys.ts @@ -2,4 +2,5 @@ export const enum EmitKeyMap { EditDataUpdate = 'editDataUpdate', Publish = 'Publish', + Refetch = 'Refetch', } diff --git a/src/events/refetch.ts b/src/events/refetch.ts new file mode 100644 index 0000000000..b22f2ba29e --- /dev/null +++ b/src/events/refetch.ts @@ -0,0 +1,8 @@ +import { EmitKeyMap } from '~/constants/keys' + +export class RefetchEvent extends Event { + static readonly type = EmitKeyMap.Refetch + constructor() { + super(EmitKeyMap.Refetch) + } +} diff --git a/src/hooks/biz/use-refetch-data.ts b/src/hooks/biz/use-refetch-data.ts new file mode 100644 index 0000000000..6b752b69bc --- /dev/null +++ b/src/hooks/biz/use-refetch-data.ts @@ -0,0 +1,19 @@ +import { useEffect } from 'react' +import { useForceUpdate } from 'framer-motion' + +import { EmitKeyMap } from '~/constants/keys' + +export const useRefetchData = (refetchFn: () => Promise) => { + const [forceUpdate, key] = useForceUpdate() + useEffect(() => { + const handler = () => { + refetchFn().then(forceUpdate) + } + window.addEventListener(EmitKeyMap.Refetch, handler) + return () => { + window.removeEventListener(EmitKeyMap.Refetch, handler) + } + }, [forceUpdate, refetchFn]) + + return [key] as const +}