Add toasts (#1073)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/redux/index.ts

@@ -19,6 +19,8 @@ import { NoteDetailsReducer } from './note-details/reducers'
 import { NoteDetails } from './note-details/types'
 import { UserReducer } from './user/reducers'
 import { MaybeUserState } from './user/types'
+import { UiNotificationState } from './ui-notifications/types'
+import { UiNotificationReducer } from './ui-notifications/reducers'
 
 export interface ApplicationState {
   user: MaybeUserState;
@@ -28,6 +30,7 @@ export interface ApplicationState {
   editorConfig: EditorConfig;
   darkMode: DarkModeConfig;
   noteDetails: NoteDetails;
+  uiNotifications: UiNotificationState;
 }
 
 export const allReducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
@@ -37,7 +40,8 @@ export const allReducers: Reducer<ApplicationState> = combineReducers<Applicatio
   apiUrl: ApiUrlReducer,
   editorConfig: EditorConfigReducer,
   darkMode: DarkModeConfigReducer,
-  noteDetails: NoteDetailsReducer
+  noteDetails: NoteDetailsReducer,
+  uiNotifications: UiNotificationReducer
 })
 
 export const store = createStore(allReducers)

src/redux/ui-notifications/methods.ts

@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { store } from '../index'
+import {
+  DismissUiNotificationAction,
+  DispatchUiNotificationAction,
+  UiNotificationActionType,
+  UiNotificationButton
+} from './types'
+import { DateTime } from 'luxon'
+import { IconName } from '../../components/common/fork-awesome/types'
+
+export const DEFAULT_DURATION_IN_SECONDS = 10
+
+export const dispatchUiNotification = (title: string, content: string, durationInSecond = DEFAULT_DURATION_IN_SECONDS, icon?: IconName, buttons?: UiNotificationButton[]): void => {
+  store.dispatch({
+    type: UiNotificationActionType.DISPATCH_NOTIFICATION,
+    notification: {
+      title,
+      content,
+      date: DateTime.now(),
+      dismissed: false,
+      icon,
+      durationInSecond,
+      buttons: buttons
+    }
+  } as DispatchUiNotificationAction)
+}
+
+export const dismissUiNotification = (notificationId: number): void => {
+  store.dispatch({
+    type: UiNotificationActionType.DISMISS_NOTIFICATION,
+    notificationId
+  } as DismissUiNotificationAction)
+}

src/redux/ui-notifications/reducers.ts

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+
+import { Reducer } from 'redux'
+import {
+  DismissUiNotificationAction,
+  DispatchUiNotificationAction,
+  UiNotificationAction,
+  UiNotificationActionType,
+  UiNotificationState
+} from './types'
+
+export const UiNotificationReducer: Reducer<UiNotificationState, UiNotificationAction> = (state: UiNotificationState = [], action: UiNotificationAction) => {
+  switch (action.type) {
+    case UiNotificationActionType.DISPATCH_NOTIFICATION:
+      return state.concat((action as DispatchUiNotificationAction).notification)
+    case UiNotificationActionType.DISMISS_NOTIFICATION:
+      return dismissNotification(state, (action as DismissUiNotificationAction).notificationId)
+    default:
+      return state
+  }
+}
+
+const dismissNotification = (notificationState: UiNotificationState, notificationIndex: number): UiNotificationState => {
+  const newArray = [...notificationState]
+  const oldNotification = newArray[notificationIndex]
+  newArray[notificationIndex] = {
+    ...oldNotification,
+    dismissed: true
+  }
+  return newArray
+}

src/redux/ui-notifications/types.ts

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Action } from 'redux'
+import { DateTime } from 'luxon'
+import { IconName } from '../../components/common/fork-awesome/types'
+
+export enum UiNotificationActionType {
+  DISPATCH_NOTIFICATION = 'notification/dispatch',
+  DISMISS_NOTIFICATION = 'notification/dismiss'
+}
+
+export interface UiNotificationButton {
+  label: string,
+  onClick: () => void
+}
+
+export interface UiNotification {
+  title: string
+  date: DateTime
+  content: string
+  dismissed: boolean
+  icon?: IconName
+  durationInSecond: number
+  buttons?: UiNotificationButton[]
+}
+
+export interface UiNotificationAction extends Action<UiNotificationActionType> {
+  type: UiNotificationActionType
+}
+
+export interface DispatchUiNotificationAction extends UiNotificationAction {
+  type: UiNotificationActionType.DISPATCH_NOTIFICATION
+  notification: UiNotification
+}
+
+export interface DismissUiNotificationAction extends UiNotificationAction {
+  type: UiNotificationActionType.DISMISS_NOTIFICATION
+  notificationId: number
+}
+
+export type UiNotificationState = UiNotification[]