Add application state hook (#1308)

* Add application state hook

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add docs

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-06-11 15:21:24 +02:00 committed by GitHub
parent 4720f2d36b
commit 829cc2fe48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 149 additions and 195 deletions

View file

@ -14,10 +14,9 @@ import { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
import { BasicMarkdownRenderer } from '../markdown-renderer/basic-markdown-renderer'
import { ImageClickHandler } from '../markdown-renderer/replace-components/image/image-replacer'
import './markdown-document.scss'
import { useSelector } from 'react-redux'
import { ApplicationState } from '../../redux'
import { WidthBasedTableOfContents } from './width-based-table-of-contents'
import { ShowIf } from '../common/show-if/show-if'
import { useApplicationState } from '../../hooks/common/use-application-state'
export interface RendererProps extends ScrollProps {
onFirstHeadingChange?: (firstHeading: string | undefined) => void
@ -60,7 +59,7 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
const [tocAst, setTocAst] = useState<TocAst>()
const useAlternativeBreaks = useSelector((state: ApplicationState) => state.noteDetails.frontmatter.breaks)
const useAlternativeBreaks = useApplicationState((state) => state.noteDetails.frontmatter.breaks)
useEffect(() => {
if (!onHeightChange) {

View file

@ -4,9 +4,8 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import { useApplicationState } from '../../hooks/common/use-application-state'
import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { ApplicationState } from '../../redux'
import { setDarkMode } from '../../redux/dark-mode/methods'
import { setNoteFrontmatter } from '../../redux/note-details/methods'
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
@ -24,7 +23,7 @@ export const RenderPage: React.FC = () => {
const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 })
const [baseConfiguration, setBaseConfiguration] = useState<BaseConfiguration | undefined>(undefined)
const editorOrigin = useSelector((state: ApplicationState) => state.config.iframeCommunication.editorOrigin)
const editorOrigin = useApplicationState((state) => state.config.iframeCommunication.editorOrigin)
const iframeCommunicator = useMemo(() => {
const newCommunicator = new IframeRendererToEditorCommunicator()