fix(motd): move fetch into component

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

src/components/common/motd-modal/motd-modal.tsx

@@ -1,19 +1,22 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { Suspense, useCallback } from 'react'
+import React, { Suspense, useCallback, useEffect, useState } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { CommonModal } from '../modals/common-modal'
 import { Trans, useTranslation } from 'react-i18next'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import { dismissMotd } from '../../../redux/motd/methods'
-import { cypressId } from '../../../utils/cypress-attribute'
 import { WaitSpinner } from '../wait-spinner/wait-spinner'
+import { fetchMotd, MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
+import { useAsync } from 'react-use'
+import { Logger } from '../../../utils/logger'
+import { testId } from '../../../utils/test-id'
+import { cypressId } from '../../../utils/cypress-attribute'
 
 const MotdRenderer = React.lazy(() => import('./motd-renderer'))
+const logger = new Logger('Motd')
 
 /**
  * Reads the motd from the global application state and shows it in a modal.
@@ -22,31 +25,39 @@ const MotdRenderer = React.lazy(() => import('./motd-renderer'))
  */
 export const MotdModal: React.FC = () => {
   useTranslation()
-  const motdState = useApplicationState((state) => state.motd)
+
+  const { error, loading, value } = useAsync(fetchMotd)
+  const [dismissed, setDismissed] = useState(false)
 
   const dismiss = useCallback(() => {
-    if (!motdState) {
-      return
+    if (value?.lastModified) {
+      window.localStorage.setItem(MOTD_LOCAL_STORAGE_KEY, value.lastModified)
     }
-    dismissMotd()
-  }, [motdState])
+    setDismissed(true)
+  }, [value])
 
-  if (motdState === null || motdState.dismissed) {
-    return null
-  } else {
-    return (
-      <CommonModal {...cypressId('motd')} show={true} title={'motd.title'}>
-        <Modal.Body>
-          <Suspense fallback={<WaitSpinner />}>
-            <MotdRenderer />
-          </Suspense>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant={'success'} onClick={dismiss} {...cypressId('motd-dismiss')}>
-            <Trans i18nKey={'common.dismiss'} />
-          </Button>
-        </Modal.Footer>
-      </CommonModal>
-    )
+  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 (
+    <CommonModal show={!!value && !loading && !error && !dismissed} title={'motd.title'} {...cypressId('motd-modal')}>
+      <Modal.Body>
+        <Suspense fallback={<WaitSpinner />}>
+          <MotdRenderer content={value?.motdText as string} />
+        </Suspense>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant={'success'} onClick={dismiss} {...testId('motd-dismiss')} {...cypressId('motd-dismiss')}>
+          <Trans i18nKey={'common.dismiss'} />
+        </Button>
+      </Modal.Footer>
+    </CommonModal>
+  )
 }