mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-22 09:46:30 -05:00
fix(frontend): type of revision-viewer.tsx
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
parent
cf1232d5d2
commit
b72411a021
1 changed files with 17 additions and 14 deletions
|
@ -8,9 +8,8 @@ import { useApplicationState } from '../../../../../../hooks/common/use-applicat
|
||||||
import { useDarkModeState } from '../../../../../../hooks/dark-mode/use-dark-mode-state'
|
import { useDarkModeState } from '../../../../../../hooks/dark-mode/use-dark-mode-state'
|
||||||
import { AsyncLoadingBoundary } from '../../../../../common/async-loading-boundary/async-loading-boundary'
|
import { AsyncLoadingBoundary } from '../../../../../common/async-loading-boundary/async-loading-boundary'
|
||||||
import { invertUnifiedPatch } from './invert-unified-patch'
|
import { invertUnifiedPatch } from './invert-unified-patch'
|
||||||
import { Optional } from '@mrdrogdrog/optional'
|
|
||||||
import { applyPatch, parsePatch } from 'diff'
|
import { applyPatch, parsePatch } from 'diff'
|
||||||
import React, { useMemo } from 'react'
|
import React, { Fragment, useMemo } from 'react'
|
||||||
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
|
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
|
||||||
import { useAsync } from 'react-use'
|
import { useAsync } from 'react-use'
|
||||||
|
|
||||||
|
@ -28,7 +27,11 @@ export const RevisionViewer: React.FC<RevisionViewerProps> = ({ selectedRevision
|
||||||
const noteId = useApplicationState((state) => state.noteDetails?.id)
|
const noteId = useApplicationState((state) => state.noteDetails?.id)
|
||||||
const darkModeEnabled = useDarkModeState()
|
const darkModeEnabled = useDarkModeState()
|
||||||
|
|
||||||
const { value, error, loading } = useAsync(async () => {
|
const {
|
||||||
|
value: revision,
|
||||||
|
error,
|
||||||
|
loading
|
||||||
|
} = useAsync(async () => {
|
||||||
if (noteId === undefined || selectedRevisionId === undefined) {
|
if (noteId === undefined || selectedRevisionId === undefined) {
|
||||||
throw new Error('No revision selected')
|
throw new Error('No revision selected')
|
||||||
} else {
|
} else {
|
||||||
|
@ -37,24 +40,24 @@ export const RevisionViewer: React.FC<RevisionViewerProps> = ({ selectedRevision
|
||||||
}, [selectedRevisionId, noteId])
|
}, [selectedRevisionId, noteId])
|
||||||
|
|
||||||
const previousRevisionContent = useMemo(() => {
|
const previousRevisionContent = useMemo(() => {
|
||||||
return Optional.ofNullable(value)
|
if (revision === undefined) {
|
||||||
.flatMap((revision) =>
|
return ''
|
||||||
Optional.ofNullable(parsePatch(revision.patch)[0])
|
}
|
||||||
.map((patch) => invertUnifiedPatch(patch))
|
const patch = parsePatch(revision.patch)[0]
|
||||||
.map((patch) => applyPatch(revision.content, patch))
|
const inversePatch = invertUnifiedPatch(patch)
|
||||||
)
|
const reverseContent = applyPatch(revision.content, inversePatch)
|
||||||
.orElse('')
|
return reverseContent === false ? '' : reverseContent
|
||||||
}, [value])
|
}, [revision])
|
||||||
|
|
||||||
if (selectedRevisionId === undefined) {
|
if (selectedRevisionId === undefined) {
|
||||||
return null
|
return <Fragment />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AsyncLoadingBoundary loading={loading || !value} componentName={'RevisionViewer'} error={error}>
|
<AsyncLoadingBoundary loading={loading || !revision} componentName={'RevisionViewer'} error={error}>
|
||||||
<ReactDiffViewer
|
<ReactDiffViewer
|
||||||
oldValue={previousRevisionContent ?? ''}
|
oldValue={previousRevisionContent ?? ''}
|
||||||
newValue={value?.content ?? ''}
|
newValue={revision?.content ?? ''}
|
||||||
splitView={false}
|
splitView={false}
|
||||||
compareMethod={DiffMethod.WORDS}
|
compareMethod={DiffMethod.WORDS}
|
||||||
useDarkTheme={darkModeEnabled}
|
useDarkTheme={darkModeEnabled}
|
||||||
|
|
Loading…
Reference in a new issue