Notes 100 - Comment Edit

cypress/e2e/notes-100/comment-edit.cy.js

@@ -0,0 +1,41 @@
+import '@percy/cypress'
+import {
+  homepageSetup,
+  returningUserVisitsHomepageWaitForModel,
+  auth0Login,
+} from '../../support/utils'
+
+/** {@link https://github.com/bldrs-ai/Share/issues/1186} */
+describe('Notes 100: Comment edit', () => {
+  beforeEach(homepageSetup)
+  context('Returning user visits homepage', () => {
+    beforeEach(returningUserVisitsHomepageWaitForModel)
+    context('Open Notes > First note --', () => {
+      beforeEach(() => {
+        cy.get('[data-testid="control-button-notes"]').click()
+        cy.get('[data-testid="list-notes"] :nth-child(1) > [data-testid="note-body"]').first().click()
+        auth0Login()
+      })
+      it('Edit button should be visible', () => {
+        cy.get(`[data-testid="list-notes"] > :nth-child(3)
+        > [data-testid="note-card"] > .MuiCardActions-root > .MuiBox-root > [data-testid="editComment"]`)
+        cy.percySnapshot()
+      })
+      it('Comment switches to edit mode', () => {
+        cy.get(`[data-testid="list-notes"] > :nth-child(3)
+        > [data-testid="note-card"] > .MuiCardActions-root > .MuiBox-root > [data-testid="editComment"]`).click()
+        cy.get('[data-testid="Save"]')
+        cy.percySnapshot()
+      })
+      it('Comment displays updated body', () => {
+        cy.get(`[data-testid="list-notes"] > :nth-child(3)
+        > [data-testid="note-card"] > .MuiCardActions-root > .MuiBox-root > [data-testid="editComment"]`).click()
+        cy.get('[placeholder="Note body"]').click().type('updated body')
+        cy.get('[data-testid="Save"]').click()
+        // eslint-disable-next-line cypress/no-unnecessary-waiting, no-magic-numbers
+        cy.wait(1000)
+        cy.percySnapshot()
+      })
+    })
+  })
+})

src/Components/Notes/NoteBodyEdit.jsx

@@ -21,6 +21,7 @@ export default function EditCardBody({handleTextUpdate, value = ''}) {
         alignItems="flex-end"
       >
         <InputBase
+          variant='edit'
           value={value}
           onChange={handleTextUpdate}
           fullWidth

src/Components/Notes/NoteCard.jsx

@@ -9,6 +9,7 @@ import {
   updateIssue,
   // TODO(pablo): deleteComment as deleteCommentGitHub,
 } from '../../net/github/Issues'
+import {updateComment} from '../../net/github/Comments'
 import useStore from '../../store/useStore'
 import {assertDefined} from '../../utils/assert'
 import {getHashParamsFromHashStr, setHashParams} from '../../utils/location'
@@ -71,7 +72,6 @@ export default function NoteCard({
   const setSnackMessage = useStore((state) => state.setSnackMessage)
   const [showCreateComment, setShowCreateComment] = useState(false)
 
-
   const [editMode, setEditMode] = useState(false)
   const [editBody, setEditBody] = useState(body)
 
@@ -96,14 +96,12 @@ export default function NoteCard({
     setEditBody(body)
   }, [selectedNoteId, body])
 
-
   useEffect(() => {
     if (selected && firstCamera) {
       setCameraFromParams(firstCamera, cameraControls)
     }
   }, [selected, firstCamera, cameraControls])
 
-
   /** Selecting a card move the notes to the replies/comments thread. */
   function selectCard() {
     let selectedNote = null
@@ -119,7 +117,6 @@ export default function NoteCard({
     setHashParams(window.location, HASH_PREFIX_NOTES, {id: id})
   }
 
-
   /** Moves the camera to the position specified in the url attached to the issue/comment */
   function showCameraView() {
     setCameraFromParams(firstCamera, cameraControls)
@@ -135,7 +132,6 @@ export default function NoteCard({
     setSnackMessage({text: 'The url path is copied to the clipboard', autoDismiss: true})
   }
 
-
   /**
    * Closes the issue.  TODO(pablo): this isn't a delete
    *
@@ -150,7 +146,6 @@ export default function NoteCard({
     return res
   }
 
-
   /**
    * Delete comment from repo and remove from UI
    *
@@ -169,16 +164,25 @@ export default function NoteCard({
     setComments(newComments)
   } */
 
-
   /** Update issue on GH, set read-only */
-  async function submitUpdate() {
+  async function updateIssueGithub() {
     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)
   }
 
+  /**
+   * Update comment in github
+   *
+   * @param {number} commentId
+   */
+    async function updateCommentGithub(commentId) {
+      await updateComment(repository, commentId, editBody, accessToken)
+      setEditMode(false)
+    }
+
 
   return (
     <Card elevation={1} data-testid='note-card'>
@@ -203,7 +207,7 @@ export default function NoteCard({
       {isNote && !editMode && !selected &&
        <NoteBody selectCard={selectCard} markdownContent={editBody}/>}
       {selected && !editMode && <NoteContent markdownContent={editBody}/>}
-      {!isNote && <NoteContent markdownContent={editBody}/>}
+      {!isNote && !editMode && <NoteContent markdownContent={editBody}/>}
       {editMode &&
        <NoteBodyEdit
          handleTextUpdate={(event) => setEditBody(event.target.value)}
@@ -226,8 +230,9 @@ export default function NoteCard({
         onClickShare={shareIssue}
         selectCard={selectCard}
         selected={selected}
-        submitUpdate={submitUpdate}
-        synched={synched}
+        setEditMode={setEditMode}
+        submitNoteUpdate={updateIssueGithub}
+        submitCommentUpdate={updateCommentGithub}
         username={username}
       />
     </Card>

src/Components/Notes/NoteCardCreate.jsx

@@ -160,9 +160,9 @@ export default function NoteCardCreate({
           justifyContent='flex-end'
           alignContent='flex-end'
           direction='row'
-          sx={{width: '100%'}}
+          sx={{width: '100%', padding: '0 0.5em'}}
         >
-          {isNote ?
+        {isNote ?
           <TooltipIconButton
             title='Submit'
             onClick={createNote}