mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
2304536844
* Tidy up review panel components * Add ReviewPanel providers * [web] new design for review panel track change (#19544) * [web] new design for review panel track change * fixed mini view * mini icon style change * fix icon size * format date * useRangesUserContext hook * remove useRangesUserContext hook * using full class names * fix action icons hover * change wording for tooltips * added ReviewPanelChangeUser component * Update header in new review panel * Extract ReviewPanelTrackChangesMenuButton as a separate component * Remove wrapper div * Replace h2 with div for review panel label * Rename ReviewPanelTools to ReviewPanelHeader * Rename trackChangesExpanded -> trackChangesMenuExpanded * Dont break memoisation of ReviewPanelTrackChangesMenuButton * Fix the width of the track changes arrow icon * Update how prop types are declared * Remove new empty state from old review panel * Add empty state to new review panel * Add project members and owner to ChangesUsers context (#19624) --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Redesign comment entry in review panel (#19678) * Redesign comment entry in review panel * ReviewPanelCommentOptions component * remove unused prop * Tidying * Add conditional import * Optional changeManager * Add more split test compatibility * More split test compatibility * Fixes * Improve overview scrolling * Fix overview scrolling * Fix & simplify track changes toggle * Fix overview scrolling * Fix current file container * ExpandableContent component for messages in review panel (#19738) * ExpandableContent component for messages in review panel * remove isExpanded dependancy * Delete comment option for new review panel (#19772) * Delete comment option for new review panel * dont show thread warning if there are no replies * fix hasReplies issue * Implement initial collapsing overview files * Fix positioning of overview panel * Small styling changes * Add count of unresolved comments and tracked chanegs * More style adjustments * Move review-panel-overview styles into css file * Remove unused var --------- Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> Co-authored-by: David Powell <david.powell@overleaf.com> Co-authored-by: David <33458145+davidmcpowell@users.noreply.github.com> GitOrigin-RevId: e67463443d541f88445a86eed5e2b6ec6040f9c7
99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import { FC, useEffect, useMemo, useState } from 'react'
|
|
import { useFileTreeData } from '@/shared/context/file-tree-data-context'
|
|
import { Ranges, useRangesContext } from '../context/ranges-context'
|
|
import { getJSON } from '@/infrastructure/fetch-json'
|
|
import { useProjectContext } from '@/shared/context/project-context'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { ReviewPanelOverviewFile } from './review-panel-overview-file'
|
|
import ReviewPanelEmptyState from './review-panel-empty-state'
|
|
|
|
export const ReviewPanelOverview: FC = () => {
|
|
const { t } = useTranslation()
|
|
const { _id: projectId } = useProjectContext()
|
|
const { docs } = useFileTreeData()
|
|
const [error, setError] = useState<Error>()
|
|
const [projectRanges, setProjectRanges] = useState<Map<string, Ranges>>()
|
|
const docRanges = useRangesContext()
|
|
|
|
useEffect(() => {
|
|
getJSON<{ id: string; ranges: Ranges }[]>(`/project/${projectId}/ranges`)
|
|
.then(data =>
|
|
setProjectRanges(
|
|
new Map(
|
|
data.map(item => [
|
|
item.id,
|
|
{
|
|
docId: item.id,
|
|
changes: item.ranges.changes ?? [],
|
|
comments: item.ranges.comments ?? [],
|
|
total: 0, // TODO
|
|
},
|
|
])
|
|
)
|
|
)
|
|
)
|
|
.catch(error => setError(error))
|
|
}, [projectId])
|
|
|
|
const rangesForDocs = useMemo(() => {
|
|
if (docs && docRanges && 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)
|
|
|
|
if (ranges) {
|
|
rangesForDocs.set(doc.doc.id, ranges)
|
|
}
|
|
}
|
|
|
|
return rangesForDocs
|
|
}
|
|
}, [docRanges, docs, projectRanges])
|
|
|
|
const showEmptyState = useMemo((): boolean => {
|
|
if (!rangesForDocs) {
|
|
// data isn't loaded yet
|
|
return false
|
|
}
|
|
|
|
for (const ranges of rangesForDocs.values()) {
|
|
if (ranges.changes.length > 0 || ranges.comments.length > 0) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
return true
|
|
}, [rangesForDocs])
|
|
|
|
return (
|
|
<div className="review-panel-overview">
|
|
{error && <div>{t('something_went_wrong')}</div>}
|
|
|
|
{showEmptyState && <ReviewPanelEmptyState />}
|
|
|
|
{docs && rangesForDocs && (
|
|
<div>
|
|
{docs.map(doc => {
|
|
const ranges = rangesForDocs.get(doc.doc.id)
|
|
return (
|
|
ranges && (
|
|
<>
|
|
<ReviewPanelOverviewFile
|
|
key={doc.doc.id}
|
|
doc={doc}
|
|
ranges={ranges}
|
|
/>
|
|
<div className="review-panel-overfile-divider" />
|
|
</>
|
|
)
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|