From 0d0e5d2614ec2e034de9d65a382d5f31ab89f258 Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Mon, 11 Aug 2025 12:07:42 +0800 Subject: [PATCH 1/5] feat(UI): add label display in comments --- moon/apps/web/components/MrView/LabelItem.tsx | 108 ++++++++++++++---- moon/apps/web/hooks/useGetLabelById.ts | 9 ++ 2 files changed, 92 insertions(+), 25 deletions(-) create mode 100644 moon/apps/web/hooks/useGetLabelById.ts diff --git a/moon/apps/web/components/MrView/LabelItem.tsx b/moon/apps/web/components/MrView/LabelItem.tsx index 35690db01..a62defaa8 100644 --- a/moon/apps/web/components/MrView/LabelItem.tsx +++ b/moon/apps/web/components/MrView/LabelItem.tsx @@ -1,36 +1,94 @@ -import { ConditionalWrap } from '@gitmono/ui' -import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember' -import { MemberHovercard } from '../InlinePost/MemberHovercard' -import { MemberAvatar } from '../MemberAvatar' -import { UserLinkByName } from './components/UserLinkByName' +import {ConditionalWrap} from '@gitmono/ui' +import {useGetOrganizationMember} from '@/hooks/useGetOrganizationMember' +import {MemberHovercard} from '../InlinePost/MemberHovercard' +import {MemberAvatar} from '../MemberAvatar' +import {UserLinkByName} from './components/UserLinkByName' import HandleTime from './components/HandleTime' -import { ConversationItem } from '@gitmono/types/generated' - +import {ConversationItem, GetApiLabelByIdData, type LabelItem} from '@gitmono/types/generated' +import {getFontColor} from "@/utils/getFontColor"; +import {legacyApiClient} from "@/utils/queryClient"; +import {useEffect, useMemo, useState} from "react"; +import {apiErrorToast} from "@/utils/apiErrorToast"; interface LabelItemProps { conv: ConversationItem } -const LabelItem = ({ conv }: LabelItemProps) => { - const { data: member } = useGetOrganizationMember({ username: conv.username }) + +function LabelItem({conv}: LabelItemProps) { + const {data: member} = useGetOrganizationMember({username: conv.username}) + const comment = conv.comment?.split(' ') ?? [] + const match = useMemo( + () => + conv.comment?.match(/\[(.*?)]/) ?? [] + , [conv.comment]) + const [idList, setIdList] = useState([]) + const [labelList, setLabelList] = useState([]); + + useEffect(() => { + const res = (match.length > 1) ? match[1].split(", ") : [] + + setIdList(res) + }, [match]) + useEffect(() => { + if (idList.length === 0) return; + + Promise.all( + idList.map(id => + legacyApiClient.v1.getApiLabelById().request(parseInt(id, 10)) + ) + ).then((res: GetApiLabelByIdData) => { + const fetchedLabels = res + .filter(res => res?.data) + .map(res => res.data); + + setLabelList(fetchedLabels); + }).catch(err => + apiErrorToast(err) + ) + }, [idList]) return ( <> -
-
- ( - - - {c} - - - )} - > - {member ? : 'Avatar not found'} - +
+ ( + + + {c} + + + )} + > + {member ? : 'Avatar not found'} + +
+ {conv.username} + {comment[1]} + { + labelList.map(label => { + const fontColor = getFontColor(label.color) + + if (!label) return null + + return + {label.name} + + }) + }
-
{conv.comment}
@@ -39,4 +97,4 @@ const LabelItem = ({ conv }: LabelItemProps) => { ) } -export default LabelItem +export default LabelItem \ No newline at end of file diff --git a/moon/apps/web/hooks/useGetLabelById.ts b/moon/apps/web/hooks/useGetLabelById.ts new file mode 100644 index 000000000..f189c3578 --- /dev/null +++ b/moon/apps/web/hooks/useGetLabelById.ts @@ -0,0 +1,9 @@ +import {useMutation} from "@tanstack/react-query"; +import {GetApiLabelByIdData} from "@gitmono/types"; +import {legacyApiClient} from "@/utils/queryClient"; + +export function useGetLabelById() { + return useMutation({ + mutationFn: ({ id }) => legacyApiClient.v1.getApiLabelById().request(id) + }) +} \ No newline at end of file From a518d1ab4a7668cb93b9696cdc7ebf102c42f9cb Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Mon, 11 Aug 2025 12:26:40 +0800 Subject: [PATCH 2/5] fix(UI): fix type error --- moon/apps/web/components/MrView/LabelItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/moon/apps/web/components/MrView/LabelItem.tsx b/moon/apps/web/components/MrView/LabelItem.tsx index a62defaa8..336706fd5 100644 --- a/moon/apps/web/components/MrView/LabelItem.tsx +++ b/moon/apps/web/components/MrView/LabelItem.tsx @@ -36,7 +36,7 @@ function LabelItem({conv}: LabelItemProps) { idList.map(id => legacyApiClient.v1.getApiLabelById().request(parseInt(id, 10)) ) - ).then((res: GetApiLabelByIdData) => { + ).then((res: GetApiLabelByIdData[]) => { const fetchedLabels = res .filter(res => res?.data) .map(res => res.data); From e9cfbf937bad4a3fc4f72abd290fbbc5afc1320d Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Mon, 11 Aug 2025 13:08:43 +0800 Subject: [PATCH 3/5] fix(UI): change getLabelById hook --- moon/apps/web/components/MrView/LabelItem.tsx | 11 ++++++----- moon/apps/web/hooks/useGetLabelById.ts | 9 +++++---- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/moon/apps/web/components/MrView/LabelItem.tsx b/moon/apps/web/components/MrView/LabelItem.tsx index 336706fd5..cb8d4fb36 100644 --- a/moon/apps/web/components/MrView/LabelItem.tsx +++ b/moon/apps/web/components/MrView/LabelItem.tsx @@ -33,9 +33,12 @@ function LabelItem({conv}: LabelItemProps) { if (idList.length === 0) return; Promise.all( - idList.map(id => - legacyApiClient.v1.getApiLabelById().request(parseInt(id, 10)) - ) + idList.map(id => { + const numId = parseInt(id, 10); + + if (isNaN(numId)) return Promise.reject(new Error('Invalid ID')); + return legacyApiClient.v1.getApiLabelById().request(numId); + }) ).then((res: GetApiLabelByIdData[]) => { const fetchedLabels = res .filter(res => res?.data) @@ -69,8 +72,6 @@ function LabelItem({conv}: LabelItemProps) { labelList.map(label => { const fontColor = getFontColor(label.color) - if (!label) return null - return ({ - mutationFn: ({ id }) => legacyApiClient.v1.getApiLabelById().request(id) +export function useGetLabelById(id: number) { + return useQuery({ + queryKey: ['label', id], + queryFn: () => legacyApiClient.v1.getApiLabelById().request(id), }) } \ No newline at end of file From f5d21dfea9ccab54d723b99517844171aaca5ed4 Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Mon, 11 Aug 2025 14:32:22 +0800 Subject: [PATCH 4/5] fix(UI): change type CommonResultLabelItem --- moon/packages/types/generated.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/moon/packages/types/generated.ts b/moon/packages/types/generated.ts index e277dab61..59886333a 100644 --- a/moon/packages/types/generated.ts +++ b/moon/packages/types/generated.ts @@ -3122,6 +3122,18 @@ export type CommonResultIssueDetailRes = { req_result: boolean } +export type CommonResultLabelItem = { + data?: { + color: string + description: string + /** @format int64 */ + id: number + name: string + } + err_message: string + req_result: boolean +} + export type CommonResultMRDetailRes = { data?: { assignees: string[] @@ -4688,7 +4700,7 @@ export type PostApiLabelListData = CommonResultCommonPageLabelItem export type PostApiLabelNewData = CommonResultString -export type GetApiLabelByIdData = CommonResultCommonPageLabelItem +export type GetApiLabelByIdData = CommonResultLabelItem export type GetApiLatestCommitParams = { refs?: string From 99acc80008062813ef738f66c2a0e94f0857e53d Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Mon, 11 Aug 2025 14:43:59 +0800 Subject: [PATCH 5/5] fix(UI): fix wrong types --- moon/apps/web/components/MrView/LabelItem.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/moon/apps/web/components/MrView/LabelItem.tsx b/moon/apps/web/components/MrView/LabelItem.tsx index cb8d4fb36..076dd3a7f 100644 --- a/moon/apps/web/components/MrView/LabelItem.tsx +++ b/moon/apps/web/components/MrView/LabelItem.tsx @@ -4,7 +4,7 @@ import {MemberHovercard} from '../InlinePost/MemberHovercard' import {MemberAvatar} from '../MemberAvatar' import {UserLinkByName} from './components/UserLinkByName' import HandleTime from './components/HandleTime' -import {ConversationItem, GetApiLabelByIdData, type LabelItem} from '@gitmono/types/generated' +import {ConversationItem, GetApiLabelByIdData} from '@gitmono/types/generated' import {getFontColor} from "@/utils/getFontColor"; import {legacyApiClient} from "@/utils/queryClient"; import {useEffect, useMemo, useState} from "react"; @@ -13,6 +13,7 @@ import {apiErrorToast} from "@/utils/apiErrorToast"; interface LabelItemProps { conv: ConversationItem } +type LabelList = ({ color: string; description: string; id: number; name: string; })[] function LabelItem({conv}: LabelItemProps) { const {data: member} = useGetOrganizationMember({username: conv.username}) @@ -22,7 +23,7 @@ function LabelItem({conv}: LabelItemProps) { conv.comment?.match(/\[(.*?)]/) ?? [] , [conv.comment]) const [idList, setIdList] = useState([]) - const [labelList, setLabelList] = useState([]); + const [labelList, setLabelList] = useState([]); useEffect(() => { const res = (match.length > 1) ? match[1].split(", ") : [] @@ -42,7 +43,7 @@ function LabelItem({conv}: LabelItemProps) { ).then((res: GetApiLabelByIdData[]) => { const fetchedLabels = res .filter(res => res?.data) - .map(res => res.data); + .map(res => res!!.data!!) ?? []; setLabelList(fetchedLabels); }).catch(err =>