feat: comment info get from reader

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

package.json

@@ -39,6 +39,7 @@
     "@milkdown/transformer": "7.5.0",
     "@milkdown/utils": "7.5.0",
     "@mx-space/api-client": "1.16.1",
+    "@openpanel/nextjs": "1.0.3",
     "@prosemirror-adapter/react": "0.2.6",
     "@radix-ui/react-avatar": "1.1.0",
     "@radix-ui/react-dialog": "1.1.1",
@@ -204,4 +205,4 @@
   "browserslist": [
     "defaults and fully supports es6-module"
   ]
-}
+}

src/components/modules/comment/Comment.tsx

@@ -27,6 +27,7 @@ import { jotaiStore } from '~/lib/store'
 import styles from './Comment.module.css'
 import { CommentMarkdown } from './CommentMarkdown'
 import { CommentPinButton, OcticonGistSecret } from './CommentPinButton'
+import { useCommentReader } from './CommentProvider'
 import { CommentReplyButton } from './CommentReplyButton'
 
 export const Comment: Component<{
@@ -41,20 +42,23 @@ export const Comment: Component<{
       trimmedContent.split('\n').length === 1
     )
   }, [comment?.text])
+  const reader = useCommentReader(comment.readerId)
 
   // FIXME 兜一下后端给的脏数据
   if (typeof comment === 'string') return null
   const {
     id: cid,
-    avatar,
-    author,
+
     text,
     key,
     location,
     isWhispers,
     url,
     source,
   } = comment
+
+  const avatar = reader?.image || comment.avatar
+  const author = reader?.name || comment.author
   const parentId =
     typeof comment.parent === 'string' ? comment.parent : comment.parent?.id
   const authorElement = url ? (
@@ -107,6 +111,7 @@ export const Comment: Component<{
             scale: 1,
           }}
           data-comment-id={cid}
+          data-reader-id={comment.readerId}
           data-parent-id={parentId}
           className={clsx('relative my-2', className)}
         >

src/components/modules/comment/CommentProvider.tsx

@@ -0,0 +1,22 @@
+import type { ReaderModel } from '@mx-space/api-client'
+import type { FC, PropsWithChildren } from 'react'
+import { createContext, useContextSelector } from 'use-context-selector'
+
+const CommentReaderMapContext = createContext<Record<string, ReaderModel>>({})
+export const CommentProvider: FC<
+  PropsWithChildren<{
+    readers: Record<string, ReaderModel>
+  }>
+> = ({ children, readers }) => {
+  return (
+    <CommentReaderMapContext.Provider value={readers}>
+      {children}
+    </CommentReaderMapContext.Provider>
+  )
+}
+
+export const useCommentReader = (readerId?: string) => {
+  return useContextSelector(CommentReaderMapContext, (v) =>
+    readerId ? v[readerId] : undefined,
+  )
+}

src/components/modules/comment/Comments.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReaderModel } from '@mx-space/api-client'
 import { BusinessEvents } from '@mx-space/webhook'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import type { FC } from 'react'
@@ -15,6 +16,7 @@ import { WsEvent } from '~/socket/util'
 import { LoadMoreIndicator } from '../shared/LoadMoreIndicator'
 import { Comment } from './Comment'
 import { CommentBoxProvider } from './CommentBox/providers'
+import { CommentProvider } from './CommentProvider'
 import { CommentSkeleton } from './CommentSkeleton'
 import type { CommentBaseProps } from './types'
 
@@ -70,6 +72,13 @@ export const Comments: FC<CommentBaseProps> = ({ refId }) => {
     initialPageParam: 1 as number | undefined,
   })
 
+  const readers = useMemo(() => {
+    if (!data) return {}
+    return data?.pages.reduce(
+      (acc, curr) => ({ ...acc, ...curr.readers }),
+      {} as Record<string, ReaderModel>,
+    )
+  }, [data])
   if (isLoading) {
     return <CommentSkeleton />
   }
@@ -81,19 +90,22 @@ export const Comments: FC<CommentBaseProps> = ({ refId }) => {
     )
   return (
     <ErrorBoundary>
-      <ul className="min-h-[400px] list-none space-y-4">
-        {data?.pages.map((data, index) => (
-          <BottomToUpSoftScaleTransitionView key={index}>
-            {data.data.map((comment) => (
-              <CommentListItem
-                comment={comment}
-                key={comment.id}
-                refId={refId}
-              />
-            ))}
-          </BottomToUpSoftScaleTransitionView>
-        ))}
-      </ul>
+      <CommentProvider readers={readers}>
+        <ul className="min-h-[400px] list-none space-y-4">
+          {data?.pages.map((data, index) => (
+            <BottomToUpSoftScaleTransitionView key={index}>
+              {data.data.map((comment) => (
+                <CommentListItem
+                  comment={comment}
+                  key={comment.id}
+                  refId={refId}
+                />
+              ))}
+            </BottomToUpSoftScaleTransitionView>
+          ))}
+        </ul>
+      </CommentProvider>
+
       {hasNextPage && (
         <LoadMoreIndicator onLoading={fetchNextPage}>
           <CommentSkeleton />

src/providers/root/index.tsx

@@ -38,9 +38,10 @@ const baseContexts: JSX.Element[] = [
   <AuthSessionProvider key="authSessionProvider" />,
 ]
 
-const webappContexts: JSX.Element[] = baseContexts.concat(
+const webappContexts: JSX.Element[] = [
   <ReactQueryProvider key="reactQueryProvider" />,
-)
+  ...baseContexts,
+]
 
 export function WebAppProviders({ children }: PropsWithChildren) {
   return (
@@ -50,19 +51,19 @@ export function WebAppProviders({ children }: PropsWithChildren) {
       <SocketContainer />
       <ModalStackProvider key="modalStackProvider" />
       <EventProvider key="viewportProvider" />
-      {/* <SentryProvider key="SentryProvider" /> */}
       <PageScrollInfoProvider key="PageScrollInfoProvider" />
       <DebugProvider key="debugProvider" />
 
       <PeekPortal />
     </ProviderComposer>
   )
 }
-const dashboardContexts: JSX.Element[] = baseContexts.concat(
+const dashboardContexts: JSX.Element[] = [
   <ReactQueryProviderForDashboard key="reactQueryProvider" />,
   <AuthProvider key="auth" />,
-  <useBeforeUnload.Provider />,
-)
+  <useBeforeUnload.Provider key="useBeforeUnloadProvider" />,
+  ...baseContexts,
+]
 export function DashboardAppProviders({ children }: PropsWithChildren) {
   return (
     <ProviderComposer contexts={dashboardContexts}>