github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-22 17:56:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

Extract code into hook

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-03-06 15:06:54 +01:00 committed by Tilman Vatteroth
parent 6876aaa856
commit a6c80ac1f0
2 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/editor-page/editor-page.tsx
View file

@ -4,15 +4,13 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
import React, { Fragment, useCallback, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { useLocation } from 'react-router'
import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
import { useNoteMarkdownContent } from '../../hooks/common/use-note-markdown-content'
import { ApplicationState } from '../../redux'
import { setEditorMode } from '../../redux/editor/methods'
import {
SetCheckboxInMarkdownContent,
setNoteFrontmatter,
@ -33,6 +31,7 @@ import { Sidebar } from './sidebar/sidebar'
import { Splitter } from './splitter/splitter'
import { DualScrollState, ScrollState } from './synced-scroll/scroll-props'
import { RendererType } from '../render-page/rendering-message'
import { useEditorModeFromUrl } from './hooks/useEditorModeFromUrl'
export interface EditorPagePathParams {
id: string
@ -45,7 +44,6 @@ export enum ScrollSource {
export const EditorPage: React.FC = () => {
useTranslation()
const { search } = useLocation()
const markdownContent = useNoteMarkdownContent()
const scrollSource = useRef<ScrollSource>(ScrollSource.EDITOR)
@ -57,15 +55,6 @@ export const EditorPage: React.FC = () => {
rendererScrollState: { firstLineInView: 1, scrolledPercentage: 0 }
}))
useEffect(() => {
const requestedMode = search.substr(1)
const mode = Object.values(EditorMode)
.find(mode => mode === requestedMode)
if (mode) {
setEditorMode(mode)
}
}, [search])
const onMarkdownRendererScroll = useCallback((newScrollState: ScrollState) => {
if (scrollSource.current === ScrollSource.RENDERER && editorSyncScroll) {
setScrollState((old) => ({ editorScrollState: newScrollState, rendererScrollState: old.rendererScrollState }))
@ -81,6 +70,8 @@ export const EditorPage: React.FC = () => {
useViewModeShortcuts()
useApplyDarkMode()
useDocumentTitleWithNoteTitle()
useEditorModeFromUrl()
const [error, loading] = useLoadNoteFromServer()
const setRendererToScrollSource = useCallback(() => {
@ -116,7 +107,7 @@ export const EditorPage: React.FC = () => {
showRight={ editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH }
right={
<RenderIframe
frameClasses={'h-100 w-100'}
frameClasses={ 'h-100 w-100' }
markdownContent={ markdownContent }
onMakeScrollSource={ setRendererToScrollSource }
onFirstHeadingChange={ updateNoteTitleByFirstHeading }

23
src/components/editor-page/hooks/useEditorModeFromUrl.ts Normal file
View file

@ -0,0 +1,23 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useEffect } from 'react'
import { EditorMode } from '../app-bar/editor-view-mode'
import { setEditorMode } from '../../../redux/editor/methods'
import { useLocation } from 'react-router'
export const useEditorModeFromUrl = (): void => {
const { search } = useLocation()
useEffect(() => {
const requestedMode = search.substr(1)
const mode = Object.values(EditorMode)
.find(mode => mode === requestedMode)
if (mode) {
setEditorMode(mode)
}
}, [search])
}