From 472e775fd241dedca7e23ca9bec8e8a86d26dbc6 Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Sat, 13 May 2023 14:42:18 +0200
Subject: [PATCH] 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>
---
 .../new-note-button/new-note-button.tsx       | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/new-note-button/new-note-button.tsx b/frontend/src/components/common/new-note-button/new-note-button.tsx
index 24f58b7b8..202719aa3 100644
--- a/frontend/src/components/common/new-note-button/new-note-button.tsx
+++ b/frontend/src/components/common/new-note-button/new-note-button.tsx
@@ -3,10 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { createNote } from '../../../api/notes'
 import { cypressId } from '../../../utils/cypress-attribute'
+import { useUiNotifications } from '../../notifications/ui-notification-boundary'
 import { IconButton } from '../icon-button/icon-button'
-import Link from 'next/link'
-import React from 'react'
+import { useRouter } from 'next/router'
+import React, { useCallback } from 'react'
 import { FileEarmarkPlus as IconPlus } from 'react-bootstrap-icons'
 import { Trans } from 'react-i18next'
 
@@ -14,11 +16,27 @@ import { Trans } from 'react-i18next'
  * Links to the "new note" endpoint
  */
 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 (
-    <Link href={'/new'} passHref={true}>
-      <IconButton {...cypressId('new-note-button')} iconSize={1.5} size={'sm'} icon={IconPlus}>
-        <Trans i18nKey='navigation.newNote' />
-      </IconButton>
-    </Link>
+    <IconButton
+      {...cypressId('new-note-button')}
+      iconSize={1.5}
+      size={'sm'}
+      icon={IconPlus}
+      onClick={createNewNoteAndRedirect}>
+      <Trans i18nKey='navigation.newNote' />
+    </IconButton>
   )
 }