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

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()
     }