fix: update data when save csb successful

Signed-off-by: Innei <i@innei.in>

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 <PageLoading />
 
-    return <EditPage initialData={data} />
+    return <EditPage initialData={data} key={key} />
   }
   return <EditPage />
 }

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 <PageLoading />
 
-    return <EditPage initialData={data} />
+    return <EditPage initialData={data} key={key} />
   }
   return <EditPage />
 }

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 ? <XLogEnableImpl /> : null
+  return 'ethereum' in window ? <XlogSwitchLazy /> : null
+}
+
+const XlogSwitchLazy = () => {
+  const Component = useMemo(
+    () =>
+      lazy(() =>
+        import('./XlogSwitch').then((mo) => ({ default: mo.XlogSwitch })),
+      ),
+    [],
+  )
+  return (
+    <Suspense>
+      <Component />
+    </Suspense>
+  )
 }

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])
 

src/constants/keys.ts

@@ -2,4 +2,5 @@ export const enum EmitKeyMap {
   EditDataUpdate = 'editDataUpdate',
 
   Publish = 'Publish',
+  Refetch = 'Refetch',
 }

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)
+  }
+}

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<any>) => {
+  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
+}