Fix SlideShow-Only-Page and Document-Read-Only-Page

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

cypress/integration/document-read-only-page.spec.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe("Document read only page", () => {
+  it('renders the document mode', () => {
+    cy.visit('/s/test')
+    cy.getMarkdownBody().should("exist")
+  })
+})

cypress/integration/slideshow-only-page.spec.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe("Slideshow only page", () => {
+  it('renders slide show mode', () => {
+    cy.visit('/p/test')
+    cy.getReveal().should("exist")
+  })
+})

src/components/document-read-only-page/document-read-only-page-content.tsx

@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
+import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
+import { useNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-note-markdown-content-without-frontmatter'
+import { useApplicationState } from '../../hooks/common/use-application-state'
+import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
+import { DocumentInfobar } from './document-infobar'
+import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
+import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
+
+export const DocumentReadOnlyPageContent: React.FC = () => {
+  useTranslation()
+
+  const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
+  const noteDetails = useApplicationState((state) => state.noteDetails)
+  useSendFrontmatterInfoFromReduxToRenderer()
+
+  return (
+    <Fragment>
+      <DocumentInfobar
+        changedAuthor={noteDetails.lastChange.userName ?? ''}
+        changedTime={noteDetails.lastChange.timestamp}
+        createdAuthor={'Test'}
+        createdTime={noteDetails.createTime}
+        editable={true}
+        noteId={noteDetails.id}
+        viewCount={noteDetails.viewCount}
+      />
+      <RenderIframe
+        frameClasses={'flex-fill h-100 w-100'}
+        markdownContent={markdownContent}
+        onFirstHeadingChange={updateNoteTitleByFirstHeading}
+        rendererType={RendererType.DOCUMENT}
+      />
+    </Fragment>
+  )
+}

src/components/document-read-only-page/document-read-only-page.tsx

@@ -4,41 +4,23 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useCallback } from 'react'
+import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router'
 import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
 import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
-import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
 import { MotdModal } from '../common/motd-modal/motd-modal'
 import { ShowIf } from '../common/show-if/show-if'
 import { AppBar, AppBarMode } from '../editor-page/app-bar/app-bar'
-import { EditorPagePathParams } from '../editor-page/editor-page'
 import { useLoadNoteFromServer } from '../editor-page/hooks/useLoadNoteFromServer'
-import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
-import { DocumentInfobar } from './document-infobar'
 import { ErrorWhileLoadingNoteAlert } from './ErrorWhileLoadingNoteAlert'
 import { LoadingNoteAlert } from './LoadingNoteAlert'
-import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
-import { useApplicationState } from '../../hooks/common/use-application-state'
-import { useNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-note-markdown-content-without-frontmatter'
 import { EditorToRendererCommunicatorContextProvider } from '../editor-page/render-context/editor-to-renderer-communicator-context-provider'
-import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
 import { UiNotifications } from '../notifications/ui-notifications'
+import { DocumentReadOnlyPageContent } from './document-read-only-page-content'
 
 export const DocumentReadOnlyPage: React.FC = () => {
-  useTranslation()
-  const { id } = useParams<EditorPagePathParams>()
-
   useApplyDarkMode()
   useDocumentTitleWithNoteTitle()
-
-  const onFirstHeadingChange = useCallback(updateNoteTitleByFirstHeading, [])
   const [error, loading] = useLoadNoteFromServer()
-  const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
-  const noteDetails = useApplicationState((state) => state.noteDetails)
-  useSendFrontmatterInfoFromReduxToRenderer()
-
   return (
     <EditorToRendererCommunicatorContextProvider>
       <UiNotifications />

src/components/slide-show-page/slide-show-page-content.tsx

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
+import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
+import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
+import { useTranslation } from 'react-i18next'
+import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
+import { useNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-note-markdown-content-without-frontmatter'
+
+export const SlideShowPageContent: React.FC = () => {
+  const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
+  useTranslation()
+  useSendFrontmatterInfoFromReduxToRenderer()
+
+  return (
+    <div className={'vh-100 vw-100'}>
+      <RenderIframe
+        frameClasses={'h-100 w-100'}
+        markdownContent={markdownContent}
+        rendererType={RendererType.SLIDESHOW}
+        onFirstHeadingChange={updateNoteTitleByFirstHeading}
+      />
+    </div>
+  )
+}

src/components/slide-show-page/slide-show-page.tsx

@@ -5,34 +5,22 @@
  */
 
 import React from 'react'
-import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
-import { useNoteMarkdownContent } from '../../hooks/common/use-note-markdown-content'
-import { useTranslation } from 'react-i18next'
 import { useLoadNoteFromServer } from '../editor-page/hooks/useLoadNoteFromServer'
 import { ShowIf } from '../common/show-if/show-if'
-import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
+import { EditorToRendererCommunicatorContextProvider } from '../editor-page/render-context/editor-to-renderer-communicator-context-provider'
-import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
+import { SlideShowPageContent } from './slide-show-page-content'
-import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
+import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
 
 export const SlideShowPage: React.FC = () => {
-  const markdownContent = useNoteMarkdownContent()
-
-  useTranslation()
-  useSendFrontmatterInfoFromReduxToRenderer()
-
   const [error, loading] = useLoadNoteFromServer()
+  useDocumentTitleWithNoteTitle()
 
   return (
-    <ShowIf condition={!error && !loading}>
+    <EditorToRendererCommunicatorContextProvider>
-      <div className={'vh-100 vw-100'}>
+      <ShowIf condition={!error && !loading}>
-        <RenderIframe
+        <SlideShowPageContent />
-          frameClasses={'h-100 w-100'}
+      </ShowIf>
-          markdownContent={markdownContent}
+    </EditorToRendererCommunicatorContextProvider>
-          rendererType={RendererType.SLIDESHOW}
-          onFirstHeadingChange={updateNoteTitleByFirstHeading}
-        />
-      </div>
-    </ShowIf>
   )
 }