From 8ec2b2b42d090e2e51665a698193b5b9438ac6fe Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 29 Nov 2023 15:42:58 +0200
Subject: [PATCH] Merge pull request #15965 from
 overleaf/ii-ide-page-prototype-review-panel-delete-comment

[web] React ide page delete comment

GitOrigin-RevId: e9ab2afeb7e0053481ccaf3655f8f700707a24f1
---
 .../hooks/use-review-panel-state.ts           | 25 +++++++++++++++++--
 .../review-panel-context-adapter.ts           |  1 -
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
index 60e7dc146d..5ecc780d11 100644
--- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
+++ b/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']>(
     () => ({
diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts
index c426d2772b..656de52409 100644
--- a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts
+++ b/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', () => {})