From e83963eefc7c43efcd95a2d425b13a0275f79227 Mon Sep 17 00:00:00 2001 From: Domagoj Kriskovic Date: Fri, 6 Dec 2024 12:44:18 +0100 Subject: [PATCH] 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 --- .../components/review-panel-overview.tsx | 20 +++---- .../context/ranges-context.tsx | 2 - .../hooks/use-project-ranges.ts | 52 +++++++++++++++++-- 3 files changed, 60 insertions(+), 14 deletions(-) diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx index 575419677d..5c83014b0d 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx +++ b/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() 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 && + ranges && ( + + ) ) })} diff --git a/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx b/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx index 2da4b34b76..ea0eb78a75 100644 --- a/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx +++ b/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[] comments: Change[] } @@ -73,7 +72,6 @@ const buildRanges = (currentDoc: DocumentContainer | null) => { ) : ranges.comments, docId: currentDoc.doc_id, - total: ranges.changes.length + ranges.comments.length, } } diff --git a/services/web/frontend/js/features/review-panel-new/hooks/use-project-ranges.ts b/services/web/frontend/js/features/review-panel-new/hooks/use-project-ranges.ts index b90d12b0bc..15101c06a0 100644 --- a/services/web/frontend/js/features/review-panel-new/hooks/use-project-ranges.ts +++ b/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() const [projectRanges, setProjectRanges] = useState>() 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 } }