Note Loading Boundary: Replace redirect with refetch from API (#2275)

locales/en.json

@@ -42,7 +42,8 @@
       "question": "Do you want to create a note with alias '{{aliasName}}'?",
       "create": "Create note",
       "creating": "Creating note...",
-      "error": "Note couldn't be created."
+      "error": "Note couldn't be created.",
+      "success": "Note has been created."
     }
   },
   "api": {

src/components/common/note-loading-boundary/__snapshots__/create-non-existing-note-hint.test.tsx.snap

@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`create non existing note hint redirects when the note has been created 1`] = `
+exports[`create non existing note hint shows success message when the note has been created 1`] = `
 <div>
-  <span
+  <div
-    data-testid="redirect"
+    class="fade mt-5 alert alert-info show"
+    data-testid="noteCreated"
+    role="alert"
   >
-    Redirecting to
+    <i
-     
+      class="fa  fa-check-circle mr-2 "
-    <a
+    />
-      href="/n/mockedPrimaryAlias"
+    noteLoadingBoundary.createNote.success
-    >
+  </div>
-      /n/mockedPrimaryAlias
-    </a>
-  </span>
 </div>
 `;
 

src/components/common/note-loading-boundary/create-non-existing-note-hint.test.tsx

@@ -62,41 +62,49 @@ describe('create non existing note hint', () => {
 
   it('renders an button as initial state', async () => {
     mockCreateNoteWithPrimaryAlias()
-    const view = render(<CreateNonExistingNoteHint></CreateNonExistingNoteHint>)
+    const onNoteCreatedCallback = jest.fn()
+    const view = render(<CreateNonExistingNoteHint onNoteCreated={onNoteCreatedCallback}></CreateNonExistingNoteHint>)
     await screen.findByTestId('createNoteMessage')
+    expect(onNoteCreatedCallback).not.toBeCalled()
     expect(view.container).toMatchSnapshot()
   })
 
   it('renders a waiting message when button is clicked', async () => {
     mockCreateNoteWithPrimaryAlias()
-    const view = render(<CreateNonExistingNoteHint></CreateNonExistingNoteHint>)
+    const onNoteCreatedCallback = jest.fn()
+    const view = render(<CreateNonExistingNoteHint onNoteCreated={onNoteCreatedCallback}></CreateNonExistingNoteHint>)
     const button = await screen.findByTestId('createNoteButton')
     act(() => {
       button.click()
     })
     await screen.findByTestId('loadingMessage')
+    expect(onNoteCreatedCallback).not.toBeCalled()
     expect(view.container).toMatchSnapshot()
   })
 
-  it('redirects when the note has been created', async () => {
+  it('shows success message when the note has been created', async () => {
     mockCreateNoteWithPrimaryAlias()
-    const view = render(<CreateNonExistingNoteHint></CreateNonExistingNoteHint>)
+    const onNoteCreatedCallback = jest.fn()
+    const view = render(<CreateNonExistingNoteHint onNoteCreated={onNoteCreatedCallback}></CreateNonExistingNoteHint>)
     const button = await screen.findByTestId('createNoteButton')
     act(() => {
       button.click()
     })
-    await screen.findByTestId('redirect')
+    await screen.findByTestId('noteCreated')
+    expect(onNoteCreatedCallback).toBeCalled()
     expect(view.container).toMatchSnapshot()
   })
 
   it("shows an error message if note couldn't be created", async () => {
     mockFailingCreateNoteWithPrimaryAlias()
-    const view = render(<CreateNonExistingNoteHint></CreateNonExistingNoteHint>)
+    const onNoteCreatedCallback = jest.fn()
+    const view = render(<CreateNonExistingNoteHint onNoteCreated={onNoteCreatedCallback}></CreateNonExistingNoteHint>)
     const button = await screen.findByTestId('createNoteButton')
     act(() => {
       button.click()
     })
     await screen.findByTestId('failedMessage')
+    expect(onNoteCreatedCallback).not.toBeCalled()
     expect(view.container).toMatchSnapshot()
   })
 })

src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx

@@ -5,21 +5,24 @@
  */
 
 import { Trans, useTranslation } from 'react-i18next'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { Alert, Button } from 'react-bootstrap'
 import { useSingleStringUrlParameter } from '../../../hooks/common/use-single-string-url-parameter'
 import { createNoteWithPrimaryAlias } from '../../../api/notes'
 import { useAsyncFn } from 'react-use'
 import { ShowIf } from '../show-if/show-if'
-import { Redirect } from '../redirect'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import { testId } from '../../../utils/test-id'
 
+export interface CreateNonExistingNoteHintProps {
+  onNoteCreated: () => void
+}
+
 /**
  * Shows a button that creates an empty note with the alias from the current window URL.
  * When the button was clicked it also shows the progress.
  */
-export const CreateNonExistingNoteHint: React.FC = () => {
+export const CreateNonExistingNoteHint: React.FC<CreateNonExistingNoteHintProps> = ({ onNoteCreated }) => {
   useTranslation()
   const noteIdFromUrl = useSingleStringUrlParameter('noteId', undefined)
 
@@ -34,10 +37,21 @@ export const CreateNonExistingNoteHint: React.FC = () => {
     void createNote()
   }, [createNote])
 
+  useEffect(() => {
+    if (returnState.value !== undefined) {
+      onNoteCreated()
+    }
+  }, [onNoteCreated, returnState.value])
+
   if (noteIdFromUrl === undefined) {
     return null
   } else if (returnState.value) {
-    return <Redirect to={`/n/${returnState.value.metadata.primaryAddress}`} />
+    return (
+      <Alert variant={'info'} {...testId('noteCreated')} className={'mt-5'}>
+        <ForkAwesomeIcon icon={'check-circle'} className={'mr-2'} />
+        <Trans i18nKey={'noteLoadingBoundary.createNote.success'} />
+      </Alert>
+    )
   } else if (returnState.loading) {
     return (
       <Alert variant={'info'} {...testId('loadingMessage')} className={'mt-5'}>

src/components/common/note-loading-boundary/hooks/use-load-note-from-server.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { useAsync } from 'react-use'
+import { useAsyncFn } from 'react-use'
 import { getNote } from '../../../../api/notes'
 import { setNoteDataFromServer } from '../../../../redux/note-details/methods'
 import { useSingleStringUrlParameter } from '../../../../hooks/common/use-single-string-url-parameter'
@@ -15,10 +15,10 @@ import type { AsyncState } from 'react-use/lib/useAsyncFn'
  *
  * @return An {@link AsyncState async state} that represents the current state of the loading process.
  */
-export const useLoadNoteFromServer = (): AsyncState<void> => {
+export const useLoadNoteFromServer = (): [AsyncState<void>, () => void] => {
   const id = useSingleStringUrlParameter('noteId', undefined)
 
-  return useAsync(async () => {
+  return useAsyncFn(async () => {
     if (id === undefined) {
       throw new Error('Invalid id')
     }

src/components/common/note-loading-boundary/note-loading-boundary.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { PropsWithChildren } from 'react'
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { useLoadNoteFromServer } from './hooks/use-load-note-from-server'
 import { LoadingScreen } from '../../application-loader/loading-screen/loading-screen'
 import { CommonErrorPage } from '../../error-pages/common-error-page'
@@ -20,7 +20,11 @@ import { ShowIf } from '../show-if/show-if'
  * @param children The react elements that will be shown when the loading was successful.
  */
 export const NoteLoadingBoundary: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
-  const { error, loading } = useLoadNoteFromServer()
+  const [{ error, loading }, loadNoteFromServer] = useLoadNoteFromServer()
+
+  useEffect(() => {
+    loadNoteFromServer()
+  }, [loadNoteFromServer])
 
   if (loading) {
     return <LoadingScreen />
@@ -28,7 +32,7 @@ export const NoteLoadingBoundary: React.FC<PropsWithChildren<unknown>> = ({ chil
     return (
       <CommonErrorPage titleI18nKey={`${error.message}.title`} descriptionI18nKey={`${error.message}.description`}>
         <ShowIf condition={error.message === 'api.note.notFound'}>
-          <CreateNonExistingNoteHint />
+          <CreateNonExistingNoteHint onNoteCreated={loadNoteFromServer} />
         </ShowIf>
       </CommonErrorPage>
     )