feat(motd): read motd in RSC and provide via context

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

frontend/src/components/global-dialogs/motd-modal/cached-motd-modal.tsx

@@ -0,0 +1,44 @@
+'use client'
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback, useMemo, useState } from 'react'
+import { useMotdContextValue } from '../../motd/motd-context'
+import { useLocalStorage } from 'react-use'
+import { MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
+import { MotdModal } from './motd-modal'
+import { testId } from '../../../utils/test-id'
+
+/**
+ * Reads the motd from the context and shows it in a modal.
+ * If the modal gets dismissed by the user then the "last modified" identifier will be written into the local storage
+ * to prevent that the motd will be shown again until it gets changed.
+ */
+export const CachedMotdModal: React.FC = () => {
+  const contextValue = useMotdContextValue()
+  const [cachedLastModified, saveLocalStorage] = useLocalStorage<string>(MOTD_LOCAL_STORAGE_KEY, undefined)
+
+  const [dismissed, setDismissed] = useState(false)
+
+  const show = useMemo(() => {
+    const lastModified = contextValue?.lastModified
+    return cachedLastModified !== lastModified && lastModified !== undefined && !dismissed
+  }, [cachedLastModified, contextValue?.lastModified, dismissed])
+
+  const doDismiss = useCallback(() => {
+    const lastModified = contextValue?.lastModified
+    if (lastModified) {
+      saveLocalStorage(lastModified)
+    }
+    setDismissed(true)
+  }, [contextValue, saveLocalStorage])
+
+  if (contextValue?.lastModified === undefined && process.env.NODE_ENV === 'test') {
+    return <span {...testId('loaded not visible')} />
+  }
+
+  return <MotdModal show={show} onDismiss={doDismiss}></MotdModal>
+}

frontend/src/components/global-dialogs/motd-modal/fetch-motd.spec.ts

@@ -7,7 +7,8 @@ import { fetchMotd } from './fetch-motd'
 import { Mock } from 'ts-mockery'
 
 describe('fetch motd', () => {
-  const motdUrl = '/public/motd.md'
+  const baseUrl = 'https://example.org/'
+  const motdUrl = `${baseUrl}public/motd.md`
 
   beforeEach(() => {
     window.localStorage.clear()
@@ -47,7 +48,7 @@ describe('fetch motd', () => {
     jest.spyOn(global, 'fetch').mockImplementation(() =>
       Promise.resolve(
         Mock.of<Response>({
-          status: 500
+          status: 404
         })
       )
     )
@@ -56,7 +57,7 @@ describe('fetch motd', () => {
   describe('date detection', () => {
     it('will return the last-modified value if available', async () => {
       mockFetch('mocked motd', 'yesterday-modified', null)
-      const result = fetchMotd()
+      const result = fetchMotd(baseUrl)
       await expect(result).resolves.toStrictEqual({
         motdText: 'mocked motd',
         lastModified: 'yesterday-modified'
@@ -64,7 +65,7 @@ describe('fetch motd', () => {
     })
     it('will return the etag if last-modified is not returned', async () => {
       mockFetch('mocked motd', null, 'yesterday-etag')
-      const result = fetchMotd()
+      const result = fetchMotd(baseUrl)
       await expect(result).resolves.toStrictEqual({
         motdText: 'mocked motd',
         lastModified: 'yesterday-etag'
@@ -72,7 +73,7 @@ describe('fetch motd', () => {
     })
     it('will prefer the last-modified header over the etag', async () => {
       mockFetch('mocked motd', 'yesterday-last', 'yesterday-etag')
-      const result = fetchMotd()
+      const result = fetchMotd(baseUrl)
       await expect(result).resolves.toStrictEqual({
         motdText: 'mocked motd',
         lastModified: 'yesterday-last'
@@ -80,34 +81,24 @@ describe('fetch motd', () => {
     })
     it('will return an empty value if neither the last-modified value nor the etag is returned', async () => {
       mockFetch('mocked motd', null, null)
-      const result = fetchMotd()
-      await expect(result).resolves.toStrictEqual({
-        motdText: 'mocked motd',
-        lastModified: null
-      })
+      const result = fetchMotd(baseUrl)
+      await expect(result).resolves.toBe(undefined)
     })
   })
 
   it('can fetch a motd if no last modified value has been memorized', async () => {
     mockFetch('mocked motd', 'yesterday')
-    const result = fetchMotd()
+    const result = fetchMotd(baseUrl)
     await expect(result).resolves.toStrictEqual({
       motdText: 'mocked motd',
       lastModified: 'yesterday'
     })
   })
 
-  it("can detect that the motd hasn't been updated", async () => {
-    mockFetch('mocked motd', 'yesterday')
-    window.localStorage.setItem('motd.lastModified', 'yesterday')
-    const result = fetchMotd()
-    await expect(result).resolves.toStrictEqual(undefined)
-  })
-
   it('can detect that the motd has been updated', async () => {
     mockFetch('mocked motd', 'yesterday')
     window.localStorage.setItem('motd.lastModified', 'the day before yesterday')
-    const result = fetchMotd()
+    const result = fetchMotd(baseUrl)
     await expect(result).resolves.toStrictEqual({
       motdText: 'mocked motd',
       lastModified: 'yesterday'
@@ -116,14 +107,14 @@ describe('fetch motd', () => {
 
   it("won't fetch a motd if no file was found", async () => {
     mockFileNotFoundFetch()
-    const result = fetchMotd()
+    const result = fetchMotd(baseUrl)
     await expect(result).resolves.toStrictEqual(undefined)
   })
 
   it("won't fetch a motd update if no file was found", async () => {
     mockFileNotFoundFetch()
     window.localStorage.setItem('motd.lastModified', 'the day before yesterday')
-    const result = fetchMotd()
+    const result = fetchMotd(baseUrl)
     await expect(result).resolves.toStrictEqual(undefined)
   })
 })

frontend/src/components/global-dialogs/motd-modal/fetch-motd.ts

@@ -4,14 +4,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { defaultConfig } from '../../../api/common/default-config'
-import { Logger } from '../../../utils/logger'
 
 export const MOTD_LOCAL_STORAGE_KEY = 'motd.lastModified'
-const log = new Logger('Motd')
 
 export interface MotdApiResponse {
   motdText: string
-  lastModified: string | null
+  lastModified: string
 }
 
 /**
@@ -21,36 +19,23 @@ export interface MotdApiResponse {
  * will be compared to the saved value from the browser's local storage.
  * @return A promise that gets resolved if the motd was fetched successfully.
  */
-export const fetchMotd = async (): Promise<MotdApiResponse | undefined> => {
-  const cachedLastModified = window.localStorage.getItem(MOTD_LOCAL_STORAGE_KEY)
-  const motdUrl = `/public/motd.md`
-
-  if (cachedLastModified) {
-    const response = await fetch(motdUrl, {
-      ...defaultConfig,
-      method: 'HEAD'
-    })
-    if (response.status !== 200) {
-      return undefined
-    }
-    const lastModified = response.headers.get('Last-Modified') || response.headers.get('etag')
-    if (lastModified === cachedLastModified) {
-      return undefined
-    }
-  }
-
+export const fetchMotd = async (baseUrl: string): Promise<MotdApiResponse | undefined> => {
+  const motdUrl = `${baseUrl}public/motd.md`
   const response = await fetch(motdUrl, {
     ...defaultConfig
   })
 
   if (response.status !== 200) {
-    return undefined
+    return
   }
 
   const lastModified = response.headers.get('Last-Modified') || response.headers.get('etag')
-  if (!lastModified) {
-    log.warn("'Last-Modified' or 'Etag' not found for motd.md!")
+  if (lastModified === null) {
+    return
   }
 
-  return { motdText: await response.text(), lastModified }
+  return {
+    lastModified,
+    motdText: await response.text()
+  }
 }

frontend/src/components/global-dialogs/motd-modal/motd-modal.spec.tsx

@@ -9,13 +9,12 @@ import { testId } from '../../../utils/test-id'
 import type { CommonModalProps } from '../../common/modals/common-modal'
 import * as CommonModalModule from '../../common/modals/common-modal'
 import * as RendererIframeModule from '../../common/renderer-iframe/renderer-iframe'
-import * as fetchMotdModule from './fetch-motd'
-import { MotdModal } from './motd-modal'
 import { act, render, screen } from '@testing-library/react'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
+import { CachedMotdModal } from './cached-motd-modal'
+import { MotdProvider } from '../../motd/motd-context'
 
-jest.mock('./fetch-motd')
 jest.mock('../../common/modals/common-modal')
 jest.mock('../../common/renderer-iframe/renderer-iframe')
 jest.mock('../../../hooks/common/use-base-url')
@@ -49,13 +48,15 @@ describe('motd modal', () => {
   })
 
   it('renders a modal if a motd was fetched and can dismiss it', async () => {
-    jest.spyOn(fetchMotdModule, 'fetchMotd').mockImplementation(() => {
-      return Promise.resolve({
-        motdText: 'very important mock text!',
-        lastModified: 'yesterday'
-      })
-    })
-    const view = render(<MotdModal></MotdModal>)
+    const motd = {
+      motdText: 'very important mock text!',
+      lastModified: 'yesterday'
+    }
+    const view = render(
+      <MotdProvider motd={motd}>
+        <CachedMotdModal></CachedMotdModal>
+      </MotdProvider>
+    )
     await screen.findByTestId('motd-renderer')
     expect(view.container).toMatchSnapshot()
 
@@ -67,10 +68,11 @@ describe('motd modal', () => {
   })
 
   it("doesn't render a modal if no motd has been fetched", async () => {
-    jest.spyOn(fetchMotdModule, 'fetchMotd').mockImplementation(() => {
-      return Promise.resolve(undefined)
-    })
-    const view = render(<MotdModal></MotdModal>)
+    const view = render(
+      <MotdProvider motd={undefined}>
+        <CachedMotdModal></CachedMotdModal>
+      </MotdProvider>
+    )
     await screen.findByTestId('loaded not visible')
     expect(view.container).toMatchSnapshot()
   })

frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx

@@ -5,55 +5,41 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { cypressId } from '../../../utils/cypress-attribute'
-import { Logger } from '../../../utils/logger'
 import { testId } from '../../../utils/test-id'
 import { CommonModal } from '../../common/modals/common-modal'
 import { RendererIframe } from '../../common/renderer-iframe/renderer-iframe'
 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 { fetchMotd, MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { useAsync } from 'react-use'
+import { useMotdContextValue } from '../../motd/motd-context'
 
-const logger = new Logger('Motd')
+export interface MotdModalProps {
+  show: boolean
+  onDismiss?: () => void
+}
 
 /**
- * Reads the motd from the global application state and shows it in a modal.
- * If the modal gets dismissed by the user then the "last modified" identifier will be written into the local storage
- * to prevent that the motd will be shown again until it gets changed.
+ * Shows the MotD that is provided via context.
+ *
+ * @param show defines if the modal should be shown
+ * @param onDismiss callback that is executed if the modal is dismissed
  */
-export const MotdModal: React.FC = () => {
+export const MotdModal: React.FC<MotdModalProps> = ({ show, onDismiss }) => {
   useTranslation()
+  const contextValue = useMotdContextValue()
 
-  const { error, loading, value } = useAsync(fetchMotd)
-  const [dismissed, setDismissed] = useState(false)
-
-  const lines = useMemo(() => value?.motdText.split('\n') ?? [], [value?.motdText])
-
-  const dismiss = useCallback(() => {
-    if (value?.lastModified) {
-      window.localStorage.setItem(MOTD_LOCAL_STORAGE_KEY, value.lastModified)
+  const lines = useMemo(() => {
+    const rawLines = contextValue?.motdText.split('\n')
+    if (rawLines === undefined || rawLines.length === 0 || !show) {
+      return []
     }
-    setDismissed(true)
-  }, [value])
-
-  useEffect(() => {
-    if (error) {
-      logger.error('Error while fetching motd', error)
-    }
-  }, [error])
-
-  if (process.env.NODE_ENV === 'test' && !loading && !value) {
-    return <span {...testId('loaded not visible')}></span>
-  }
+    return rawLines
+  }, [contextValue?.motdText, show])
 
   return (
-    <CommonModal
-      show={lines.length > 0 && !loading && !error && !dismissed}
-      titleI18nKey={'motd.title'}
-      {...cypressId('motd-modal')}>
+    <CommonModal show={lines.length > 0} titleI18nKey={'motd.title'} onHide={onDismiss} {...cypressId('motd-modal')}>
       <Modal.Body>
         <EditorToRendererCommunicatorContextProvider>
           <RendererIframe
@@ -66,7 +52,7 @@ export const MotdModal: React.FC = () => {
         </EditorToRendererCommunicatorContextProvider>
       </Modal.Body>
       <Modal.Footer>
-        <Button variant={'success'} onClick={dismiss} {...testId('motd-dismiss')} {...cypressId('motd-dismiss')}>
+        <Button variant={'success'} onClick={onDismiss} {...testId('motd-dismiss')} {...cypressId('motd-dismiss')}>
           <Trans i18nKey={'common.dismiss'} />
         </Button>
       </Modal.Footer>