diff --git a/locales/en.json b/locales/en.json index 64cf73869..213b3bc29 100644 --- a/locales/en.json +++ b/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": { diff --git a/src/components/common/note-loading-boundary/__snapshots__/create-non-existing-note-hint.test.tsx.snap b/src/components/common/note-loading-boundary/__snapshots__/create-non-existing-note-hint.test.tsx.snap index 2159a9540..f3b236049 100644 --- a/src/components/common/note-loading-boundary/__snapshots__/create-non-existing-note-hint.test.tsx.snap +++ b/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`] = `
- - Redirecting to - - - /n/mockedPrimaryAlias - - + + noteLoadingBoundary.createNote.success +
`; diff --git a/src/components/common/note-loading-boundary/create-non-existing-note-hint.test.tsx b/src/components/common/note-loading-boundary/create-non-existing-note-hint.test.tsx index 49c0e7feb..5774f05de 100644 --- a/src/components/common/note-loading-boundary/create-non-existing-note-hint.test.tsx +++ b/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() + const onNoteCreatedCallback = jest.fn() + const view = render() 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() + const onNoteCreatedCallback = jest.fn() + const view = render() 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() + const onNoteCreatedCallback = jest.fn() + const view = render() 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() + const onNoteCreatedCallback = jest.fn() + const view = render() const button = await screen.findByTestId('createNoteButton') act(() => { button.click() }) await screen.findByTestId('failedMessage') + expect(onNoteCreatedCallback).not.toBeCalled() expect(view.container).toMatchSnapshot() }) }) diff --git a/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx b/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx index ef33b96d0..e5af6358f 100644 --- a/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx +++ b/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 = ({ 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 + return ( + + + + + ) } else if (returnState.loading) { return ( diff --git a/src/components/common/note-loading-boundary/hooks/use-load-note-from-server.ts b/src/components/common/note-loading-boundary/hooks/use-load-note-from-server.ts index 1b84b04ba..76a4d1c16 100644 --- a/src/components/common/note-loading-boundary/hooks/use-load-note-from-server.ts +++ b/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 => { +export const useLoadNoteFromServer = (): [AsyncState, () => void] => { const id = useSingleStringUrlParameter('noteId', undefined) - return useAsync(async () => { + return useAsyncFn(async () => { if (id === undefined) { throw new Error('Invalid id') } diff --git a/src/components/common/note-loading-boundary/note-loading-boundary.tsx b/src/components/common/note-loading-boundary/note-loading-boundary.tsx index c0eece89f..c23442774 100644 --- a/src/components/common/note-loading-boundary/note-loading-boundary.tsx +++ b/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> = ({ children }) => { - const { error, loading } = useLoadNoteFromServer() + const [{ error, loading }, loadNoteFromServer] = useLoadNoteFromServer() + + useEffect(() => { + loadNoteFromServer() + }, [loadNoteFromServer]) if (loading) { return @@ -28,7 +32,7 @@ export const NoteLoadingBoundary: React.FC> = ({ chil return ( - + )