Fix Communication between frontend and backend (#1201)

Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de> Signed-off-by: Philip Molares <philip.molares@udo.edu> Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
2025-05-29 22:35:50 -04:00 · 2021-05-01 23:01:42 +02:00 · 2021-05-01 23:01:42 +02:00 · 9cf7980334
commit 9cf7980334
parent 4a18e51c83
38 changed files with 268 additions and 164 deletions
--- a/src/components/common/routing/redirector.tsx
+++ b/src/components/common/routing/redirector.tsx
@ -9,6 +9,7 @@ import { Redirect } from 'react-router'
 import { useParams } from 'react-router-dom'
 import { getNote } from '../../../api/notes'
 import { NotFoundErrorScreen } from './not-found-error-screen'
+import { NoteDto } from '../../../api/notes/types'

 interface RouteParameters {
  id: string
@ -20,7 +21,7 @@ export const Redirector: React.FC = () => {

  useEffect(() => {
    getNote(id)
-      .then((noteFromAPI) => setError(!noteFromAPI.preVersionTwoNote))
+      .then((noteFromAPI: NoteDto) => setError(noteFromAPI.metadata.version !== 1))
      .catch(() => setError(true))
  }, [id])

--- a/src/components/document-read-only-page/document-read-only-page.tsx
+++ b/src/components/document-read-only-page/document-read-only-page.tsx
@ -48,7 +48,7 @@ export const DocumentReadOnlyPage: React.FC = () => {
      </div>
      <ShowIf condition={ !error && !loading }>
        <DocumentInfobar
-          changedAuthor={ noteDetails.lastChange.userId ?? '' }
+          changedAuthor={ noteDetails.lastChange.userName ?? '' }
          changedTime={ noteDetails.lastChange.timestamp }
          createdAuthor={ 'Test' }
          createdTime={ noteDetails.createTime }
--- a/src/components/editor-page/app-bar/help-button/links.tsx
+++ b/src/components/editor-page/app-bar/help-button/links.tsx
@ -7,16 +7,13 @@
 import React from 'react'
 import { Col, Row } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
 import links from '../../../../links.json'
-import { ApplicationState } from '../../../../redux'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'

 export const Links: React.FC = () => {
  useTranslation()

-  const backendIssueTracker = useSelector((state: ApplicationState) => state.config.version.issueTrackerUrl)
  return (
    <Row className={ 'justify-content-center pt-4' }>
      <Col lg={ 4 }>
@ -43,7 +40,7 @@ export const Links: React.FC = () => {
            <li>
              <TranslatedExternalLink
                i18nKey='editor.help.contacts.reportIssue'
-                href={ backendIssueTracker }
+                href={ links.backendIssues }
                icon='tag'
                className='text-primary'
              />
--- a/src/components/editor-page/renderer-pane/render-iframe.tsx
+++ b/src/components/editor-page/renderer-pane/render-iframe.tsx
@ -8,7 +8,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { useSelector } from 'react-redux'
 import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
 import { ApplicationState } from '../../../redux'
-import { isTestMode } from '../../../utils/is-test-mode'
+import { isTestMode } from '../../../utils/test-modes'
 import { RendererProps } from '../../render-page/markdown-document'
 import { ImageDetails, RendererType } from '../../render-page/rendering-message'
 import { useContextOrStandaloneIframeCommunicator } from '../render-context/iframe-communicator-context-provider'
@ -44,7 +44,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = (

  const frameReference = useRef<HTMLIFrameElement>(null)
  const rendererOrigin = useSelector((state: ApplicationState) => state.config.iframeCommunication.rendererOrigin)
-  const renderPageUrl = `${ rendererOrigin }/render`
+  const renderPageUrl = `${ rendererOrigin }render`
  const resetRendererReady = useCallback(() => setRendererReady(false), [])
  const iframeCommunicator = useContextOrStandaloneIframeCommunicator()
  const onIframeLoad = useOnIframeLoad(frameReference, iframeCommunicator, rendererOrigin, renderPageUrl, resetRendererReady)
--- a/src/components/history-page/history-content/history-content.tsx
+++ b/src/components/history-page/history-content/history-content.tsx
@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
 */

 import React, { Fragment, useCallback, useState } from 'react'
@ -46,23 +46,19 @@ export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entri
  const [lastPageIndex, setLastPageIndex] = useState(0)

  const onPinClick = useCallback((noteId: string) => {
-    toggleHistoryEntryPinning(noteId).catch(
-      showErrorNotification(t('landing.history.error.updateEntry.text'))
-    )
+    toggleHistoryEntryPinning(noteId)
+      .catch(showErrorNotification(t('landing.history.error.updateEntry.text')))
  }, [t])

  const onDeleteClick = useCallback((noteId: string) => {
-    deleteNote(noteId).then(() => {
-      return removeHistoryEntry(noteId)
-    }).catch(
-      showErrorNotification(t('landing.history.error.deleteNote.text'))
-    )
+    deleteNote(noteId)
+      .then(() => removeHistoryEntry(noteId))
+      .catch(showErrorNotification(t('landing.history.error.deleteNote.text')))
  }, [t])

  const onRemoveClick = useCallback((noteId: string) => {
-    removeHistoryEntry(noteId).catch(
-      showErrorNotification(t('landing.history.error.deleteEntry.text'))
-    )
+    removeHistoryEntry(noteId)
+      .catch(showErrorNotification(t('landing.history.error.deleteEntry.text')))
  }, [t])

  if (entries.length === 0) {
--- a/src/components/landing-layout/footer/powered-by-links.tsx
+++ b/src/components/landing-layout/footer/powered-by-links.tsx
@ -18,7 +18,7 @@ import equal from 'fast-deep-equal'
 export const PoweredByLinks: React.FC = () => {
  useTranslation()

-  const specialLinks = useSelector((state: ApplicationState) => Object.entries(state.config.specialLinks) as [string, string][], equal)
+  const specialUrls: [string, string][] = useSelector((state: ApplicationState) => Object.entries(state.config.specialUrls) as [string, string][], equal)

  return (
    <p>
@ -28,7 +28,7 @@ export const PoweredByLinks: React.FC = () => {
      &nbsp;|&nbsp;
      <TranslatedInternalLink href='/n/release-notes' i18nKey='landing.footer.releases'/>
      {
-        specialLinks.map(([i18nKey, href]) =>
+        specialUrls.map(([i18nKey, href]) =>
          <Fragment key={ i18nKey }>
            &nbsp;|&nbsp;
            <TranslatedExternalLink href={ href } i18nKey={ 'landing.footer.' + i18nKey }/>
--- a/src/components/landing-layout/footer/version-info/version-info-modal.tsx
+++ b/src/components/landing-layout/footer/version-info/version-info-modal.tsx
@ -4,17 +4,32 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

-import React from 'react'
+import React, { useMemo } from 'react'
 import { CommonModal, CommonModalProps } from '../../../common/modals/common-modal'
 import { Modal, Row } from 'react-bootstrap'
 import { VersionInfoModalColumn } from './version-info-modal-column'
 import frontendVersion from '../../../../version.json'
+import links from '../../../../links.json'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../../redux'
 import equal from 'fast-deep-equal'
+import { BackendVersion } from '../../../../api/config/types'

 export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) => {
-  const serverVersion = useSelector((state: ApplicationState) => state.config.version, equal)
+  const serverVersion: BackendVersion = useSelector((state: ApplicationState) => state.config.version, equal)
+  const backendVersion = useMemo(() => {
+    const version = `${serverVersion.major}.${serverVersion.minor}.${serverVersion.patch}`
+
+    if (serverVersion.preRelease) {
+      return `${version}-${serverVersion.preRelease}`
+    }
+
+    if (serverVersion.commit) {
+      return serverVersion.commit
+    }
+    return version
+  }, [serverVersion])
+

  return (
    <CommonModal data-cy={ 'version-modal' } show={ show } onHide={ onHide } closeButton={ true }
@ -23,9 +38,9 @@ export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) =
        <Row>
          <VersionInfoModalColumn
            titleI18nKey={ 'landing.versionInfo.serverVersion' }
-            version={ serverVersion.version }
-            issueTrackerLink={ serverVersion.issueTrackerUrl }
-            sourceCodeLink={ serverVersion.sourceCodeUrl }/>
+            version={ backendVersion }
+            issueTrackerLink={ links.backendIssues }
+            sourceCodeLink={ links.backendSourceCode }/>
          <VersionInfoModalColumn
            titleI18nKey={ 'landing.versionInfo.clientVersion' }
            version={ frontendVersion.version }
--- a/src/components/register-page/register-page.tsx
+++ b/src/components/register-page/register-page.tsx
@ -14,6 +14,7 @@ import { ApplicationState } from '../../redux'
 import { TranslatedExternalLink } from '../common/links/translated-external-link'
 import { ShowIf } from '../common/show-if/show-if'
 import { getAndSetUser } from '../login-page/auth/utils'
+import { SpecialUrls } from '../../api/config/types'

 export enum RegisterError {
  NONE = 'none',
@ -24,7 +25,7 @@ export enum RegisterError {
 export const RegisterPage: React.FC = () => {
  const { t } = useTranslation()
  const allowRegister = useSelector((state: ApplicationState) => state.config.allowRegister)
-  const specialLinks = useSelector((state: ApplicationState) => state.config.specialLinks)
+  const specialUrls: SpecialUrls = useSelector((state: ApplicationState) => state.config.specialUrls)
  const userExists = useSelector((state: ApplicationState) => !!state.user)

  const [username, setUsername] = useState('')
@ -112,17 +113,17 @@ export const RegisterPage: React.FC = () => {
                    required
                  />
                </Form.Group>
-                <ShowIf condition={ !!specialLinks?.termsOfUse || !!specialLinks?.privacy }>
+                <ShowIf condition={ !!specialUrls?.termsOfUse || !!specialUrls?.privacy }>
                  <Trans i18nKey='login.register.infoTermsPrivacy'/>
                  <ul>
-                    <ShowIf condition={ !!specialLinks?.termsOfUse }>
+                    <ShowIf condition={ !!specialUrls?.termsOfUse }>
                      <li>
-                        <TranslatedExternalLink i18nKey='landing.footer.termsOfUse' href={ specialLinks.termsOfUse }/>
+                        <TranslatedExternalLink i18nKey='landing.footer.termsOfUse' href={ specialUrls.termsOfUse }/>
                      </li>
                    </ShowIf>
-                    <ShowIf condition={ !!specialLinks?.privacy }>
+                    <ShowIf condition={ !!specialUrls?.privacy }>
                      <li>
-                        <TranslatedExternalLink i18nKey='landing.footer.privacy' href={ specialLinks.privacy }/>
+                        <TranslatedExternalLink i18nKey='landing.footer.privacy' href={ specialUrls.privacy }/>
                      </li>
                    </ShowIf>
                  </ul>