github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-10-18 13:20:16 -04:00
Code Issues Projects Releases Packages Wiki Activity

refactor: split apply-dark-mode hook into multiple hooks

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-26 20:47:05 +02:00
parent bcff03ef99
commit a23c215d8d
8 changed files with 70 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/application-loader/initializers/load-dark-mode.ts
View file

@ -3,7 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { DARK_MODE_LOCAL_STORAGE_KEY } from '../../../hooks/dark-mode/use-apply-dark-mode'
import { DARK_MODE_LOCAL_STORAGE_KEY } from '../../../hooks/dark-mode/use-save-dark-mode-preference-to-local-storage'
import { setDarkModePreference } from '../../../redux/dark-mode/methods'
import { DarkModePreference } from '../../../redux/dark-mode/types'
import { isClientSideRendering } from '../../../utils/is-client-side-rendering'

6
frontend/src/components/editor-page/editor-page-content.tsx
View file

@ -4,7 +4,8 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplicationState } from '../../hooks/common/use-application-state'
import { useApplyDarkMode } from '../../hooks/dark-mode/use-apply-dark-mode'
import { useApplyDarkModeStyle } from '../../hooks/dark-mode/use-apply-dark-mode-style'
import { useSaveDarkModePreferenceToLocalStorage } from '../../hooks/dark-mode/use-save-dark-mode-preference-to-local-storage'
import { Logger } from '../../utils/logger'
import { MotdModal } from '../common/motd-modal/motd-modal'
import { CommunicatorImageLightbox } from '../markdown-renderer/extensions/image/communicator-image-lightbox'
@ -78,7 +79,8 @@ export const EditorPageContent: React.FC = () => {
[editorSyncScroll]
)
useApplyDarkMode()
useApplyDarkModeStyle()
useSaveDarkModePreferenceToLocalStorage()
useUpdateLocalHistoryEntry()
const setRendererToScrollSource = useCallback(() => {

23
frontend/src/hooks/dark-mode/use-apply-dark-mode-style.ts Normal file
View file

@ -0,0 +1,23 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useDarkModeState } from './use-dark-mode-state'
import { useEffect } from 'react'
/**
* Applies the dark mode by adding a css class to the body tag.
*/
export const useApplyDarkModeStyle = (): void => {
const darkMode = useDarkModeState()
useEffect(() => {
if (darkMode) {
window.document.body.classList.add('dark')
} else {
window.document.body.classList.remove('dark')
}
}, [darkMode])
useEffect(() => () => window.document.body.classList.remove('dark'), [])
}

51
frontend/src/hooks/dark-mode/use-apply-dark-mode.ts
View file

@ -1,51 +0,0 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { DarkModePreference } from '../../redux/dark-mode/types'
import { isClientSideRendering } from '../../utils/is-client-side-rendering'
import { Logger } from '../../utils/logger'
import { useApplicationState } from '../common/use-application-state'
import useMediaQuery from '@restart/hooks/useMediaQuery'
import { useEffect } from 'react'
const logger = new Logger('useApplyDarkMode')
export const DARK_MODE_LOCAL_STORAGE_KEY = 'forcedDarkMode'
/**
* Applies the `dark` css class to the body tag according to the dark mode state.
*/
export const useApplyDarkMode = (): void => {
const preference = useApplicationState((state) => state.darkMode.darkModePreference)
const isBrowserPreferringDark = useMediaQuery('(prefers-color-scheme: dark)')
useEffect(() => saveToLocalStorage(preference), [preference])
useEffect(() => {
if (preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)) {
window.document.body.classList.add('dark')
} else {
window.document.body.classList.remove('dark')
}
}, [isBrowserPreferringDark, preference])
useEffect(() => () => window.document.body.classList.remove('dark'), [])
}
export const saveToLocalStorage = (preference: DarkModePreference): void => {
if (!isClientSideRendering()) {
return
}
try {
if (preference === DarkModePreference.DARK) {
window.localStorage.setItem(DARK_MODE_LOCAL_STORAGE_KEY, 'dark')
} else if (preference === DarkModePreference.LIGHT) {
window.localStorage.setItem(DARK_MODE_LOCAL_STORAGE_KEY, 'light')
} else if (preference === DarkModePreference.AUTO) {
window.localStorage.removeItem(DARK_MODE_LOCAL_STORAGE_KEY)
}
} catch (error) {
logger.error('Saving to local storage failed', error)
}
}

