Merge pull request #15861 from overleaf/ii-ide-page-prototype-review-panel-delete-thread

[web] React ide page delete thread

GitOrigin-RevId: 46e93d67d597a2277c771bda2a4837a871339224

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

@@ -14,7 +14,7 @@ import { useConnectionContext } from '@/features/ide-react/context/connection-co
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { debugConsole } from '@/utils/debugging'
 import { useEditorContext } from '@/shared/context/editor-context'
-import { getJSON, postJSON } from '@/infrastructure/fetch-json'
+import { deleteJSON, getJSON, postJSON } from '@/infrastructure/fetch-json'
 import ColorManager from '@/ide/colors/ColorManager'
 // @ts-ignore
 import RangesTracker from '@overleaf/ranges-tracker'
@@ -869,8 +869,27 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     [onCommentReopened, projectId]
   )
 
-  const [deleteThread] =
-    useScopeValue<ReviewPanel.UpdaterFn<'deleteThread'>>('deleteThread')
+  const onThreadDeleted = useCallback((threadId: ThreadId) => {
+    setResolvedThreadIds(({ [threadId]: _, ...resolvedThreadIds }) => {
+      return resolvedThreadIds
+    })
+    setCommentThreads(({ [threadId]: _, ...commentThreads }) => {
+      return commentThreads
+    })
+    dispatchReviewPanelEvent('comment:remove', threadId)
+  }, [])
+
+  const deleteThread = useCallback(
+    (docId: DocId, threadId: ThreadId) => {
+      onThreadDeleted(threadId)
+      deleteJSON(`/project/${projectId}/doc/${docId}/thread/${threadId}`).catch(
+        debugConsole.error
+      )
+      sendMB('rp-comment-delete')
+    },
+    [onThreadDeleted, projectId]
+  )
+
   const [refreshResolvedCommentsDropdown] = useScopeValue<
     ReviewPanel.UpdaterFn<'refreshResolvedCommentsDropdown'>
   >('refreshResolvedCommentsDropdown')
@@ -962,6 +981,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
   ])
 
   useSocketListener(socket, 'reopen-thread', onCommentReopened)
+  useSocketListener(socket, 'delete-thread', onThreadDeleted)
 
   const values = useMemo<ReviewPanelStateReactIde['values']>(
     () => ({

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

@@ -18,7 +18,6 @@ export default function populateReviewPanelScope(store: ReactScopeValueStore) {
   store.set('deleteComment', () => {})
   store.set('gotoEntry', () => {})
   store.set('saveEdit', () => {})
-  store.set('deleteThread', () => {})
   store.set('refreshResolvedCommentsDropdown', async () => {})
   store.set('acceptChanges', () => {})
   store.set('rejectChanges', () => {})

services/web/frontend/js/features/source-editor/components/review-panel/entries/resolved-comment-entry.tsx

@@ -42,7 +42,7 @@ function ResolvedCommentEntry({
   }
 
   const handleDelete = () => {
-    deleteThread(undefined, thread.docId, thread.threadId)
+    deleteThread(thread.docId, thread.threadId)
   }
 
   return (

services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts

@@ -7,6 +7,7 @@ import {
   SubView,
   ThreadId,
 } from '../../../../../../../types/review-panel/review-panel'
+import { DocId } from '../../../../../../../types/project-settings'
 import { dispatchReviewPanelLayout as handleLayoutChange } from '../../../extensions/changes/change-manager'
 
 function useAngularReviewPanelState(): ReviewPanelState {
@@ -99,8 +100,21 @@ function useAngularReviewPanelState(): ReviewPanelState {
     )
   const [unresolveComment] =
     useScopeValue<ReviewPanel.UpdaterFn<'unresolveComment'>>('unresolveComment')
-  const [deleteThread] =
-    useScopeValue<ReviewPanel.UpdaterFn<'deleteThread'>>('deleteThread')
+
+  const [deleteThreadAngular] =
+    useScopeValue<
+      (
+        _: unknown,
+        ...args: [...Parameters<ReviewPanel.UpdaterFn<'deleteThread'>>]
+      ) => ReturnType<ReviewPanel.UpdaterFn<'deleteThread'>>
+    >('deleteThread')
+  const deleteThread = useCallback(
+    (docId: DocId, threadId: ThreadId) => {
+      deleteThreadAngular(undefined, docId, threadId)
+    },
+    [deleteThreadAngular]
+  )
+
   const [refreshResolvedCommentsDropdown] = useScopeValue<
     ReviewPanel.UpdaterFn<'refreshResolvedCommentsDropdown'>
   >('refreshResolvedCommentsDropdown')

services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts

@@ -71,7 +71,7 @@ export interface ReviewPanelState {
       content: string
     ) => void
     unresolveComment: (threadId: ThreadId) => void
-    deleteThread: (_entryId: unknown, docId: DocId, threadId: ThreadId) => void
+    deleteThread: (docId: DocId, threadId: ThreadId) => void
     refreshResolvedCommentsDropdown: () => Promise<void>
     submitNewComment: (content: string) => Promise<void>
     setEntryHover: React.Dispatch<React.SetStateAction<Value<'entryHover'>>>