diff --git a/src/components/editor-page/document-bar/document-info/document-info-line-word-count.tsx b/src/components/editor-page/document-bar/document-info/document-info-line-word-count.tsx index 48a127fb5..e8338465f 100644 --- a/src/components/editor-page/document-bar/document-info/document-info-line-word-count.tsx +++ b/src/components/editor-page/document-bar/document-info/document-info-line-word-count.tsx @@ -20,7 +20,7 @@ export const DocumentInfoLineWordCount: React.FC = () => { useTranslation() const iframeEditorToRendererCommunicator = useIFrameEditorToRendererCommunicator() const [wordCount, setWordCount] = useState(null) - const rendererReady = useApplicationState((state) => state.editorConfig.rendererReady) + const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady) useEffect(() => { iframeEditorToRendererCommunicator.onWordCountCalculated((words) => { diff --git a/src/components/editor-page/renderer-pane/render-iframe.tsx b/src/components/editor-page/renderer-pane/render-iframe.tsx index 496f25096..1190d1594 100644 --- a/src/components/editor-page/renderer-pane/render-iframe.tsx +++ b/src/components/editor-page/renderer-pane/render-iframe.tsx @@ -7,7 +7,6 @@ import equal from 'fast-deep-equal' import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react' import { useApplicationState } from '../../../hooks/common/use-application-state' import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated' -import { setRendererReady } from '../../../redux/editor/methods' import { isTestMode } from '../../../utils/test-modes' import { RendererProps } from '../../render-page/markdown-document' import { ImageDetails, RendererType } from '../../render-page/rendering-message' @@ -15,6 +14,7 @@ import { useIFrameEditorToRendererCommunicator } from '../render-context/iframe- import { ScrollState } from '../synced-scroll/scroll-props' import { useOnIframeLoad } from './hooks/use-on-iframe-load' import { ShowOnPropChangeImageLightbox } from './show-on-prop-change-image-lightbox' +import { setRendererStatus } from '../../../redux/renderer-status/methods' export interface RenderIframeProps extends RendererProps { rendererType: RendererType @@ -41,7 +41,7 @@ export const RenderIframe: React.FC = ({ const frameReference = useRef(null) const rendererOrigin = useApplicationState((state) => state.config.iframeCommunication.rendererOrigin) const renderPageUrl = `${rendererOrigin}render` - const resetRendererReady = useCallback(() => setRendererReady(false), []) + const resetRendererReady = useCallback(() => setRendererStatus(false), []) const iframeCommunicator = useIFrameEditorToRendererCommunicator() const onIframeLoad = useOnIframeLoad( frameReference, @@ -52,12 +52,12 @@ export const RenderIframe: React.FC = ({ ) const [frameHeight, setFrameHeight] = useState(0) - const rendererReady = useApplicationState((state) => state.editorConfig.rendererReady) + const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady) useEffect( () => () => { iframeCommunicator.unregisterEventListener() - setRendererReady(false) + setRendererStatus(false) }, [iframeCommunicator] ) @@ -103,7 +103,7 @@ export const RenderIframe: React.FC = ({ baseUrl: window.location.toString(), rendererType }) - setRendererReady(true) + setRendererStatus(true) }) return () => iframeCommunicator.onRendererReady(undefined) }, [iframeCommunicator, rendererType]) diff --git a/src/components/intro-page/intro-page.tsx b/src/components/intro-page/intro-page.tsx index 4016c2071..6b1605147 100644 --- a/src/components/intro-page/intro-page.tsx +++ b/src/components/intro-page/intro-page.tsx @@ -24,7 +24,7 @@ import { useApplicationState } from '../../hooks/common/use-application-state' export const IntroPage: React.FC = () => { const introPageContent = useIntroPageContent() - const rendererReady = useApplicationState((state) => state.editorConfig.rendererReady) + const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady) return ( diff --git a/src/redux/editor/methods.ts b/src/redux/editor/methods.ts index 73a3c5876..c3a0bcb80 100644 --- a/src/redux/editor/methods.ts +++ b/src/redux/editor/methods.ts @@ -14,8 +14,7 @@ import { SetEditorLigaturesAction, SetEditorPreferencesAction, SetEditorSmartPasteAction, - SetEditorSyncScrollAction, - SetRendererReadyAction + SetEditorSyncScrollAction } from './types' export const loadFromLocalStorage = (): EditorConfig | undefined => { @@ -47,19 +46,6 @@ export const setEditorMode = (editorMode: EditorMode): void => { store.dispatch(action) } -/** - * Dispatches a global application state change for the "renderer ready" state. - * - * @param rendererReady The new renderer ready state. - */ -export const setRendererReady = (rendererReady: boolean): void => { - const action: SetRendererReadyAction = { - type: EditorConfigActionType.SET_RENDERER_READY, - rendererReady - } - store.dispatch(action) -} - export const setEditorSyncScroll = (syncScroll: boolean): void => { const action: SetEditorSyncScrollAction = { type: EditorConfigActionType.SET_SYNC_SCROLL, diff --git a/src/redux/editor/reducers.ts b/src/redux/editor/reducers.ts index e3d5bc39e..ddabc908a 100644 --- a/src/redux/editor/reducers.ts +++ b/src/redux/editor/reducers.ts @@ -15,8 +15,7 @@ import { SetEditorLigaturesAction, SetEditorPreferencesAction, SetEditorSmartPasteAction, - SetEditorSyncScrollAction, - SetRendererReadyAction + SetEditorSyncScrollAction } from './types' const initialState: EditorConfig = { @@ -24,7 +23,6 @@ const initialState: EditorConfig = { ligatures: true, syncScroll: true, smartPaste: true, - rendererReady: false, preferences: { theme: 'one-dark', keyMap: 'sublime', @@ -57,11 +55,6 @@ export const EditorConfigReducer: Reducer = ( } saveToLocalStorage(newState) return newState - case EditorConfigActionType.SET_RENDERER_READY: - return { - ...state, - rendererReady: (action as SetRendererReadyAction).rendererReady - } case EditorConfigActionType.SET_LIGATURES: newState = { ...state, diff --git a/src/redux/editor/types.ts b/src/redux/editor/types.ts index 032995151..e0d5528b4 100644 --- a/src/redux/editor/types.ts +++ b/src/redux/editor/types.ts @@ -13,8 +13,7 @@ export enum EditorConfigActionType { SET_SYNC_SCROLL = 'editor/syncScroll/set', MERGE_EDITOR_PREFERENCES = 'editor/preferences/merge', SET_LIGATURES = 'editor/preferences/setLigatures', - SET_SMART_PASTE = 'editor/preferences/setSmartPaste', - SET_RENDERER_READY = 'editor/rendererReady/set' + SET_SMART_PASTE = 'editor/preferences/setSmartPaste' } export interface EditorConfig { @@ -22,7 +21,6 @@ export interface EditorConfig { syncScroll: boolean ligatures: boolean smartPaste: boolean - rendererReady: boolean preferences: EditorConfiguration } @@ -30,10 +28,6 @@ export interface EditorConfigActions extends Action { type: EditorConfigActionType } -export interface SetRendererReadyAction extends EditorConfigActions { - rendererReady: boolean -} - export interface SetEditorSyncScrollAction extends EditorConfigActions { syncScroll: boolean } diff --git a/src/redux/index.ts b/src/redux/index.ts index 1984534a4..47a4ba42f 100644 --- a/src/redux/index.ts +++ b/src/redux/index.ts @@ -23,6 +23,8 @@ import { UiNotificationState } from './ui-notifications/types' import { UiNotificationReducer } from './ui-notifications/reducers' import { HistoryEntry } from './history/types' import { HistoryReducer } from './history/reducers' +import { RendererStatusReducer } from './renderer-status/reducers' +import { RendererStatus } from './renderer-status/types' export interface ApplicationState { user: MaybeUserState @@ -34,6 +36,7 @@ export interface ApplicationState { darkMode: DarkModeConfig noteDetails: NoteDetails uiNotifications: UiNotificationState + rendererStatus: RendererStatus } export const allReducers: Reducer = combineReducers({ @@ -45,7 +48,8 @@ export const allReducers: Reducer = combineReducers { + const action: SetRendererStatusAction = { + type: RendererStatusActionType.SET_RENDERER_STATUS, + rendererReady + } + store.dispatch(action) +} diff --git a/src/redux/renderer-status/reducers.ts b/src/redux/renderer-status/reducers.ts new file mode 100644 index 000000000..ac60a56e0 --- /dev/null +++ b/src/redux/renderer-status/reducers.ts @@ -0,0 +1,34 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { RendererStatus, RendererStatusActions, RendererStatusActionType } from './types' +import { Reducer } from 'redux' + +const initialState: RendererStatus = { + rendererReady: false +} + +/** + * Applies {@link RendererStatusActions renderer status actions} to the global application state. + * + * @param state the current state + * @param action the action that should get applied + * @return The new changed state + */ +export const RendererStatusReducer: Reducer = ( + state: RendererStatus = initialState, + action: RendererStatusActions +) => { + switch (action.type) { + case RendererStatusActionType.SET_RENDERER_STATUS: + return { + ...state, + rendererReady: action.rendererReady + } + default: + return state + } +} diff --git a/src/redux/renderer-status/types.ts b/src/redux/renderer-status/types.ts new file mode 100644 index 000000000..a006f84ee --- /dev/null +++ b/src/redux/renderer-status/types.ts @@ -0,0 +1,22 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { Action } from 'redux' + +export enum RendererStatusActionType { + SET_RENDERER_STATUS = 'renderer-status/set-ready' +} + +export interface RendererStatus { + rendererReady: boolean +} + +export interface SetRendererStatusAction extends Action { + type: RendererStatusActionType.SET_RENDERER_STATUS + rendererReady: boolean +} + +export type RendererStatusActions = SetRendererStatusAction