Rework notifications (#1465)

* Rework notifications

- dispatchUINotification returns a promise that contains the notification id
- notifications use i18n instead of plain text

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

* Reformat code

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

src/components/editor-page/editor-pane/autocompletion/code-block.ts

@@ -6,8 +6,7 @@
 
 import { Editor, Hint, Hints, Pos } from 'codemirror'
 import { findWordAtCursor, generateHintListByPrefix, Hinter } from './index'
-import { DEFAULT_DURATION_IN_SECONDS, dispatchUiNotification } from '../../../../redux/ui-notifications/methods'
-import i18n from 'i18next'
+import { showErrorNotification } from '../../../../redux/ui-notifications/methods'
 
 type highlightJsImport = typeof import('../../../common/hljs/hljs')
 
@@ -22,12 +21,7 @@ const loadHighlightJs = async (): Promise<highlightJsImport | null> => {
   try {
     return await import('../../../common/hljs/hljs')
   } catch (error) {
-    dispatchUiNotification(
-      i18n.t('common.errorOccurred'),
-      i18n.t('common.errorWhileLoadingLibrary', { name: 'highlight.js' }),
-      DEFAULT_DURATION_IN_SECONDS,
-      'exclamation-circle'
-    )
+    showErrorNotification('common.errorWhileLoadingLibrary', { name: 'highlight.js' })(error as Error)
     console.error("can't load highlight js", error)
     return null
   }

src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx

@@ -15,7 +15,7 @@ import { showErrorNotification } from '../../../redux/ui-notifications/methods'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 
 export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
-  const { t } = useTranslation()
+  useTranslation()
   const { id } = useParams<EditorPagePathParams>()
   const history = useApplicationState((state) => state.history)
 
@@ -28,8 +28,8 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
   }, [id, history])
 
   const onPinClicked = useCallback(() => {
-    toggleHistoryEntryPinning(id).catch(showErrorNotification(t('landing.history.error.updateEntry.text')))
-  }, [id, t])
+    toggleHistoryEntryPinning(id).catch(showErrorNotification('landing.history.error.updateEntry.text'))
+  }, [id])
 
   return (
     <SidebarButton

src/components/editor-page/use-notification-test.tsx

@@ -5,23 +5,29 @@
  */
 
 import { useEffect } from 'react'
-import { DEFAULT_DURATION_IN_SECONDS, dispatchUiNotification } from '../../redux/ui-notifications/methods'
+import { dispatchUiNotification } from '../../redux/ui-notifications/methods'
 
 const localStorageKey = 'dontshowtestnotification'
 
+/**
+ * Spawns a notification to test the system. Only for tech demo show case.
+ */
 export const useNotificationTest = (): void => {
   useEffect(() => {
     if (window.localStorage.getItem(localStorageKey)) {
       return
     }
     console.debug('[Notifications] Dispatched test notification')
-    dispatchUiNotification('Notification-Test!', 'It Works!', DEFAULT_DURATION_IN_SECONDS, 'info-circle', [
-      {
-        label: "Don't show again",
-        onClick: () => {
-          window.localStorage.setItem(localStorageKey, '1')
+    void dispatchUiNotification('notificationTest.title', 'notificationTest.content', {
+      icon: 'info-circle',
+      buttons: [
+        {
+          label: "Don't show again",
+          onClick: () => {
+            window.localStorage.setItem(localStorageKey, '1')
+          }
         }
-      }
-    ])
+      ]
+    })
   }, [])
 }