overleaf/services/web/frontend/js/features/review-panel-new/context/ranges-context.tsx
Alf Eaton 2304536844 Add review panel context providers and components (#19490)
* 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
2024-08-13 08:04:20 +00:00

141 lines
3.6 KiB
TypeScript

import {
createContext,
FC,
useContext,
useEffect,
useMemo,
useState,
} from 'react'
import useScopeValue from '@/shared/hooks/use-scope-value'
import { DocumentContainer } from '@/features/ide-react/editor/document-container'
import {
Change,
CommentOperation,
EditOperation,
} from '../../../../../types/change'
import RangesTracker from '@overleaf/ranges-tracker'
import { rejectChanges } from '@/features/source-editor/extensions/track-changes'
import { useCodeMirrorViewContext } from '@/features/source-editor/components/codemirror-editor'
export type Ranges = {
docId: string
total: number
changes: Change<EditOperation>[]
comments: Change<CommentOperation>[]
}
export const RangesContext = createContext<Ranges | undefined>(undefined)
type RangesActions = {
acceptChanges: (...ids: string[]) => void
rejectChanges: (...ids: string[]) => void
}
const buildRanges = (currentDoc: DocumentContainer | null) => {
if (currentDoc?.ranges) {
return {
...currentDoc.ranges,
docId: currentDoc.doc_id,
total:
currentDoc.ranges.changes.length + currentDoc.ranges.comments.length,
}
}
}
const RangesActionsContext = createContext<RangesActions | undefined>(undefined)
export const RangesProvider: FC = ({ children }) => {
const view = useCodeMirrorViewContext()
const [currentDoc] = useScopeValue<DocumentContainer | null>(
'editor.sharejs_doc'
)
const [ranges, setRanges] = useState<Ranges | undefined>(() =>
buildRanges(currentDoc)
)
// rebuild the ranges when the current doc changes
useEffect(() => {
setRanges(buildRanges(currentDoc))
}, [currentDoc])
useEffect(() => {
if (currentDoc) {
const listener = () => {
setRanges(buildRanges(currentDoc))
}
// currentDoc.on('ranges:clear.cm6', listener)
currentDoc.on('ranges:redraw.cm6', listener)
currentDoc.on('ranges:dirty.cm6', listener)
return () => {
// currentDoc.off('ranges:clear.cm6')
currentDoc.off('ranges:redraw.cm6')
currentDoc.off('ranges:dirty.cm6')
}
}
}, [currentDoc])
// TODO: move this into DocumentContainer?
useEffect(() => {
if (currentDoc) {
const regenerateTrackChangesId = (doc: DocumentContainer) => {
if (doc.ranges) {
const inflight = doc.ranges.getIdSeed()
const pending = RangesTracker.generateIdSeed()
doc.ranges.setIdSeed(pending)
doc.setTrackChangesIdSeeds({ pending, inflight })
}
}
currentDoc.on('flipped_pending_to_inflight', () =>
regenerateTrackChangesId(currentDoc)
)
regenerateTrackChangesId(currentDoc)
return () => {
currentDoc.off('flipped_pending_to_inflight')
}
}
}, [currentDoc])
const actions = useMemo(
() => ({
acceptChanges(...ids: string[]) {
if (currentDoc?.ranges) {
currentDoc.ranges.removeChangeIds(ids)
setRanges(buildRanges(currentDoc))
}
},
rejectChanges(...ids: string[]) {
if (currentDoc?.ranges) {
view.dispatch(rejectChanges(view.state, currentDoc.ranges, ids))
}
},
}),
[currentDoc, view]
)
return (
<RangesActionsContext.Provider value={actions}>
<RangesContext.Provider value={ranges}>{children}</RangesContext.Provider>
</RangesActionsContext.Provider>
)
}
export const useRangesContext = () => {
return useContext(RangesContext)
}
export const useRangesActionsContext = () => {
const context = useContext(RangesActionsContext)
if (!context) {
throw new Error(
'useRangesActionsContext is only available inside RangesProvider'
)
}
return context
}