Merge pull request #15965 from overleaf/ii-ide-page-prototype-review-panel-delete-comment

[web] React ide page delete comment

GitOrigin-RevId: e9ab2afeb7e0053481ccaf3655f8f700707a24f1

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -820,8 +820,6 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
 
   const [submitNewComment] =
     useScopeValue<ReviewPanel.UpdaterFn<'submitNewComment'>>('submitNewComment')
-  const [deleteComment] =
-    useScopeValue<ReviewPanel.UpdaterFn<'deleteComment'>>('deleteComment')
   const [gotoEntry] =
     useScopeValue<ReviewPanel.UpdaterFn<'gotoEntry'>>('gotoEntry')
   const [submitReplyAngular] =
@@ -959,6 +957,28 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     [projectId]
   )
 
+  const onCommentDeleted = useCallback(
+    (threadId: ThreadId, commentId: CommentId) => {
+      setCommentThreads(prevState => {
+        const thread = { ...getThread(threadId) }
+        thread.messages = thread.messages.filter(m => m.id !== commentId)
+        return { ...prevState, [threadId]: thread }
+      })
+    },
+    [getThread]
+  )
+
+  const deleteComment = useCallback(
+    (threadId: ThreadId, commentId: CommentId) => {
+      onCommentDeleted(threadId, commentId)
+      deleteJSON(
+        `/project/${projectId}/thread/${threadId}/messages/${commentId}`
+      ).catch(debugConsole.error)
+      handleLayoutChange({ async: true })
+    },
+    [onCommentDeleted, projectId]
+  )
+
   const refreshRanges = useCallback(() => {
     type Doc = {
       id: DocId
@@ -1091,6 +1111,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
   useSocketListener(socket, 'delete-thread', onThreadDeleted)
   useSocketListener(socket, 'resolve-thread', onCommentResolved)
   useSocketListener(socket, 'edit-message', onCommentEdited)
+  useSocketListener(socket, 'delete-message', onCommentDeleted)
 
   const values = useMemo<ReviewPanelStateReactIde['values']>(
     () => ({

services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts

@@ -7,7 +7,6 @@ export default function populateReviewPanelScope(store: ReactScopeValueStore) {
   store.set('reviewPanel.layoutToLeft', false)
   store.set('reviewPanel.rendererData.lineHeight', 0)
   store.set('submitNewComment', async () => {})
-  store.set('deleteComment', () => {})
   store.set('gotoEntry', () => {})
   store.set('acceptChanges', () => {})
   store.set('rejectChanges', () => {})