fix(frontend): new note button doesn't use /new anymore

This led to problems, if user clicked the back button in their browser. This implementation doesn't add functional routes in between new notes, but pushes the new note directly in the history.

Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2023-05-13 14:42:18 +02:00 committed by Tilman Vatteroth
parent eb4c531983
commit 472e775fd2

View file

@ -3,10 +3,12 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { createNote } from '../../../api/notes'
import { cypressId } from '../../../utils/cypress-attribute' import { cypressId } from '../../../utils/cypress-attribute'
import { useUiNotifications } from '../../notifications/ui-notification-boundary'
import { IconButton } from '../icon-button/icon-button' import { IconButton } from '../icon-button/icon-button'
import Link from 'next/link' import { useRouter } from 'next/router'
import React from 'react' import React, { useCallback } from 'react'
import { FileEarmarkPlus as IconPlus } from 'react-bootstrap-icons' import { FileEarmarkPlus as IconPlus } from 'react-bootstrap-icons'
import { Trans } from 'react-i18next' import { Trans } from 'react-i18next'
@ -14,11 +16,27 @@ import { Trans } from 'react-i18next'
* Links to the "new note" endpoint * Links to the "new note" endpoint
*/ */
export const NewNoteButton: React.FC = () => { export const NewNoteButton: React.FC = () => {
const { showErrorNotification } = useUiNotifications()
const router = useRouter()
const createNewNoteAndRedirect = useCallback((): void => {
createNote('')
.then((note) => {
const to = `/n/${note.metadata.primaryAddress}`
return router?.push(to)
})
.catch((error: Error) => {
showErrorNotification(error.message)
})
}, [router, showErrorNotification])
return ( return (
<Link href={'/new'} passHref={true}> <IconButton
<IconButton {...cypressId('new-note-button')} iconSize={1.5} size={'sm'} icon={IconPlus}> {...cypressId('new-note-button')}
iconSize={1.5}
size={'sm'}
icon={IconPlus}
onClick={createNewNoteAndRedirect}>
<Trans i18nKey='navigation.newNote' /> <Trans i18nKey='navigation.newNote' />
</IconButton> </IconButton>
</Link>
) )
} }