33
frontend/src/hooks/dark-mode/use-save-dark-mode-preference-to-local-storage.ts Normal file
View file

@ -0,0 +1,33 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { DarkModePreference } from '../../redux/dark-mode/types'
import { Logger } from '../../utils/logger'
import { useApplicationState } from '../common/use-application-state'
import { useEffect } from 'react'
const logger = new Logger('useSaveDarkModeToLocalStorage')
export const DARK_MODE_LOCAL_STORAGE_KEY = 'forcedDarkMode'
/**
* Saves the dark mode preference of the user in the browser's local storage.
*/
export const useSaveDarkModePreferenceToLocalStorage = () => {
const preference = useApplicationState((state) => state.darkMode.darkModePreference)
useEffect(() => {
try {
if (preference === DarkModePreference.DARK) {
window.localStorage.setItem(DARK_MODE_LOCAL_STORAGE_KEY, 'dark')
} else if (preference === DarkModePreference.LIGHT) {
window.localStorage.setItem(DARK_MODE_LOCAL_STORAGE_KEY, 'light')
} else if (preference === DarkModePreference.AUTO) {
window.localStorage.removeItem(DARK_MODE_LOCAL_STORAGE_KEY)
}
} catch (error) {
logger.error('Saving to local storage failed', error)
}
}, [preference])
}

4
frontend/src/pages/cheatsheet.tsx
View file

@ -4,12 +4,12 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { CheatsheetContent } from '../components/editor-page/app-bar/cheatsheet/cheatsheet-content'
import { useApplyDarkMode } from '../hooks/dark-mode/use-apply-dark-mode'
import { useApplyDarkModeStyle } from '../hooks/dark-mode/use-apply-dark-mode-style'
import type { NextPage } from 'next'
import { Container } from 'react-bootstrap'
const CheatsheetPage: NextPage = () => {
useApplyDarkMode()
useApplyDarkModeStyle()
return (
<Container>

4
frontend/src/pages/render.tsx
View file

@ -5,7 +5,7 @@
*/
import { RendererToEditorCommunicatorContextProvider } from '../components/editor-page/render-context/renderer-to-editor-communicator-context-provider'
import { RenderPageContent } from '../components/render-page/render-page-content'
import { useApplyDarkMode } from '../hooks/dark-mode/use-apply-dark-mode'
import { useApplyDarkModeStyle } from '../hooks/dark-mode/use-apply-dark-mode-style'
import type { NextPage } from 'next'
import React from 'react'
@ -13,7 +13,7 @@ import React from 'react'
* Renders the actual markdown renderer that receives the content and metadata via iframe communication.
*/
export const RenderPage: NextPage = () => {
useApplyDarkMode()
useApplyDarkModeStyle()
return (
<RendererToEditorCommunicatorContextProvider>

7
frontend/src/pages/s/[noteId].tsx
View file

@ -9,14 +9,17 @@ import { DocumentReadOnlyPageContent } from '../../components/document-read-only
import { AppBar, AppBarMode } from '../../components/editor-page/app-bar/app-bar'
import { HeadMetaProperties } from '../../components/editor-page/head-meta-properties/head-meta-properties'
import { EditorToRendererCommunicatorContextProvider } from '../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
import { useApplyDarkMode } from '../../hooks/dark-mode/use-apply-dark-mode'
import { useApplyDarkModeStyle } from '../../hooks/dark-mode/use-apply-dark-mode-style'
import { useSaveDarkModePreferenceToLocalStorage } from '../../hooks/dark-mode/use-save-dark-mode-preference-to-local-storage'
import React from 'react'
/**
* Renders a page that contains only the rendered document without an editor or realtime updates.
*/
export const DocumentReadOnlyPage: React.FC = () => {
useApplyDarkMode()
useApplyDarkModeStyle()
useSaveDarkModePreferenceToLocalStorage()
return (
<EditorToRendererCommunicatorContextProvider>
<NoteLoadingBoundary>