Replace empty components with hooks (#666)

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)}/>

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'}>

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 { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
-import { DocumentTitle } from '../common/document-title/document-title'
+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'}>

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
 }

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 {
+export const useDocumentTitle = (title?: string):void => {
-  title?: string
-}
-
-export const DocumentTitle: React.FC<DocumentTitleProps> = ({ title }) => {
   const brandingName = useSelector((state: ApplicationState) => state.config.branding.name)
 
   useEffect(() => {
     document.title = `${title ? title + ' - ' : ''}HedgeDoc ${brandingName ? ` @ ${brandingName}` : ''}`
   }, [brandingName, title])
-
-  return null
 }