overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx
David 037529f243 Merge pull request #20886 from overleaf/dp-overview-file-counts
Check that thread has messages in overview comment count

GitOrigin-RevId: 8499f837a016256c5ca615172b5c53a7f2e7c6b5
2024-10-14 11:05:53 +00:00

102 lines
3 KiB
TypeScript

import { FC, useMemo } from 'react'
import { MainDocument } from '../../../../../types/project-settings'
import { Ranges } from '../context/ranges-context'
import { ReviewPanelComment } from './review-panel-comment'
import { ReviewPanelChange } from './review-panel-change'
import { isDeleteChange, isInsertChange } from '@/utils/operations'
import {
Change,
DeleteOperation,
EditOperation,
} from '../../../../../types/change'
import { canAggregate } from '../utils/can-aggregate'
import { Button } from 'react-bootstrap'
import MaterialIcon from '@/shared/components/material-icon'
import useOverviewFileCollapsed from '../hooks/use-overview-file-collapsed'
import { useThreadsContext } from '../context/threads-context'
export const ReviewPanelOverviewFile: FC<{
doc: MainDocument
ranges: Ranges
}> = ({ doc, ranges }) => {
const { collapsed, toggleCollapsed } = useOverviewFileCollapsed(doc.doc.id)
const threads = useThreadsContext()
const { aggregates, changes } = useMemo(() => {
const changes: Change<EditOperation>[] = []
const aggregates: Map<string, Change<DeleteOperation>> = new Map()
let precedingChange: Change<EditOperation> | null = null
for (const change of ranges.changes) {
if (
precedingChange &&
isInsertChange(precedingChange) &&
isDeleteChange(change) &&
canAggregate(change, precedingChange)
) {
aggregates.set(precedingChange.id, change)
} else {
changes.push(change)
}
precedingChange = change
}
return { aggregates, changes }
}, [ranges])
const unresolvedComments = useMemo(() => {
return ranges.comments.filter(comment => {
const thread = threads?.[comment.op.t]
return thread && thread.messages.length > 0 && !thread.resolved
})
}, [ranges.comments, threads])
const numEntries = changes.length + unresolvedComments.length
if (numEntries === 0) {
return null
}
return (
<div>
<Button
bsClass="review-panel-overview-file-header"
bsStyle={null}
onClick={toggleCollapsed}
>
<MaterialIcon
type={collapsed ? 'keyboard_arrow_right' : 'keyboard_arrow_down'}
/>
{doc.doc.name}
<div className="review-panel-overview-file-entry-count">
{numEntries}
</div>
</Button>
{!collapsed && (
<div className="review-panel-overview-file-entries">
{changes.map(change => (
<ReviewPanelChange
key={change.id}
change={change}
aggregate={aggregates.get(change.id)}
editable={false}
docId={doc.doc.id}
hoverRanges={false}
/>
))}
{unresolvedComments.map(comment => (
<ReviewPanelComment
key={comment.id}
comment={comment}
docId={doc.doc.id}
hoverRanges={false}
/>
))}
</div>
)}
</div>
)
}