From 22492bf19a70c534e318fc0239227b606236c95f Mon Sep 17 00:00:00 2001 From: Innei Date: Tue, 17 Sep 2024 12:09:53 +0800 Subject: [PATCH] feat: comment info get from reader Signed-off-by: Innei --- package.json | 3 +- pnpm-lock.yaml | 29 ++++++++++++++ src/components/modules/comment/Comment.tsx | 9 ++++- .../modules/comment/CommentProvider.tsx | 22 +++++++++++ src/components/modules/comment/Comments.tsx | 38 ++++++++++++------- src/providers/root/index.tsx | 13 ++++--- 6 files changed, 92 insertions(+), 22 deletions(-) create mode 100644 src/components/modules/comment/CommentProvider.tsx diff --git a/package.json b/package.json index 34b3e02192..05545240fc 100644 --- a/package.json +++ b/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" ] -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac3cccdeb3..012c527ff0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ importers: '@mx-space/api-client': specifier: 1.16.1 version: 1.16.1 + '@openpanel/nextjs': + specifier: 1.0.3 + version: 1.0.3(next@14.2.12(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@prosemirror-adapter/react': specifier: 0.2.6 version: 0.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1514,6 +1517,19 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@openpanel/nextjs@1.0.3': + resolution: {integrity: sha512-Fu6hG8rm4rT7IudYL/o7RSBzZZ3L2AWyxzba/eDDxaYjrPMsoGZl5CC/VOrp27WePua49bduS/mq+oIp4RgR5g==} + peerDependencies: + next: ^12.0.0 || ^13.0.0 || ^14.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + + '@openpanel/sdk@1.0.0': + resolution: {integrity: sha512-FNmmfjdXoC/VHEjA+WkrQ4lyM5lxEmV7xDd57uj4E+lIS0sU3DLG2mV/dpS8AscnZbUvuMn3kPhiLCqYzuv/gg==} + + '@openpanel/web@1.0.0': + resolution: {integrity: sha512-ipY5hYWWrzPDwi1BtzyNn1d+Ly1gjujpmLvqO6oMKOhbNT8CwV9dIObZjyhzckaSMS8qYII9pLDIU1HCRysEDg==} + '@panva/hkdf@1.2.1': resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==} @@ -7575,6 +7591,19 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 + '@openpanel/nextjs@1.0.3(next@14.2.12(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@openpanel/web': 1.0.0 + next: 14.2.12(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@openpanel/sdk@1.0.0': {} + + '@openpanel/web@1.0.0': + dependencies: + '@openpanel/sdk': 1.0.0 + '@panva/hkdf@1.2.1': {} '@pkgjs/parseargs@0.11.0': diff --git a/src/components/modules/comment/Comment.tsx b/src/components/modules/comment/Comment.tsx index dc9cd497c1..4654beec93 100644 --- a/src/components/modules/comment/Comment.tsx +++ b/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,13 +42,13 @@ 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, @@ -55,6 +56,9 @@ export const Comment: Component<{ 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)} > diff --git a/src/components/modules/comment/CommentProvider.tsx b/src/components/modules/comment/CommentProvider.tsx new file mode 100644 index 0000000000..d9deba36f3 --- /dev/null +++ b/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>({}) +export const CommentProvider: FC< + PropsWithChildren<{ + readers: Record + }> +> = ({ children, readers }) => { + return ( + + {children} + + ) +} + +export const useCommentReader = (readerId?: string) => { + return useContextSelector(CommentReaderMapContext, (v) => + readerId ? v[readerId] : undefined, + ) +} diff --git a/src/components/modules/comment/Comments.tsx b/src/components/modules/comment/Comments.tsx index fd9177ba37..798d9fbad1 100644 --- a/src/components/modules/comment/Comments.tsx +++ b/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 = ({ refId }) => { initialPageParam: 1 as number | undefined, }) + const readers = useMemo(() => { + if (!data) return {} + return data?.pages.reduce( + (acc, curr) => ({ ...acc, ...curr.readers }), + {} as Record, + ) + }, [data]) if (isLoading) { return } @@ -81,19 +90,22 @@ export const Comments: FC = ({ refId }) => { ) return ( -
    - {data?.pages.map((data, index) => ( - - {data.data.map((comment) => ( - - ))} - - ))} -
+ +
    + {data?.pages.map((data, index) => ( + + {data.data.map((comment) => ( + + ))} + + ))} +
+ + {hasNextPage && ( diff --git a/src/providers/root/index.tsx b/src/providers/root/index.tsx index 5c1c48e191..53818e4dc9 100644 --- a/src/providers/root/index.tsx +++ b/src/providers/root/index.tsx @@ -38,9 +38,10 @@ const baseContexts: JSX.Element[] = [ , ] -const webappContexts: JSX.Element[] = baseContexts.concat( +const webappContexts: JSX.Element[] = [ , -) + ...baseContexts, +] export function WebAppProviders({ children }: PropsWithChildren) { return ( @@ -50,7 +51,6 @@ export function WebAppProviders({ children }: PropsWithChildren) { - {/* */} @@ -58,11 +58,12 @@ export function WebAppProviders({ children }: PropsWithChildren) { ) } -const dashboardContexts: JSX.Element[] = baseContexts.concat( +const dashboardContexts: JSX.Element[] = [ , , - , -) + , + ...baseContexts, +] export function DashboardAppProviders({ children }: PropsWithChildren) { return (