From c6d2aa76caf48fb5c5ba36f36f310f3734f15094 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <tilman.vatteroth@tu-dortmund.de>
Date: Wed, 28 Oct 2020 11:34:21 +0100
Subject: [PATCH] extract code into useFirstDraw hook (#689)

---
 src/components/editor/editor.tsx            | 14 +++++++-------
 src/components/editor/hooks/useFirstDraw.ts | 11 +++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/components/editor/hooks/useFirstDraw.ts

diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx
index 2737a126c..bc1150b3d 100644
--- a/src/components/editor/editor.tsx
+++ b/src/components/editor/editor.tsx
@@ -14,6 +14,7 @@ import { DocumentBar } from './document-bar/document-bar'
 import { ScrollingDocumentRenderPane } from './document-renderer-pane/scrolling-document-render-pane'
 import { EditorPane } from './editor-pane/editor-pane'
 import { editorTestContent } from './editorTestContent'
+import { useFirstDraw } from './hooks/useFirstDraw'
 import { DualScrollState, ScrollState } from './scroll/scroll-props'
 import { shortcutHandler } from './shortcut/shortcut'
 import { Splitter } from './splitter/splitter'
@@ -35,7 +36,6 @@ export const Editor: React.FC = () => {
   const untitledNote = t('editor.untitledNote')
   const [markdownContent, setMarkdownContent] = useState(editorTestContent)
   const isWide = useMedia({ minWidth: 576 })
-  const [firstDraw, setFirstDraw] = useState(true)
   const [documentTitle, setDocumentTitle] = useState(untitledNote)
   const noteMetadata = useRef<YAMLMetaData>()
   const firstHeading = useRef<string>()
@@ -82,15 +82,13 @@ export const Editor: React.FC = () => {
     }
   }, [])
 
-  useEffect(() => {
-    setFirstDraw(false)
-  }, [])
+  const isFirstDraw = useFirstDraw()
 
   useEffect(() => {
-    if (!firstDraw && !isWide && editorMode === EditorMode.BOTH) {
+    if (!isFirstDraw && !isWide && editorMode === EditorMode.BOTH) {
       setEditorMode(EditorMode.PREVIEW)
     }
-  }, [editorMode, firstDraw, isWide])
+  }, [editorMode, isFirstDraw, isWide])
 
   const onMarkdownRendererScroll = useCallback((newScrollState: ScrollState) => {
     if (scrollSource.current === ScrollSource.RENDERER && editorSyncScroll) {
@@ -129,7 +127,9 @@ export const Editor: React.FC = () => {
             <ScrollingDocumentRenderPane
               content={markdownContent}
               onFirstHeadingChange={onFirstHeadingChange}
-              onMakeScrollSource={() => { scrollSource.current = ScrollSource.RENDERER }}
+              onMakeScrollSource={() => {
+                scrollSource.current = ScrollSource.RENDERER
+              }}
               onMetadataChange={onMetadataChange}
               onScroll={onMarkdownRendererScroll}
               onTaskCheckedChange={onTaskCheckedChange}
diff --git a/src/components/editor/hooks/useFirstDraw.ts b/src/components/editor/hooks/useFirstDraw.ts
new file mode 100644
index 000000000..a031c1e76
--- /dev/null
+++ b/src/components/editor/hooks/useFirstDraw.ts
@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react'
+
+export const useFirstDraw = ():boolean => {
+  const [firstDraw, setFirstDraw] = useState(true)
+
+  useEffect(() => {
+    setFirstDraw(false)
+  }, [])
+
+  return firstDraw
+}