From a6c80ac1f0fea96026c3f4db68a99e03e75ec866 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Sat, 6 Mar 2021 15:06:54 +0100
Subject: [PATCH] Extract code into hook

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 src/components/editor-page/editor-page.tsx    | 19 ++++-----------
 .../editor-page/hooks/useEditorModeFromUrl.ts | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 src/components/editor-page/hooks/useEditorModeFromUrl.ts

diff --git a/src/components/editor-page/editor-page.tsx b/src/components/editor-page/editor-page.tsx
index d1857004c..9f0e8cbf1 100644
--- a/src/components/editor-page/editor-page.tsx
+++ b/src/components/editor-page/editor-page.tsx
@@ -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 }
diff --git a/src/components/editor-page/hooks/useEditorModeFromUrl.ts b/src/components/editor-page/hooks/useEditorModeFromUrl.ts
new file mode 100644
index 000000000..40a92cca9
--- /dev/null
+++ b/src/components/editor-page/hooks/useEditorModeFromUrl.ts
@@ -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])
+}