feat:fix the router problem & add assignees style

moon/apps/web/components/Issues/IssueDetailPage.tsx

@@ -1,39 +1,46 @@
-'use client';
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { IssueClosedIcon, IssueOpenedIcon, IssueReopenedIcon } from '@primer/octicons-react';
-import { Stack } from '@primer/react';
-import { useRouter } from 'next/router';
-import toast from 'react-hot-toast';
-
-
-import { CommonResultIssueDetailRes } from '@gitmono/types';
-import { Button, LoadingSpinner, PicturePlusIcon } from '@gitmono/ui';
-
-import { EMPTY_HTML } from '@/atoms/markdown';
-import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset';
-import { ComposerReactionPicker } from '@/components/Reactions/ComposerReactionPicker';
-import { SimpleNoteContent, SimpleNoteContentRef } from '@/components/SimpleNoteEditor/SimpleNoteContent';
-import { useGetIssueDetail } from '@/hooks/issues/useGetIssueDetail';
-import { usePostIssueAssignees } from '@/hooks/issues/usePostIssueAssignees';
-import { usePostIssueClose } from '@/hooks/issues/usePostIssueClose';
-import { usePostIssueComment } from '@/hooks/issues/usePostIssueComment';
-import { usePostIssueReopen } from '@/hooks/issues/usePostIssueReopen';
-import { useGetCurrentUser } from '@/hooks/useGetCurrentUser';
-import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember';
-import { usePostIssueLabels } from '@/hooks/usePostIssueLabels';
-import { useUploadHelpers } from '@/hooks/useUploadHelpers';
-import { apiErrorToast } from '@/utils/apiErrorToast';
-import { trimHtml } from '@/utils/trimHtml';
-
-
-
-import { MemberAvatar } from '../MemberAvatar';
-import TimelineItems from '../MrView/TimelineItems';
-import { BadgeItem } from './IssueNewPage';
-import { pickWithReflect } from './utils/pickWithReflectDeep';
-import { splitFun, useAssigneesSelector, useAvatars, useChange, useLabelMap, useLabels, useLabelsSelector, useMemberMap } from './utils/sideEffect';
-
+'use client'
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { IssueClosedIcon, IssueOpenedIcon, IssueReopenedIcon } from '@primer/octicons-react'
+import { Stack } from '@primer/react'
+import { useAtom } from 'jotai'
+import { useRouter } from 'next/router'
+import toast from 'react-hot-toast'
+
+import { CommonResultIssueDetailRes } from '@gitmono/types'
+import { Button, LoadingSpinner, PicturePlusIcon } from '@gitmono/ui'
+
+import { EMPTY_HTML } from '@/atoms/markdown'
+import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
+import { ComposerReactionPicker } from '@/components/Reactions/ComposerReactionPicker'
+import { SimpleNoteContent, SimpleNoteContentRef } from '@/components/SimpleNoteEditor/SimpleNoteContent'
+import { useGetIssueDetail } from '@/hooks/issues/useGetIssueDetail'
+import { usePostIssueAssignees } from '@/hooks/issues/usePostIssueAssignees'
+import { usePostIssueClose } from '@/hooks/issues/usePostIssueClose'
+import { usePostIssueComment } from '@/hooks/issues/usePostIssueComment'
+import { usePostIssueReopen } from '@/hooks/issues/usePostIssueReopen'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser'
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+import { usePostIssueLabels } from '@/hooks/usePostIssueLabels'
+import { useUploadHelpers } from '@/hooks/useUploadHelpers'
+import { apiErrorToast } from '@/utils/apiErrorToast'
+import { trimHtml } from '@/utils/trimHtml'
+
+import { MemberAvatar } from '../MemberAvatar'
+import TimelineItems from '../MrView/TimelineItems'
+import { BadgeItem } from './IssueNewPage'
+import { pickWithReflect } from './utils/pickWithReflectDeep'
+import {
+  splitFun,
+  useAssigneesSelector,
+  useAvatars,
+  useChange,
+  useLabelMap,
+  useLabels,
+  useLabelsSelector,
+  useMemberMap
+} from './utils/sideEffect'
+import { idAtom } from './utils/store'
 
 // interface IssueDetail {
 //   status: string
