fix(frontend): type of revision-viewer.tsx

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-09-22 10:13:42 +02:00 committed by renovate[bot]
parent cf1232d5d2
commit b72411a021

View file

@ -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}