* added edit / delete comment + addressed marker behavior in those co…

…nditions + bug fixes
bldrs-ai · Jan 8, 2025 · 48c0401 · 48c0401
1 parent 3df9b0c
commit 48c0401
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1226",
+  "version": "1.0.1231",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

diff --git a/src/Components/Markers/MarkerControl.jsx b/src/Components/Markers/MarkerControl.jsx
@@ -152,6 +152,7 @@ export function PlacemarkHandlers() {
   // Access markers and the necessary store functions
   const markers = useStore((state) => state.markers)
   const setSelectedPlaceMarkId = useStore((state) => state.setSelectedPlaceMarkId)
+  const commentMutatedSignal = useStore((state) => state.commentMutatedSignal)
   // eslint-disable-next-line no-unused-vars
   const {selectedPlaceMarkInNoteId, cameraHash} = useStore((state) => ({
     selectedPlaceMarkInNoteId: state.selectedPlaceMarkInNoteId,
@@ -232,7 +233,7 @@ export function PlacemarkHandlers() {
     })()
     // Add markers to the dependency array so useEffect re-runs on markers change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [markers])
+  }, [markers, commentMutatedSignal])
 
 
   // Save a placemark

diff --git a/src/Components/Notes/NoteCard.jsx b/src/Components/Notes/NoteCard.jsx
@@ -4,6 +4,7 @@ import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import NoteBodyEdit from './NoteBodyEdit'
 import {useAuth0} from '../../Auth0/Auth0Proxy'
+import {updateComment} from '../../net/github/Comments'
 import {
   closeIssue,
   updateIssue,
@@ -25,6 +26,7 @@ import NoteContent from './NoteContent'
 import {HASH_PREFIX_NOTES, HASH_PREFIX_COMMENT} from './hashState'
 import NoteFooter from './NoteFooter'
 import NoteMenu from './NoteMenu'
+import {deleteComment} from '../../net/github/Comments'
 
 
 /**
@@ -61,7 +63,6 @@ export default function NoteCard({
   const notes = useStore((state) => state.notes)
   const repository = useStore((state) => state.repository)
   const selectedNoteId = useStore((state) => state.selectedNoteId)
-  // TODO(pablo)
   // const comments = useStore((state) => state.comments)
   // const setComments = useStore((state) => state.setComments)
   const setNotes = useStore((state) => state.setNotes)
@@ -81,6 +82,8 @@ export default function NoteCard({
 
   const setEditOriginalBody = useStore((state) => state.setEditOriginalBody)
 
+  const signalCommentMutated = useStore((state) => state.signalCommentMutated)
+
 
   const handleEditBodyChange = (newBody) => {
     setEditBody(newBody) // Update local editBody state
@@ -226,7 +229,7 @@ export default function NoteCard({
    *
    * @param {number} noteNumber obtained from github issue
    */
-  async function onDeleteClick(noteNumberToDelete) {
+  async function onDeleteNote(noteNumberToDelete) {
     // TODO(pablo): handle response
     const res = await closeIssue(repository, noteNumberToDelete, accessToken)
     const updatedNotes = notes.filter((note) => note.number !== noteNumberToDelete)
@@ -235,6 +238,19 @@ export default function NoteCard({
     return res
   }
 
+  /**
+   *
+   */
+  async function onDeleteComment(commentID) {
+    // TODO(nickcastel50): handle response
+    const NO_CONTENT = 204
+    const res = await deleteComment(repository, commentID, accessToken)
+
+    if (res.status === NO_CONTENT) {
+      signalCommentMutated()
+    }
+  }
+
 
   /**
    * Delete comment from repo and remove from UI
@@ -256,19 +272,32 @@ export default function NoteCard({
 
 
   /** Update issue on GH, set read-only */
-  async function submitUpdate() {
+  async function submitNoteUpdate() {
     const res = await updateIssue(repository, noteNumber, title, editBody, accessToken)
     const editedNote = notes.find((note) => note.id === id)
     editedNote.body = res.data.body
     setNotes(notes)
     setEditMode(false)
     setEditModeGlobal(id, false)
+    signalCommentMutated()
+  }
+
+   /**
+    * Update comment in github
+    *
+    * @param {number} commentId
+    */
+   async function submitCommentUpdate(commentId) {
+    // eslint-disable-next-line no-unused-vars
+    const updatedComment = await updateComment(repository, commentId, editBody, accessToken)
+    setEditMode(false)
+    setEditModeGlobal(commentId, false)
+    signalCommentMutated()
   }
 
 
   return (
     <Card elevation={1} data-testid='note-card' ref={noteCardRef}>
-      {isNote ?
        <CardHeader
          title={title}
          avatar={<Avatar alt={username} src={avatarUrl}/>}
@@ -284,19 +313,15 @@ export default function NoteCard({
                 setEditOriginalBody(id, body)
                 setEditBodyGlobal(id, body) // Update global editBody state
               }}
-               onDeleteClick={() => onDeleteClick(noteNumber)}
+               onDeleteClick={() => isNote ? onDeleteNote(noteNumber) : onDeleteComment(id)}
                noteNumber={noteNumber}
              />
          }
-       /> :
-       <CardHeader
-         avatar={<Avatar alt={username} src={avatarUrl}/>}
-         subheader={`${username}\n${dateParts[0]} ${dateParts[1]}`}
-       />}
+       />
       {isNote && !editMode && !selected &&
        <NoteBody selectCard={selectCard} markdownContent={editBody} issueID={id} commentID={null}/>}
       {selected && !editMode && <NoteContent markdownContent={editBody}/>}
-      {!isNote && <NoteContent markdownContent={editBody} issueID={selectedNoteId} commentID={id}/>}
+      {!isNote && !editMode && <NoteContent markdownContent={editBody} issueID={selectedNoteId} commentID={id}/>}
       {editMode &&
        <NoteBodyEdit
          handleTextUpdate={(event) => handleEditBodyChange(event.target.value)}
@@ -319,7 +344,8 @@ export default function NoteCard({
         onClickShare={isNote ? shareIssue : shareComment}
         selectCard={selectCard}
         selected={selected}
-        submitUpdate={submitUpdate}
+        submitNoteUpdate={submitNoteUpdate}
+        submitCommentUpdate={submitCommentUpdate}
         synched={synched}
         username={username}
       />

diff --git a/src/Components/Notes/NoteContent.jsx b/src/Components/Notes/NoteContent.jsx
@@ -14,6 +14,7 @@ import {HASH_PREFIX_NOTES, HASH_PREFIX_COMMENT} from './hashState'
  */
 export default function NoteContent({markdownContent, issueID, commentID}) {
   const setSelectedPlaceMarkInNoteIdData = useStore((state) => state.setSelectedPlaceMarkInNoteIdData)
+  const setSelectedPlaceMarkId = useStore((state) => state.setSelectedPlaceMarkId)
 
   // eslint-disable-next-line no-unused-vars
   const {selectedPlaceMarkInNoteId, cameraHash, forceMarkerNoteSync} = useStore((state) => ({
@@ -62,6 +63,7 @@ export default function NoteContent({markdownContent, issueID, commentID}) {
         if (params) {
           const cameraHash_ = getHashParamsFromHashStr(url.hash, HASH_PREFIX_CAMERA)
           setSelectedPlaceMarkInNoteIdData(params[0], cameraHash_, !forceMarkerNoteSync)
+          setSelectedPlaceMarkId(Number(params[0]))
           event.preventDefault() // Prevent the default navigation
         }
       } else if (noteHash) {
@@ -70,6 +72,7 @@ export default function NoteContent({markdownContent, issueID, commentID}) {
           if (params) {
             const cameraHash_ = getHashParamsFromHashStr(url.hash, HASH_PREFIX_CAMERA)
             setSelectedPlaceMarkInNoteIdData(params[0], cameraHash_, !forceMarkerNoteSync)
+            setSelectedPlaceMarkId(Number(params[0]))
             event.preventDefault() // Prevent the default navigation
         }
       }

diff --git a/src/Components/Notes/NoteFooter.jsx b/src/Components/Notes/NoteFooter.jsx
@@ -37,7 +37,8 @@ export default function NoteFooter({
   selectCard,
   selected,
   showCreateComment,
-  submitUpdate,
+  submitNoteUpdate,
+  submitCommentUpdate,
   synched,
   username,
 }) {
@@ -54,6 +55,7 @@ export default function NoteFooter({
   const placeMarkActivated = useStore((state) => state.placeMarkActivated)
   const markers = useStore((state) => state.markers)
   const {togglePlaceMarkActive} = placemarkHandlers()
+  const selectedPlaceMarkId = useStore((state) => state.selectedPlaceMarkId)
 
   const [shareIssue, setShareIssue] = useState(false)
   const [screenshotUri, setScreenshotUri] = useState(null)
@@ -71,8 +73,31 @@ export default function NoteFooter({
       '_blank')
   }
 
-  const marker = markers.find((m) => m.id === id)
-  const hasActiveMarker = marker ? marker.isActive : false // Check isActive only if the marker is found
+  /** Navigate to github comment */
+  function openGithubComment() {
+    window.open(
+      `https://github.com/${repository.orgName}/${repository.name}/issues/${noteNumber}#issuecomment-${id}`,
+      '_blank')
+  }
+
+  let marker = null
+  marker = markers.find((m) => m.id === id)
+
+  if (!marker) {
+    // check comment IDs
+    marker = markers.find((m) => m.commentId === id)
+  }
+
+  let hasActiveMarker = false
+
+  if (marker) {
+    if (marker.commentId !== null) {
+      hasActiveMarker = marker ? marker.commentId === selectedPlaceMarkId : false
+    } else {
+      hasActiveMarker = marker ? marker.id === selectedPlaceMarkId : false
+    }
+  }
+
 
   return (
     <CardActions>
@@ -100,7 +125,7 @@ export default function NoteFooter({
            </Box>
           }
 
-          {isNote && selected && synched &&
+          {((isNote && selected) || !isNote) && synched &&
            user && user.nickname === username &&
            <Box
              sx={{
@@ -155,7 +180,7 @@ export default function NoteFooter({
                 title='Save'
                 placement='left'
                 icon={<CheckIcon className='icon-share'/>}
-                onClick={() => submitUpdate(repository, accessToken, id)}
+                onClick={() => isNote ? submitNoteUpdate(id) : submitCommentUpdate(id)}
               />
               <TooltipIconButton
                 title='Cancel'
@@ -196,15 +221,13 @@ export default function NoteFooter({
           }
         </Stack>
         <Stack direction='row'>
-          {isNote &&
            <TooltipIconButton
              title='Open in Github'
              size='small'
              placement='bottom'
-             onClick={openGithubIssue}
+             onClick={isNote ? openGithubIssue : openGithubComment}
              icon={<GitHubIcon className='icon-share'/>}
            />
-          }
 
           {selected &&
            <TooltipIconButton

diff --git a/src/Components/Notes/Notes.jsx b/src/Components/Notes/Notes.jsx
@@ -31,6 +31,7 @@ export default function Notes() {
   const repository = useStore((state) => state.repository)
   const selectedNoteId = useStore((state) => state.selectedNoteId)
   const setComments = useStore((state) => state.setComments)
+  const commentMutatedSignal = useStore((state) => state.commentMutatedSignal)
 
   // Access markers and the necessary store functions
   const markers = useStore((state) => state.markers)
@@ -103,20 +104,23 @@ export default function Notes() {
 
         if (issueMarker) {
           issueMarker.isActive = !(hasActiveMarker)
+          if (issueMarker.isActive) {
+            setSelectedPlaceMarkId(issueMarker.id)
+          }
         }
         const allMarkers = issueMarker ? [issueMarker, ...commentMarkers] : commentMarkers
 
         // Update state with new comments and markers
         setComments(newComments)
         toggleSynchSidebar()
-        writeMarkers(allMarkers) // Assuming `setMarkers` is a function in your store or component state to update markers
+        writeMarkers(allMarkers)
       } catch (e) {
         debug().warn('failed to fetch comments: ', e)
         handleError(e)
       }
     })()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedNote])
+  }, [selectedNote, commentMutatedSignal])
 
 
   /**
@@ -158,7 +162,7 @@ export default function Notes() {
         if (activePlaceMarkHash && hash.startsWith(activePlaceMarkHash)) {
           activePlaceMarkHash = newHash
           isActive = true
-          setSelectedPlaceMarkId(selectedNoteId)
+          setSelectedPlaceMarkId(comment.id)
         }
 
         return {
@@ -258,6 +262,7 @@ export default function Notes() {
                username={comment.username}
                avatarUrl={comment.avatarUrl}
                synched={comment.synched}
+               noteNumber={selectedNote.number}
              />
            </ListItem>
          )

diff --git a/src/Components/Notes/NotesControl.jsx b/src/Components/Notes/NotesControl.jsx
@@ -38,6 +38,7 @@ export default function NotesControl() {
   let activePlaceMarkHash = getActivePlaceMarkHash()
   const inactiveColor = MARKER_COLOR_INACTIVE
   const activeColor = MARKER_COLOR_ACTIVE
+  const setSelectedPlaceMarkId = useStore((state) => state.setSelectedPlaceMarkId)
 
 
   // Fetch issues/notes
@@ -116,6 +117,8 @@ export default function NotesControl() {
           parseFloat(lastElement),
         ]
 
+        setSelectedPlaceMarkId('temporary')
+
         return {
           id: 'temporary',
           commentId: null,
@@ -160,6 +163,7 @@ export default function NotesControl() {
         if (activePlaceMarkHash && hash.startsWith(activePlaceMarkHash)) {
           activePlaceMarkHash = newHash
           isActive = true
+          setSelectedPlaceMarkId(issue.id)
         }
 
         return {

diff --git a/src/net/github/Comments.js b/src/net/github/Comments.js
@@ -1,5 +1,5 @@
 import {assertDefined} from '../../utils/assert'
-import {getGitHub, postGitHub, deleteGitHub} from './Http'
+import {getGitHub, postGitHub, deleteGitHub, patchGitHub} from './Http'
 
 
 /**
@@ -57,3 +57,20 @@ export async function deleteComment(repository, commentId, accessToken) {
   assertDefined(...arguments)
   return await deleteGitHub(repository, `issues/comments/{commentId}`, {commentId}, accessToken)
 }
+
+/**
+ * @param {object} repository - Repository object containing orgName and name.
+ * @param {number} commentId - ID of the comment to be updated.
+ * @param {string} body - New body of the comment.
+ * @param {string} accessToken - GitHub access token.
+ * @return {object} response from GitHub.
+ */
+export async function updateComment(repository, commentId, body, accessToken) {
+  assertDefined(...arguments)
+
+  const args = {
+    body,
+  }
+
+  return await patchGitHub(repository, `issues/comments/${commentId}`, args, accessToken)
+}
diff --git a/src/store/NotesSlice.js b/src/store/NotesSlice.js
@@ -24,6 +24,8 @@ export default function createNotesSlice(set, get) {
 
     comments: [],
     setComments: (comments) => set(() => ({comments: comments})),
+    commentMutatedSignal: false,
+    signalCommentMutated: () => set((state) => ({commentMutatedSignal: !state.commentMutatedSignal})),
 
     createdNotes: null,
     setCreatedNotes: (createdNotes) => set(() => ({createdNotes: createdNotes})),