mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-28 14:04:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add note loading boundary (#2040)

Browse source 
* Remove redundant equal value

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add NoteLoadingBoundary to fetch note from API before rendering

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Improve debug message for setHandler

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add test for boundary

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Use common error page for note loading errors

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Fix tests

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Format code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add missing snapshot

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Reformat code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-05-11 12:47:58 +02:00 • committed by GitHub
parent 0419113d36
commit 880e542351
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 282 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/editor-page/editor-page-content.tsx
View file

@ -9,12 +9,8 @@ import { useTranslation } from 'react-i18next'
import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { setCheckboxInMarkdownContent, updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
import { MotdModal } from '../common/motd-modal/motd-modal'
import { ShowIf } from '../common/show-if/show-if'
import { ErrorWhileLoadingNoteAlert } from '../document-read-only-page/ErrorWhileLoadingNoteAlert'
import { LoadingNoteAlert } from '../document-read-only-page/LoadingNoteAlert'
import { AppBar, AppBarMode } from './app-bar/app-bar'
import { EditorMode } from './app-bar/editor-view-mode'
import { useLoadNoteFromServer } from './hooks/useLoadNoteFromServer'
import { useViewModeShortcuts } from './hooks/useViewModeShortcuts'
import { Sidebar } from './sidebar/sidebar'
import { Splitter } from './splitter/splitter'
@ -31,10 +27,6 @@ import { NoteAndAppTitleHead } from '../layout/note-and-app-title-head'
import equal from 'fast-deep-equal'
import { EditorPane } from './editor-pane/editor-pane'
export interface EditorPagePathParams {
id: string
}
export enum ScrollSource {
EDITOR = 'editor',
RENDERER = 'renderer'
@ -94,9 +86,7 @@ export const EditorPageContent: React.FC = () => {
useApplyDarkMode()
useEditorModeFromUrl()
const [error, loading] = useLoadNoteFromServer()
useUpdateLocalHistoryEntry(!error && !loading)
useUpdateLocalHistoryEntry()
const setRendererToScrollSource = useCallback(() => {
if (scrollSource.current !== ScrollSource.RENDERER) {
@ -146,22 +136,16 @@ export const EditorPageContent: React.FC = () => {
<MotdModal />
<div className={'d-flex flex-column vh-100'}>
<AppBar mode={AppBarMode.EDITOR} />
<div className={'container'}>
<ErrorWhileLoadingNoteAlert show={error} />
<LoadingNoteAlert show={loading} />
<div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
left={leftPane}
showRight={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}
right={rightPane}
additionalContainerClassName={'overflow-hidden'}
/>
<Sidebar />
</div>
<ShowIf condition={!error && !loading}>
<div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
left={leftPane}
showRight={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}
right={rightPane}
additionalContainerClassName={'overflow-hidden'}
/>
<Sidebar />
</div>
</ShowIf>
</div>
</Fragment>
)

36
src/components/editor-page/hooks/useLoadNoteFromServer.ts
View file

@ -1,36 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { getNote } from '../../../api/notes'
import { setNoteDataFromServer } from '../../../redux/note-details/methods'
import { Logger } from '../../../utils/logger'
import { useRouter } from 'next/router'
import { useAsync } from 'react-use'
const log = new Logger('Load Note From Server')
export const useLoadNoteFromServer = (): [boolean, boolean] => {
const { query } = useRouter()
const { loading, error } = useAsync(() => {
const rawId = query.id
if (rawId === undefined) {
return Promise.reject('invalid id')
}
const id = typeof rawId === 'string' ? rawId : rawId[0]
return getNote(id)
.then((note) => {
setNoteDataFromServer(note)
})
.catch((error: Error) => {
log.error('Error while fetching note from server', error)
return Promise.reject(error)
})
}, [query])
return [error !== undefined, loading]
}

6
src/components/editor-page/hooks/useUpdateLocalHistoryEntry.ts
View file

@ -12,7 +12,7 @@ import { useApplicationState } from '../../../hooks/common/use-application-state
import type { HistoryEntryWithOrigin } from '../../../api/history/types'
import { HistoryEntryOrigin } from '../../../api/history/types'
export const useUpdateLocalHistoryEntry = (updateReady: boolean): void => {
export const useUpdateLocalHistoryEntry = (): void => {
const id = useApplicationState((state) => state.noteDetails.id)
const userExists = useApplicationState((state) => !!state.user)
const currentNoteTitle = useApplicationState((state) => state.noteDetails.title)
@ -22,7 +22,7 @@ export const useUpdateLocalHistoryEntry = (updateReady: boolean): void => {
const lastNoteTags = useRef<string[]>([])
useEffect(() => {
if (!updateReady || userExists) {
if (userExists) {
return
}
if (currentNoteTitle === lastNoteTitle.current && equal(currentNoteTags, lastNoteTags.current)) {
@ -46,5 +46,5 @@ export const useUpdateLocalHistoryEntry = (updateReady: boolean): void => {
updateLocalHistoryEntry(id, entry)
lastNoteTitle.current = currentNoteTitle
lastNoteTags.current = currentNoteTags
}, [updateReady, id, userExists, currentNoteTitle, currentNoteTags])
}, [id, userExists, currentNoteTitle, currentNoteTags])
}