@@ -44,7 +51,8 @@ import { splitFun, useAssigneesSelector, useAvatars, useChange, useLabelMap, use
 
 // let needComment = false
 
-export default function IssueDetailPage({ link, id }: { link: string; id: number }) {
+export default function IssueDetailPage({ link }: { link: string }) {
+  const [id] = useAtom(idAtom)
   const [login, setLogin] = useState(false)
   const [info, setInfo] = useState<Partial<CommonResultIssueDetailRes['data']>>({
     status: '',
@@ -223,22 +231,6 @@ export default function IssueDetailPage({ link, id }: { link: string; id: number
 
   const labelMap = useLabelMap()
 
-  // const handleChange = (html: string) => {
-  //   if (html && html === '<p></p>') {
-  //     setCloseHint('Close issue')
-  //   } else {
-  //     setCloseHint('Close with comment')
-  //   }
-  // }
-
-  // const handleCloseChange = (html: string) => {
-  //   if (html && html === '<p></p>') {
-  //     needComment = false
-  //   } else {
-  //     needComment = true
-  //   }
-  // }
-
   const { open, handleAssignees, handleOpenChange, fetchSelected } = useAssigneesSelector({
     assignees: info?.assignees ?? [],
     assignRequest: (selected) =>
@@ -450,7 +442,7 @@ export default function IssueDetailPage({ link, id }: { link: string; id: number
                 )}
               </div>
               {/* <SideBar /> */}
-              <div className='flex flex-1 flex-col flex-wrap items-center'>
+              <div className='flex flex-1 flex-col flex-nowrap items-center'>
                 <BadgeItem
                   selectPannelProps={{ title: 'Assign up to 10 people to this issue' }}
                   items={avatars}
@@ -476,9 +468,9 @@ export default function IssueDetailPage({ link, id }: { link: string; id: number
                     )
                   }}
                 </BadgeItem>
-                <BadgeItem 
-                  selectPannelProps={{ title: 'Apply labels to this issue' }} 
-                  items={labels} 
+                <BadgeItem
+                  selectPannelProps={{ title: 'Apply labels to this issue' }}
+                  items={labels}
                   title='Labels'
                   handleGroup={(selected) => handleLabels(selected)}
                   open={label_open}

moon/apps/web/components/Issues/IssuesContent.tsx

@@ -25,20 +25,26 @@ import {
   ListBanner,
   ListItem
 } from '@/components/Issues/IssueList'
-import { filterAtom, issueCloseCurrentPage, issueOpenCurrentPage, sortAtom } from '@/components/Issues/utils/store'
+import {
+  filterAtom,
+  idAtom,
+  issueCloseCurrentPage,
+  issueOpenCurrentPage,
+  sortAtom
+} from '@/components/Issues/utils/store'
 import { useScope } from '@/contexts/scope'
 import { useGetIssueLists } from '@/hooks/issues/useGetIssueLists'
+import { useGetLabelList } from '@/hooks/useGetLabelList'
 import { useSyncedMembers } from '@/hooks/useSyncedMembers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
 import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
+import { getFontColor } from '@/utils/getFontColor'
 
 import { IssueIndexTabFilter } from './IssueIndex'
 import { MemberHoverAvatarList } from './MemberHoverAvatarList'
 import { Pagination } from './Pagenation'
 import { orderTags } from './utils/consts'
 import { generateAllMenuItems, MenuConfig } from './utils/generateAllMenuItems'
-import { useGetLabelList } from '@/hooks/useGetLabelList'
-import { getFontColor } from '@/utils/getFontColor'
 
 interface Props {
   getIssues?: ReturnType<typeof useInfiniteQuery<PostApiIssueListData>>
@@ -347,6 +353,7 @@ export function IssuesContent({ searching }: Props) {
 
     [issueLists, additions]
   )
+  const [_iddAtom, setIdAtom] = useAtom(idAtom)
 
   useEffect(() => {
     if (status === 'open') {
@@ -415,7 +422,10 @@ export function IssuesContent({ searching }: Props) {
                   title={i.title}
                   leftIcon={getStatusIcon(i.status)}
                   rightIcon={<RightAvatar item={i} />}
-                  onClick={() => router.push(`/${scope}/issue/${i.link}/${i.id}`)}
+                  onClick={() => {
+                    setIdAtom(i.id)
+                    router.push(`/${scope}/issue/${i.link}`)
+                  }}
                 >
                   <div className='text-xs text-[#59636e]'>
                     {i.link} · {i.author} {i.status}{' '}
@@ -471,24 +481,26 @@ export const RightAvatar = ({ item }: { item: ItemsType[number] }) => {
           }}
           className='flex items-center gap-2 text-sm'
         >
-          {item.labels.map(label => {
+          {item.labels.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>
+            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>
 

moon/apps/web/components/Issues/utils/store.tsx

@@ -38,4 +38,7 @@ export const mrOpenCurrentPage = atomWithWebStorage('MROpencurrentPage', 1)
 export const mrCloseCurrentPage = atomWithWebStorage('MRClosecurrentPage', 1)
 
 export const labelsOpenCurrentPage = atomWithWebStorage('LabelsOpenCurrentPage', 1)
-export const labelsCloseCurrentPage = atomWithWebStorage('LabelsCloseCurrentPage', 1)
+export const labelsCloseCurrentPage = atomWithWebStorage('LabelsCloseCurrentPage', 1)
+
+export const idAtom = atom(0)
+export const mridAtom = atom(0)

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

@@ -0,0 +1,66 @@
+import { ConditionalWrap } from '@gitmono/ui/utils'
+
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+
+import { MemberHovercard } from '../InlinePost/MemberHovercard'
+import { MemberAvatar } from '../MemberAvatar'
+import HandleTime from './components/HandleTime'
+import { UserLinkByName } from './components/UserLinkByName'
+import { ReopenItemProps } from './ReopenItem'
+
+const AssigneeItem = ({ conv }: ReopenItemProps) => {
+  const match = conv.comment?.match(/\["(.*?)"\]/) ?? ''
+  const comment = conv.comment?.split(' ') ?? []
+  const { data: member } = useGetOrganizationMember({ username: conv.username })
+
+  const assignees = match[1].split('", "')
+
+  return (
+    <>
+      <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>
+          {assignees &&
+            assignees.map((i, index) => (
+              <ConditionalWrap
+                key={i}
+                condition={true}
+                wrap={(c) => (
+                  <MemberHovercard username={i}>
+                    <UserLinkByName username={i} className='relative'>
+                      {c}
+                    </UserLinkByName>
+                  </MemberHovercard>
+                )}
+              >
+                <>
+                  <span className='cursor-pointer text-[#1f2328] underline'>
+                    {i}
+                    {index < assignees.length - 1 && ', '}
+                  </span>
+                </>
+              </ConditionalWrap>
+            ))}
+        </div>
+        <div className='text-sm text-gray-500 hover:text-gray-700'>
+          <HandleTime created_at={conv.created_at} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default AssigneeItem

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

@@ -7,7 +7,7 @@ import HandleTime from './components/HandleTime'
 import { ConversationItem } from '@gitmono/types/generated'
 
 
-interface ReopenItemProps {
+export interface ReopenItemProps {
   conv: ConversationItem
 }
 const ReopenItem = ({ conv }: ReopenItemProps) => {

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

@@ -8,14 +8,15 @@ import {
   FeedPullRequestClosedIcon,
   FeedPullRequestOpenIcon,
   FeedTagIcon,
+  PersonIcon,
   RepoPushIcon
 } from '@primer/octicons-react'
 import { BaseStyles, ThemeProvider, Timeline } from '@primer/react'
 
 import { ConversationItem } from '@gitmono/types/generated'
 
 import MRComment from '@/components/MrView/MRComment'
-
+import AssigneeItem from './AssigneeItem'
 import CloseItem from './CloseItem'
 import MergedItem from './MergedItem'
 import ReopenItem from './ReopenItem'
@@ -93,8 +94,8 @@ const TimelineItems: React.FC<{ detail: any; id: string; type: string }> = ({ de
         children = <ReopenItem conv={conv} />
         break
       case 'Assignee':
-        icon = <CommentIcon />
-        children = <MRComment conv={conv} id={id} whoamI={type} />
+        icon = <PersonIcon size={24} />
+        children = <AssigneeItem conv={conv} />
         break
       case 'Label':
         icon = <FeedTagIcon size={24} className='text-cyan-500' />

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

@@ -22,6 +22,7 @@ import {
   IssueList as MrList
 } from '@/components/Issues/IssueList'
 import { useScope } from '@/contexts/scope'
+import { useGetLabelList } from '@/hooks/useGetLabelList'
 import { usePostMrList } from '@/hooks/usePostMrList'
 import { useSyncedMembers } from '@/hooks/useSyncedMembers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
@@ -32,9 +33,8 @@ import { AdditionType, RightAvatar } from '../Issues/IssuesContent'
 import { Pagination } from '../Issues/Pagenation'
 import { orderTags, reviewTags } from '../Issues/utils/consts'
 import { generateAllMenuItems, MenuConfig } from '../Issues/utils/generateAllMenuItems'
-import { filterAtom, mrCloseCurrentPage, mrOpenCurrentPage, sortAtom } from '../Issues/utils/store'
+import { filterAtom, mrCloseCurrentPage, mridAtom, mrOpenCurrentPage, sortAtom } from '../Issues/utils/store'
 import { Heading } from './catalyst/heading'
-import { useGetLabelList } from '@/hooks/useGetLabelList'
 
 // interface MrInfoItem {
 //   link: string
@@ -60,6 +60,7 @@ export default function MrView() {
   const [sort, setSort] = useAtom(sortAtom({ scope, filter: 'sortPickerMR' }))
   const { members } = useSyncedMembers()
   const { labels: labelList } = useGetLabelList()
+  const [_mrid, setMrid] = useAtom(mridAtom)
 
   const orderAtom = useMemo(
     () => atomWithWebStorage(`${scope}:mr-order`, { sort: 'Created On', time: 'Newest' }),
@@ -438,7 +439,10 @@ export default function MrView() {
                 return issueList.map((i) => (
                   <MrItem
                     key={i.id}
-                    onClick={() => router.push(`/${scope}/mr/${i.link}/${i.id}`)}
+                    onClick={() => {
+                      setMrid(i.id)
+                      router.push(`/${scope}/mr/${i.link}`)
+                    }}
                     title={i.title}
                     leftIcon={getStatusIcon(i.status)}
                     rightIcon={<RightAvatar item={i} />}