Extract the render ready status into an extra redux state

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

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<number | null>(null)
-  const rendererReady = useApplicationState((state) => state.editorConfig.rendererReady)
+  const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
 
   useEffect(() => {
     iframeEditorToRendererCommunicator.onWordCountCalculated((words) => {

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<RenderIframeProps> = ({
   const frameReference = useRef<HTMLIFrameElement>(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<RenderIframeProps> = ({
   )
   const [frameHeight, setFrameHeight] = useState<number>(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<RenderIframeProps> = ({
         baseUrl: window.location.toString(),
         rendererType
       })
-      setRendererReady(true)
+      setRendererStatus(true)
     })
     return () => iframeCommunicator.onRendererReady(undefined)
   }, [iframeCommunicator, rendererType])

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 (
     <IframeEditorToRendererCommunicatorContextProvider>

src/redux/editor/methods.ts

@@ -14,8 +14,7 @@ import {
   SetEditorLigaturesAction,
   SetEditorPreferencesAction,
   SetEditorSmartPasteAction,
-  SetEditorSyncScrollAction,
+  SetEditorSyncScrollAction
-  SetRendererReadyAction
 } 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,

src/redux/editor/reducers.ts

@@ -15,8 +15,7 @@ import {
   SetEditorLigaturesAction,
   SetEditorPreferencesAction,
   SetEditorSmartPasteAction,
-  SetEditorSyncScrollAction,
+  SetEditorSyncScrollAction
-  SetRendererReadyAction
 } 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<EditorConfig, EditorConfigActions> = (
       }
       saveToLocalStorage(newState)
       return newState
-    case EditorConfigActionType.SET_RENDERER_READY:
-      return {
-        ...state,
-        rendererReady: (action as SetRendererReadyAction).rendererReady
-      }
     case EditorConfigActionType.SET_LIGATURES:
       newState = {
         ...state,

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_SMART_PASTE = 'editor/preferences/setSmartPaste'
-  SET_RENDERER_READY = 'editor/rendererReady/set'
 }
 
 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<EditorConfigActionType> {
   type: EditorConfigActionType
 }
 
-export interface SetRendererReadyAction extends EditorConfigActions {
-  rendererReady: boolean
-}
-
 export interface SetEditorSyncScrollAction extends EditorConfigActions {
   syncScroll: boolean
 }

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<ApplicationState> = combineReducers<ApplicationState>({
@@ -45,7 +48,8 @@ export const allReducers: Reducer<ApplicationState> = combineReducers<Applicatio
   editorConfig: EditorConfigReducer,
   darkMode: DarkModeConfigReducer,
   noteDetails: NoteDetailsReducer,
-  uiNotifications: UiNotificationReducer
+  uiNotifications: UiNotificationReducer,
+  rendererStatus: RendererStatusReducer
 })
 
 export const store = createStore(allReducers)

src/redux/renderer-status/methods.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { store } from '..'
+import { RendererStatusActionType, SetRendererStatusAction } from './types'
+
+/**
+ * Dispatches a global application state change for the "renderer ready" state.
+ *
+ * @param rendererReady The new renderer ready state.
+ */
+export const setRendererStatus = (rendererReady: boolean): void => {
+  const action: SetRendererStatusAction = {
+    type: RendererStatusActionType.SET_RENDERER_STATUS,
+    rendererReady
+  }
+  store.dispatch(action)
+}

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<RendererStatus, RendererStatusActions> = (
+  state: RendererStatus = initialState,
+  action: RendererStatusActions
+) => {
+  switch (action.type) {
+    case RendererStatusActionType.SET_RENDERER_STATUS:
+      return {
+        ...state,
+        rendererReady: action.rendererReady
+      }
+    default:
+      return state
+  }
+}

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<RendererStatusActionType> {
+  type: RendererStatusActionType.SET_RENDERER_STATUS
+  rendererReady: boolean
+}
+
+export type RendererStatusActions = SetRendererStatusAction