From 5e491cc0c0d4531afffc60396324321b54a94231 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 31 Jan 2025 10:03:59 +0000
Subject: [PATCH] Use thread id in removeNewCommentRangeEffect (#23205)

GitOrigin-RevId: 6082f5e6d6f548eff43da657526097118a2d3c11
---
 .../components/review-panel-add-comment.tsx     | 17 ++++++++---------
 .../components/review-panel-current-file.tsx    |  8 ++++----
 .../source-editor/extensions/review-tooltip.ts  |  9 ++++-----
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx
index b7ac4b5fa6..ba783f3ada 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx
@@ -1,4 +1,4 @@
-import { FC, FormEventHandler, useCallback, useState, useRef } from 'react'
+import { FormEventHandler, useCallback, useState, useRef, memo } from 'react'
 import {
   useCodeMirrorStateContext,
   useCodeMirrorViewContext,
@@ -11,18 +11,17 @@ import useSubmittableTextInput from '../hooks/use-submittable-text-input'
 import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
 import { ReviewPanelEntry } from './review-panel-entry'
 import { ThreadId } from '../../../../../types/review-panel/review-panel'
-import { Decoration } from '@codemirror/view'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { debugConsole } from '@/utils/debugging'
 import OLButton from '@/features/ui/components/ol/ol-button'
 
-export const ReviewPanelAddComment: FC<{
+export const ReviewPanelAddComment = memo<{
   docId: string
   from: number
   to: number
-  value: Decoration
+  threadId: string
   top: number | undefined
-}> = ({ from, to, value, top, docId }) => {
+}>(function ReviewPanelAddComment({ from, to, threadId, top, docId }) {
   const { t } = useTranslation()
   const view = useCodeMirrorViewContext()
   const state = useCodeMirrorStateContext()
@@ -32,9 +31,9 @@ export const ReviewPanelAddComment: FC<{
 
   const handleClose = useCallback(() => {
     view.dispatch({
-      effects: removeNewCommentRangeEffect.of(value),
+      effects: removeNewCommentRangeEffect.of(threadId),
     })
-  }, [view, value])
+  }, [view, threadId])
 
   const submitForm = useCallback(
     async message => {
@@ -127,7 +126,7 @@ export const ReviewPanelAddComment: FC<{
       op={{
         p: from,
         c: state.sliceDoc(from, to),
-        t: value.spec.id as ThreadId,
+        t: threadId as ThreadId,
       }}
       selectLineOnFocus={false}
       disabled={submitting}
@@ -169,4 +168,4 @@ export const ReviewPanelAddComment: FC<{
       </form>
     </ReviewPanelEntry>
   )
-}
+})
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
index d729c2c65d..18572b8d14 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
@@ -201,13 +201,13 @@ const ReviewPanelCurrentFile: FC = () => {
         continue
       }
 
-      const { from, to } = cursor
+      const { from, to, value } = cursor
 
       entries.push({
         id,
         from,
         to,
-        value: cursor.value,
+        threadId: value.spec.id,
         top: positions.get(id),
       })
 
@@ -297,14 +297,14 @@ const ReviewPanelCurrentFile: FC = () => {
 
       <div ref={handleContainer}>
         {addCommentEntries.map(entry => {
-          const { id, from, to, value, top } = entry
+          const { id, from, to, threadId, top } = entry
           return (
             <ReviewPanelAddComment
               docId={ranges!.docId}
               key={id}
               from={from}
               to={to}
-              value={value}
+              threadId={threadId}
               top={top}
             />
           )
diff --git a/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts b/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts
index f9e0f0bf36..fa478224cc 100644
--- a/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts
@@ -19,7 +19,7 @@ import { v4 as uuid } from 'uuid'
 
 export const addNewCommentRangeEffect = StateEffect.define<Range<Decoration>>()
 
-export const removeNewCommentRangeEffect = StateEffect.define<Decoration>()
+export const removeNewCommentRangeEffect = StateEffect.define<string>()
 
 export const textSelectedEffect = StateEffect.define<null>()
 
@@ -103,11 +103,10 @@ export const reviewTooltipStateField = StateField.define<{
 
     for (const effect of tr.effects) {
       if (effect.is(removeNewCommentRangeEffect)) {
-        const rangeToRemove = effect.value
+        const threadId = effect.value
         addCommentRanges = addCommentRanges.update({
-          // eslint-disable-next-line no-unused-vars
-          filter: (from, to, value) => {
-            return value.spec.id !== rangeToRemove.spec.id
+          filter: (_from, _to, value) => {
+            return value.spec.id !== threadId
           },
         })
       }