Update review entries in overview panel on collaborator changes (#22098)

* remove unused "total" property

* add missing key

* added socket listeners

* remove accept-changes listener

* not using ranges context in overview

* fix lint error

* added comment

* add accept-changes listener

* rename to removeThreadHandler

* simplify docRanges useEffect

* refactor removeThreadHandler

* refactor accept-changes handler

* delete unnecessery event handlers

* remove edit-message listener

GitOrigin-RevId: e2d837efe889170dc055df69eae6b4e8f86cb5fc

services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
-import { Ranges, useRangesContext } from '../context/ranges-context'
+import { Ranges } from '../context/ranges-context'
 import { useTranslation } from 'react-i18next'
 import { ReviewPanelOverviewFile } from './review-panel-overview-file'
 import ReviewPanelEmptyState from './review-panel-empty-state'
@@ -9,19 +9,15 @@ import useProjectRanges from '../hooks/use-project-ranges'
 export const ReviewPanelOverview: FC = () => {
   const { t } = useTranslation()
   const { docs } = useFileTreeData()
-  const docRanges = useRangesContext()
 
   const { projectRanges, error } = useProjectRanges()
 
   const rangesForDocs = useMemo(() => {
-    if (docs && docRanges && projectRanges) {
+    if (docs && projectRanges) {
       const rangesForDocs = new Map<string, Ranges>()
 
       for (const doc of docs) {
-        const ranges =
-          doc.doc.id === docRanges.docId
-            ? docRanges
-            : projectRanges.get(doc.doc.id)
+        const ranges = projectRanges.get(doc.doc.id)
 
         if (ranges) {
           rangesForDocs.set(doc.doc.id, ranges)
@@ -30,7 +26,7 @@ export const ReviewPanelOverview: FC = () => {
 
       return rangesForDocs
     }
-  }, [docRanges, docs, projectRanges])
+  }, [docs, projectRanges])
 
   const showEmptyState = useMemo((): boolean => {
     if (!rangesForDocs) {
@@ -58,7 +54,13 @@ export const ReviewPanelOverview: FC = () => {
           {docs.map(doc => {
             const ranges = rangesForDocs.get(doc.doc.id)
             return (
-              ranges && <ReviewPanelOverviewFile doc={doc} ranges={ranges} />
+              ranges && (
+                <ReviewPanelOverviewFile
+                  key={doc.doc.id}
+                  doc={doc}
+                  ranges={ranges}
+                />
+              )
             )
           })}
         </div>

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

@@ -24,7 +24,6 @@ import useSocketListener from '@/features/ide-react/hooks/use-socket-listener'
 
 export type Ranges = {
   docId: string
-  total: number
   changes: Change<EditOperation>[]
   comments: Change<CommentOperation>[]
 }
@@ -73,7 +72,6 @@ const buildRanges = (currentDoc: DocumentContainer | null) => {
           )
         : ranges.comments,
     docId: currentDoc.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,17 @@
-import { useEffect, useState } from 'react'
-import { Ranges } from '../context/ranges-context'
+import { useCallback, useEffect, useState } from 'react'
+import { Ranges, useRangesContext } 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 docRanges = useRangesContext()
+  const { socket } = useConnectionContext()
 
   useEffect(() => {
     setLoading(true)
@@ -21,7 +25,6 @@ export default function useProjectRanges() {
                 docId: item.id,
                 changes: item.ranges.changes ?? [],
                 comments: item.ranges.comments ?? [],
-                total: 0, // TODO
               },
             ])
           )
@@ -31,5 +34,48 @@ export default function useProjectRanges() {
       .finally(() => setLoading(false))
   }, [projectId])
 
+  useEffect(() => {
+    if (!docRanges?.docId) {
+      return
+    }
+
+    setProjectRanges(prevProjectRanges => {
+      if (!prevProjectRanges) {
+        return prevProjectRanges
+      }
+
+      const updatedProjectRanges = new Map(prevProjectRanges)
+      updatedProjectRanges.set(docRanges.docId, docRanges)
+      return updatedProjectRanges
+    })
+  }, [docRanges])
+
+  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 }
 }