From 0d2c2fe0ee9d3ec771f5d6af034d89d34434ae85 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Mon, 12 Oct 2020 22:33:23 +0200
Subject: [PATCH] Replace empty components with hooks (#666)

---
 src/components/editor/editor.tsx                     |  9 +++++----
 src/components/landing-layout/landing-layout.tsx     |  5 +++--
 src/components/pad-view-only/pad-view-only.tsx       |  9 +++++----
 .../common/use-apply-dark-mode.ts}                   |  8 +++-----
 .../common/use-document-title.ts}                    | 12 +++---------
 5 files changed, 19 insertions(+), 24 deletions(-)
 rename src/{components/common/apply-dark-mode/apply-dark-mode.tsx => hooks/common/use-apply-dark-mode.ts} (72%)
 rename src/{components/common/document-title/document-title.tsx => hooks/common/use-document-title.ts} (54%)

diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx
index 9cd80237d..2737a126c 100644
--- a/src/components/editor/editor.tsx
+++ b/src/components/editor/editor.tsx
@@ -2,10 +2,10 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import useMedia from 'use-media'
+import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
+import { useDocumentTitle } from '../../hooks/common/use-document-title'
 import { ApplicationState } from '../../redux'
 import { setEditorMode } from '../../redux/editor/methods'
-import { ApplyDarkMode } from '../common/apply-dark-mode/apply-dark-mode'
-import { DocumentTitle } from '../common/document-title/document-title'
 import { extractNoteTitle } from '../common/document-title/note-title-extractor'
 import { MotdBanner } from '../common/motd-banner/motd-banner'
 import { AppBar, AppBarMode } from './app-bar/app-bar'
@@ -104,11 +104,12 @@ export const Editor: React.FC = () => {
     }
   }, [editorSyncScroll])
 
+  useApplyDarkMode()
+  useDocumentTitle(documentTitle)
+
   return (
     <Fragment>
-      <ApplyDarkMode/>
       <MotdBanner/>
-      <DocumentTitle title={documentTitle}/>
       <div className={'d-flex flex-column vh-100'}>
         <AppBar mode={AppBarMode.EDITOR}/>
         <DocumentBar title={documentTitle} noteContent={markdownContent} updateNoteContent={(newContent) => setMarkdownContent(newContent)}/>
diff --git a/src/components/landing-layout/landing-layout.tsx b/src/components/landing-layout/landing-layout.tsx
index b6d14eaa9..261339f14 100644
--- a/src/components/landing-layout/landing-layout.tsx
+++ b/src/components/landing-layout/landing-layout.tsx
@@ -1,14 +1,15 @@
 import React from 'react'
 import { Container } from 'react-bootstrap'
-import { DocumentTitle } from '../common/document-title/document-title'
+import { useDocumentTitle } from '../../hooks/common/use-document-title'
 import { Footer } from './footer/footer'
 import { MotdBanner } from '../common/motd-banner/motd-banner'
 import { HeaderBar } from './navigation/header-bar/header-bar'
 
 export const LandingLayout: React.FC = ({ children }) => {
+  useDocumentTitle()
+
   return (
     <Container className="text-light d-flex flex-column mvh-100">
-      <DocumentTitle/>
       <MotdBanner/>
       <HeaderBar/>
       <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
diff --git a/src/components/pad-view-only/pad-view-only.tsx b/src/components/pad-view-only/pad-view-only.tsx
index 071c22d4c..18ca94e66 100644
--- a/src/components/pad-view-only/pad-view-only.tsx
+++ b/src/components/pad-view-only/pad-view-only.tsx
@@ -3,8 +3,8 @@ import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useParams } from 'react-router'
 import { getNote, Note } from '../../api/notes'
-import { ApplyDarkMode } from '../common/apply-dark-mode/apply-dark-mode'
-import { DocumentTitle } from '../common/document-title/document-title'
+import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
+import { useDocumentTitle } from '../../hooks/common/use-document-title'
 import { extractNoteTitle } from '../common/document-title/note-title-extractor'
 import { MotdBanner } from '../common/motd-banner/motd-banner'
 import { ShowIf } from '../common/show-if/show-if'
@@ -47,10 +47,11 @@ export const PadViewOnly: React.FC = () => {
       .finally(() => setLoading(false))
   }, [id])
 
+  useApplyDarkMode()
+  useDocumentTitle(documentTitle)
+
   return (
     <div className={'d-flex flex-column mvh-100 bg-light'}>
-      <ApplyDarkMode/>
-      <DocumentTitle title={documentTitle}/>
       <MotdBanner/>
       <AppBar mode={AppBarMode.BASIC}/>
       <div className={'container'}>
diff --git a/src/components/common/apply-dark-mode/apply-dark-mode.tsx b/src/hooks/common/use-apply-dark-mode.ts
similarity index 72%
rename from src/components/common/apply-dark-mode/apply-dark-mode.tsx
rename to src/hooks/common/use-apply-dark-mode.ts
index e198b2070..5f6cf7fe1 100644
--- a/src/components/common/apply-dark-mode/apply-dark-mode.tsx
+++ b/src/hooks/common/use-apply-dark-mode.ts
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../redux'
+import { ApplicationState } from '../../redux'
 
-export const ApplyDarkMode: React.FC = () => {
+export const useApplyDarkMode = ():void => {
   const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
 
   useEffect(() => {
@@ -15,6 +15,4 @@ export const ApplyDarkMode: React.FC = () => {
       window.document.body.classList.remove('dark')
     }
   }, [darkModeActivated])
-
-  return null
 }
diff --git a/src/components/common/document-title/document-title.tsx b/src/hooks/common/use-document-title.ts
similarity index 54%
rename from src/components/common/document-title/document-title.tsx
rename to src/hooks/common/use-document-title.ts
index c21591c3b..adaaec3d7 100644
--- a/src/components/common/document-title/document-title.tsx
+++ b/src/hooks/common/use-document-title.ts
@@ -1,17 +1,11 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../redux'
+import { ApplicationState } from '../../redux'
 
-export interface DocumentTitleProps {
-  title?: string
-}
-
-export const DocumentTitle: React.FC<DocumentTitleProps> = ({ title }) => {
+export const useDocumentTitle = (title?: string):void => {
   const brandingName = useSelector((state: ApplicationState) => state.config.branding.name)
 
   useEffect(() => {
     document.title = `${title ? title + ' - ' : ''}HedgeDoc ${brandingName ? ` @ ${brandingName}` : ''}`
   }, [brandingName, title])
-
-  return null
 }