From 2b927a793aec27ade8f21d7bb75193540a89f93e Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:30:17 +0200
Subject: [PATCH] Merge pull request #16217 from
 overleaf/ii-ide-page-prototype-review-panel-issues-3

[web] Review panel add comment, bulk accept/reject and track changes entries fix

GitOrigin-RevId: bbed28f69d5f882c4f29353daab9b2a6613fd654
---
 .../hooks/use-review-panel-state.ts           | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 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 a2a0bfbef0..22a205da0b 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
@@ -1186,13 +1186,17 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     }
 
     const editorTrackChangesChanged = async () => {
-      const entries = await updateEntries(currentDocumentId)
+      const tempEntries = cloneDeep(await updateEntries(currentDocumentId))
+
+      // `tempEntries` would be mutated
       dispatchReviewPanelEvent('recalculate-screen-positions', {
-        entries,
+        entries: tempEntries,
         updateType: 'trackedChangesChange',
       })
-      // Ensure that watchers, such as the React-based review panel component,
-      // are informed of the changes to entries
+
+      // The state should be updated after dispatching the 'recalculate-screen-positions'
+      // event as `tempEntries` will be mutated
+      setEntries(prev => ({ ...prev, [currentDocumentId]: tempEntries }))
       handleLayoutChange()
     }
 
@@ -1206,9 +1210,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       selection: boolean,
       updateType: UpdateType
     ) => {
-      let tempEntries = {
-        ...getDocEntries(currentDocumentId),
-      }
+      let tempEntries = cloneDeep(getDocEntries(currentDocumentId))
       // All selected changes will be added to this array.
       selectedEntryIds.current = []
       // Count of user-visible changes, i.e. an aggregated change will count as one.
@@ -1312,14 +1314,18 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
           tempNVisibleSelectedChanges++
         }
       }
-      setEntries(prev => ({ ...prev, [currentDocumentId]: tempEntries }))
-      setNVisibleSelectedChanges(tempNVisibleSelectedChanges)
+
+      // `tempEntries` would be mutated
       dispatchReviewPanelEvent('recalculate-screen-positions', {
         entries: tempEntries,
         updateType,
       })
-      // Ensure that watchers, such as the React-based review panel component,
-      // are informed of the changes to entries
+
+      // The state should be updated after dispatching the 'recalculate-screen-positions'
+      // event as `tempEntries` will be mutated
+      setEntries(prev => ({ ...prev, [currentDocumentId]: tempEntries }))
+      setNVisibleSelectedChanges(tempNVisibleSelectedChanges)
+
       handleLayoutChange()
     }