feat(UI): add label display in comments

moon/apps/web/components/MrView/LabelItem.tsx

@@ -1,36 +1,96 @@
-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} 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 })
+type LabelList = ({ color: string; description: string; id: number; name: string; })[]
+
+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<string[]>([])
+  const [labelList, setLabelList] = useState<LabelList>([]);
+
+  useEffect(() => {
+    const res = (match.length > 1) ? match[1].split(", ") : []
+
+    setIdList(res)
+  }, [match])
+  useEffect(() => {
+    if (idList.length === 0) return;
+
+    Promise.all(
+      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)
+        .map(res => res!!.data!!) ?? [];
+
+      setLabelList(fetchedLabels);
+    }).catch(err =>
+      apiErrorToast(err)
+    )
+  }, [idList])
 
   return (
     <>
-      <div className='flex items-center space-x-2'>
-        <div className='cursor-pointer'>
-          <ConditionalWrap
-            condition={true}
-            wrap={(c) => (
-              <MemberHovercard username={conv?.username}>
-                <UserLinkByName username={conv?.username} className='relative'>
-                  {c}
-                </UserLinkByName>
-              </MemberHovercard>
-            )}
-          >
-            {member ? <MemberAvatar member={member} size='sm' /> : 'Avatar not found'}
-          </ConditionalWrap>
+      <div className='flex flex-wrap items-center gap-2'>
+        <ConditionalWrap
+          condition={true}
+          wrap={(c) => (
+            <MemberHovercard username={conv?.username}>
+              <UserLinkByName username={conv?.username} className='relative'>
+                {c}
+              </UserLinkByName>
+            </MemberHovercard>
+          )}
+        >
+          {member ? <MemberAvatar member={member} size='sm'/> : 'Avatar not found'}
+        </ConditionalWrap>
+        <div>
+          <span className='font-semibold'>{conv.username} </span>
+          <span className='text-gray-400'>{comment[1]} </span>
+          {
+            labelList.map(label => {
+              const fontColor = getFontColor(label.color)
+
+              return <span
+                key={label.id}
+                style={{
+                  backgroundColor: label.color,
+                  color: fontColor.toHex(),
+                  borderRadius: '16px',
+                  padding: '0px 8px',
+                  fontSize: '12px',
+                  fontWeight: '550',
+                  justifyContent: 'center',
+                  textAlign: 'center'
+                }}
+              >
+              {label.name}
+            </span>
+            })
+          }
         </div>
-        <div>{conv.comment}</div>
         <div className='text-sm text-gray-500 hover:text-gray-700'>
           <HandleTime created_at={conv.created_at}/>
         </div>
@@ -39,4 +99,4 @@ const LabelItem = ({ conv }: LabelItemProps) => {
   )
 }
 
-export default LabelItem
+export default LabelItem

moon/apps/web/hooks/useGetLabelById.ts

@@ -0,0 +1,10 @@
+import {useQuery} from "@tanstack/react-query";
+import {GetApiLabelByIdData} from "@gitmono/types";
+import {legacyApiClient} from "@/utils/queryClient";
+
+export function useGetLabelById(id: number) {
+  return useQuery<GetApiLabelByIdData, Error>({
+    queryKey: ['label', id],
+    queryFn: () => legacyApiClient.v1.getApiLabelById().request(id),
+  })
+}

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