Update projectRanges on "accept-changes" (#23984)

GitOrigin-RevId: f06dd126e3948df41f71a189d97f8d3ad6928a43

services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx

@@ -25,7 +25,6 @@ import { useEditorManagerContext } from '@/features/ide-react/context/editor-man
 
 export type Ranges = {
   docId: string
-  total: number
   changes: Change<EditOperation>[]
   comments: Change<CommentOperation>[]
 }
@@ -74,7 +73,6 @@ const buildRanges = (currentDocument: DocumentContainer | null) => {
           )
         : ranges.comments,
     docId: currentDocument.doc_id,
-    total: ranges.changes.length + ranges.comments.length,
   }
 }
 

services/web/frontend/js/features/review-panel-new/hooks/use-project-ranges.ts

@@ -1,13 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Ranges } from '../context/ranges-context'
 import { useProjectContext } from '@/shared/context/project-context'
 import { getJSON } from '@/infrastructure/fetch-json'
+import useSocketListener from '@/features/ide-react/hooks/use-socket-listener'
+import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 
 export default function useProjectRanges() {
   const { _id: projectId } = useProjectContext()
   const [error, setError] = useState<Error>()
   const [projectRanges, setProjectRanges] = useState<Map<string, Ranges>>()
   const [loading, setLoading] = useState(true)
+  const { socket } = useConnectionContext()
 
   useEffect(() => {
     setLoading(true)
@@ -21,7 +24,6 @@ export default function useProjectRanges() {
                 docId: item.id,
                 changes: item.ranges.changes ?? [],
                 comments: item.ranges.comments ?? [],
-                total: 0, // TODO
               },
             ])
           )
@@ -31,5 +33,32 @@ export default function useProjectRanges() {
       .finally(() => setLoading(false))
   }, [projectId])
 
+  useSocketListener(
+    socket,
+    'accept-changes',
+    useCallback((docId: string, entryIds: string[]) => {
+      setProjectRanges(prevProjectRanges => {
+        if (!prevProjectRanges) {
+          return prevProjectRanges
+        }
+
+        const ranges = prevProjectRanges.get(docId)
+        if (!ranges) {
+          return prevProjectRanges
+        }
+        const updatedProjectRanges = new Map(prevProjectRanges)
+
+        updatedProjectRanges.set(docId, {
+          ...ranges,
+          changes: ranges.changes.filter(
+            change => !entryIds.includes(change.id)
+          ),
+        })
+
+        return updatedProjectRanges
+      })
+    }, [])
+  )
+
   return { projectRanges, error, loading }
 }