feat:add feature of modifying content

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

@@ -41,7 +41,7 @@ import {
   useLabelsSelector,
   useMemberMap
 } from './utils/sideEffect'
-import { idAtom } from './utils/store'
+import { editIdAtom, FALSE_EDIT_VAL, idAtom, refreshAtom } from './utils/store'
 
 export default function IssueDetailPage({ link }: { link: string }) {
   const [id] = useAtom(idAtom)
@@ -107,6 +107,19 @@ export default function IssueDetailPage({ link }: { link: string }) {
     fetchDetail()
   }, [fetchDetail, link])
 
+  const [refresh, setRefresh] = useAtom(refreshAtom)
+  const [_, setEditId] = useAtom(editIdAtom)
+
+  useEffect(() => {
+    const load = async () => {
+      await refetch()
+      setEditId(FALSE_EDIT_VAL)
+      setRefresh(0)
+    }
+
+    load()
+  }, [refresh, refetch, setEditId, setRefresh])
+
   const [_loadings, setLoadings] = useState<boolean[]>([])
   const router = useRouter()
 
@@ -306,12 +319,14 @@ export default function IssueDetailPage({ link }: { link: string }) {
       <div className='h-screen overflow-auto pt-10'>
         {info?.title && (
           <div className='px-10 pb-4 text-xl'>
-            <div className='mb-4 w-[70%]'>
+            <div className='mb-4'>
               {!isEdit && (
                 <>
                   <div className='flex w-full items-center justify-between'>
                     <UIText size='text-2xl' weight='font-bold' className='-tracking-[1px] lg:flex'>
                       {`${issueDetail?.title || ''}`}
+                      <span>&nbsp;</span>
+                      <span className='font-light !text-[#59636e]'>${issueDetail?.id}</span>
                     </UIText>
                     <Button
                       onClick={() => {

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

@@ -42,3 +42,8 @@ export const labelsCloseCurrentPage = atomWithWebStorage('LabelsCloseCurrentPage
 
 export const idAtom = atom(0)
 export const mridAtom = atom(0)
+
+export const FALSE_EDIT_VAL = -1
+export const editIdAtom = atom(0)
+
+export const refreshAtom = atom(0)

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

@@ -1,10 +1,24 @@
-import { Button, CopyIcon, DotsHorizontal, PreferenceIcon, PencilIcon, QuoteIcon, TrashIcon, EyeHideIcon } from '@gitmono/ui'
+import { useAtom } from 'jotai'
+
+import { ConversationItem } from '@gitmono/types/generated'
+import {
+  Button,
+  CopyIcon,
+  DotsHorizontal,
+  EyeHideIcon,
+  PencilIcon,
+  PreferenceIcon,
+  QuoteIcon,
+  TrashIcon
+} from '@gitmono/ui'
 import { DropdownMenu } from '@gitmono/ui/DropdownMenu'
 import { buildMenuItems } from '@gitmono/ui/Menu'
-import { ConversationItem } from '@gitmono/types/generated';
+
 import { useDeleteIssueComment } from '@/hooks/issues/useDeleteIssueComment'
 import { useDeleteMrCommentDelete } from '@/hooks/useDeleteMrCommentDelete'
 
+import { editIdAtom } from '../Issues/utils/store'
+
 interface CommentDropdownMenuProps {
   id: string
   Conversation: ConversationItem
@@ -14,6 +28,7 @@ interface CommentDropdownMenuProps {
 export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDropdownMenuProps) {
   const { mutate: deleteComment } = useDeleteMrCommentDelete(id)
   const { mutate: deleteIssueComment } = useDeleteIssueComment(id)
+  const [_editId, setEditId] = useAtom(editIdAtom)
 
   const handleDelete = () => {
     switch (CommentType) {
@@ -32,28 +47,29 @@ export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDr
     {
       type: 'item',
       label: 'Copy',
-      leftSlot: <CopyIcon />,
+      leftSlot: <CopyIcon />
     },
     {
       type: 'item',
       label: 'Quote',
-      leftSlot: <QuoteIcon />,
+      leftSlot: <QuoteIcon />
     },
     {
       type: 'item',
       label: 'Reference',
-      leftSlot: <PreferenceIcon />,
+      leftSlot: <PreferenceIcon />
     },
     { type: 'separator' },
     {
       type: 'item',
       label: 'Edit',
       leftSlot: <PencilIcon />,
+      onSelect: () => setEditId(Conversation.id)
     },
     {
       type: 'item',
       label: 'Hide',
-      leftSlot: <EyeHideIcon />,
+      leftSlot: <EyeHideIcon />
     },
     {
       type: 'item',
@@ -64,8 +80,6 @@ export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDr
     }
   ])
 
-
-
   return (
     <>
       <DropdownMenu

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

@@ -1,17 +1,32 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { useAtom } from 'jotai'
+import toast from 'react-hot-toast'
+
 import { getNoteExtensions } from '@gitmono/editor'
+import { ConversationItem } from '@gitmono/types/generated'
+import { Button, ConditionalWrap, FaceSmilePlusIcon, PicturePlusIcon, UIText } from '@gitmono/ui'
+
+import { EMPTY_HTML } from '@/atoms/markdown'
 import { RichTextRenderer } from '@/components/RichTextRenderer'
-import { useMemo } from 'react'
-import { Button, ConditionalWrap, FaceSmilePlusIcon, UIText } from '@gitmono/ui'
+import { usePostComment } from '@/hooks/issues/usePostComment'
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+import { useUploadHelpers } from '@/hooks/useUploadHelpers'
+import { apiErrorToast } from '@/utils/apiErrorToast'
+import { trimHtml } from '@/utils/trimHtml'
+
 import { MemberHovercard } from '../InlinePost/MemberHovercard'
+import { useChange } from '../Issues/utils/sideEffect'
+import { editIdAtom, FALSE_EDIT_VAL, refreshAtom } from '../Issues/utils/store'
 import { MemberAvatar } from '../MemberAvatar'
-import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
-import { UserLinkByName } from './components/UserLinkByName'
-import HandleTime from './components/HandleTime'
+import { useHandleBottomScrollOffset } from '../NoteEditor/useHandleBottomScrollOffset'
+import { ComposerReactionPicker } from '../Reactions/ComposerReactionPicker'
 import { ReactionPicker } from '../Reactions/ReactionPicker'
-import { useHandleExpression } from './hook/useHandleExpression'
-import { CommentDropdownMenu } from './CommentDropdownMenu'
-import { ConversationItem } from '@gitmono/types/generated'
 import { ReactionShow } from '../Reactions/ReactionShow'
+import { SimpleNoteContent, SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent'
+import { CommentDropdownMenu } from './CommentDropdownMenu'
+import HandleTime from './components/HandleTime'
+import { UserLinkByName } from './components/UserLinkByName'
+import { useHandleExpression } from './hook/useHandleExpression'
 
 interface CommentProps {
   conv: ConversationItem
@@ -21,13 +36,16 @@ interface CommentProps {
 
 const Comment = ({ conv, id, whoamI }: CommentProps) => {
   const { data: member } = useGetOrganizationMember({ username: conv.username })
-  
+
   const extensions = useMemo(() => getNoteExtensions({ linkUnfurl: {} }), [])
   const handleReactionSelect = useHandleExpression({ conv, id, type: whoamI })
+  const [editId, setEditId] = useAtom(editIdAtom)
+  const editInputRef = useRef<{ handleUpdate: () => void }>()
+  const [refresh, setRefresh] = useAtom(refreshAtom)
 
   return (
     <div className='overflow-hidden rounded-lg border border-gray-300 bg-white'>
-      <div className='flex items-center justify-between border-b border-gray-300 py-2 px-4'>
+      <div className='flex items-center justify-between border-b border-gray-300 px-4 py-2'>
         <div className='flex items-center space-x-3'>
           <div className='cursor-pointer'>
             <ConditionalWrap
@@ -40,7 +58,7 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
                 </MemberHovercard>
               )}
             >
-              { member ? <MemberAvatar member={member} size='sm'/> : "Avatar not found"}
+              {member ? <MemberAvatar member={member} size='sm' /> : 'Avatar not found'}
             </ConditionalWrap>
           </div>
           <div className='cursor-pointer'>
@@ -58,7 +76,7 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
             </ConditionalWrap>
           </div>
           <div className='text-sm text-gray-500 hover:text-gray-700'>
-            <HandleTime created_at={conv.created_at}/>
+            <HandleTime created_at={conv.created_at} />
           </div>
         </div>
         <div className='flex items-center'>
@@ -75,16 +93,109 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
             }
             onReactionSelect={handleReactionSelect}
           />
-          <CommentDropdownMenu id={id} Conversation={conv} CommentType={whoamI}/>
+          <CommentDropdownMenu id={id} Conversation={conv} CommentType={whoamI} />
         </div>
       </div>
 
       <div className='prose copyable-text p-3'>
-        { conv.comment && <RichTextRenderer content={conv.comment} extensions={extensions} /> }
+        {conv.comment && editId !== conv.id && <RichTextRenderer content={conv.comment} extensions={extensions} />}
+        {editId === conv.id && (
+          <>
+            <EditInput ref={editInputRef} comment={conv} />
+            <div className='flex justify-end gap-4'>
+              <Button disabled={refresh !== 0} onClick={() => setEditId(FALSE_EDIT_VAL)}>
+                Cancel
+              </Button>
+              <Button
+                disabled={refresh !== 0}
+                onClick={() => {
+                  // setEditId(FALSE_EDIT_VAL)
+                  setRefresh(Date.now())
+                  editInputRef.current && editInputRef.current.handleUpdate()
+                }}
+                className='bg-[#1f883d] text-white'
+              >
+                Update Comment
+              </Button>
+            </div>
+          </>
+        )}
         <ReactionShow comment={conv} id={id} type={whoamI} />
       </div>
     </div>
   )
 }
 
+const EditInput = forwardRef(({ comment }: { comment: ConversationItem }, ref) => {
+  const editorRef = useRef<SimpleNoteContentRef>(null)
+  const onKeyDownScrollHandler = useHandleBottomScrollOffset({
+    editor: editorRef.current?.editor
+  })
+  const { dropzone } = useUploadHelpers({
+    upload: editorRef.current?.uploadAndAppendAttachments
+  })
+  const { handleChange } = useChange({})
+  const [isReactionPickerOpen, setIsReactionPickerOpen] = useState(false)
+  const { mutateAsync: updateComment } = usePostComment()
+
+  const [_refresh, setRefresh] = useAtom(refreshAtom)
+
+  const handleUpdate = async () => {
+    const currentContentHTML = editorRef.current?.editor?.getHTML() ?? '<p></p>'
+
+    if (trimHtml(currentContentHTML) === '') {
+      toast.error('comment can not be empty!')
+      setRefresh(0)
+      return
+    }
+
+    try {
+      await updateComment({ commentId: comment.id, data: { content: currentContentHTML } })
+      toast.success('update successfully!')
+    } catch (err: any) {
+      apiErrorToast(new Error(err.message))
+    }
+    // finally {
+    //   setRefresh(Date.now())
+    // }
+  }
+
+  useImperativeHandle(ref, () => ({
+    handleUpdate
+  }))
+
+  return (
+    <>
+      <div className='prose mt-4 flex w-full flex-col'>
+        <input {...dropzone.getInputProps()} />
+        <div className='relative rounded-lg border p-6 pb-12'>
+          <SimpleNoteContent
+            commentId='temp' //  Temporary filling, replacement later
+            ref={editorRef}
+            editable='all'
+            content={comment.comment || EMPTY_HTML}
+            autofocus={true}
+            onKeyDown={onKeyDownScrollHandler}
+            onChange={(html) => handleChange(html)}
+          />
+          <Button
+            variant='plain'
+            iconOnly={<PicturePlusIcon />}
+            accessibilityLabel='Add files'
+            onClick={dropzone.open}
+            tooltip='Add files'
+          />
+          <ComposerReactionPicker
+            editorRef={editorRef}
+            open={isReactionPickerOpen}
+            onOpenChange={setIsReactionPickerOpen}
+          />
+        </div>
+      </div>
+    </>
+  )
+})
+
+EditInput.displayName = 'EditInput'
+
 export default Comment

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

@@ -9,10 +9,13 @@ enum Status {
   Rejected = 'rejected'
 }
 
+const root = '/sse/'
+
 const Checks = () => {
   const serverStream = useRef('')
   const es = useRef<EventSource | null>()
-  const baseUrl = useRef('http://47.79.95.33:3000/logs?follow=true')
+  // const baseUrl = useRef('http://47.79.95.33:3000/logs?follow=true')
+  const baseUrl = useRef(`${root}logs?follow=true`)
   const status = useRef(Status.Pending)
   const [displayTest, setDisplayText] = useState('')
   const { createEventSource } = useSSM()
@@ -40,7 +43,7 @@ const Checks = () => {
       serverStream.current = ''
       setDisplayText('')
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

moon/apps/web/hooks/issues/usePostComment.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { ContentPayload, PostApiConversationByCommentIdData, RequestParams } from '@gitmono/types/generated'
+
+import { legacyApiClient } from '@/utils/queryClient'
+
+export function usePostComment() {
+  return useMutation<
+    PostApiConversationByCommentIdData,
+    Error,
+    { commentId: number; data: ContentPayload; params?: RequestParams }
+  >({
+    mutationFn: ({ commentId, data, params }) =>
+      legacyApiClient.v1.postApiConversationByCommentId().request(commentId, data, params)
+  })
+}

moon/apps/web/next.config.js

@@ -62,7 +62,8 @@ const cspResourcesByDirective = {
     process.env.NODE_ENV !== 'production' && 'https://campsite-dev.imgix.net',
     'https://react-tweet.vercel.app', // for react-tweet embeds
     'https://media.tenor.com', // used for Tenor gifs
-    'http://47.79.95.33:3000'
+    // 'http://47.79.95.33:3000'
+    'https://orion.gitmega.com'
   ],
   'font-src': ["'self'"],
   'img-src': [
@@ -221,6 +222,10 @@ const moduleExports = {
       {
         source: '/ingest/decide',
         destination: 'https://us.i.posthog.com/decide'
+      },
+      {
+        source: '/sse/:path*',
+        destination: `https://orion.gitmega.com/:path*`
       }
     ]
   },