Adds an info banner to the app (#190)

* added info-banner component to show the banner.text, we got from the backend config. This banner is shown on top of the landing page (intro, history, login/signup and profile) and also on top of the editor and links to `/n/banner`
* added banner to backendConfig Redux state
* added BannerState to the ApplicationState with that the showing of the banner is globally controlled, the banner text is given to the banner component and the timestamp to acknowledge a banner was read by the user
* the timestamp of a dismissed note is saved in the browsers localStorage to determine in the future if the banner should be shown

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

src/redux/backend-config/reducers.ts

@@ -17,6 +17,10 @@ export const initialState: BackendConfig = {
     email: false,
     openid: false
   },
+  banner: {
+    text: '',
+    timestamp: ''
+  },
   customAuthNames: {
     ldap: '',
     oauth2: '',

src/redux/banner/methods.ts

@@ -0,0 +1,10 @@
+import { store } from '../../utils/store'
+import { BannerActionType, BannerState, SetBannerAction } from './types'
+
+export const setBanner = (state: BannerState): void => {
+  const action: SetBannerAction = {
+    type: BannerActionType.SET_BANNER,
+    state
+  }
+  store.dispatch(action)
+}

src/redux/banner/reducers.ts

@@ -0,0 +1,22 @@
+import { Reducer } from 'redux'
+import {
+  BannerActions,
+  BannerActionType,
+  BannerState,
+  SetBannerAction
+} from './types'
+
+export const initialState: BannerState = {
+  show: true,
+  text: '',
+  timestamp: ''
+}
+
+export const BannerReducer: Reducer<BannerState, BannerActions> = (state: BannerState = initialState, action: BannerActions) => {
+  switch (action.type) {
+    case BannerActionType.SET_BANNER:
+      return (action as SetBannerAction).state
+    default:
+      return state
+  }
+}

src/redux/banner/types.ts

@@ -0,0 +1,19 @@
+import { Action } from 'redux'
+
+export enum BannerActionType {
+  SET_BANNER = 'banner/set',
+}
+
+export interface BannerActions extends Action<BannerActionType> {
+  type: BannerActionType;
+}
+
+export interface SetBannerAction extends BannerActions {
+  state: BannerState;
+}
+
+export interface BannerState {
+  show: boolean
+  text: string
+  timestamp: string
+}

src/redux/index.ts

@@ -2,6 +2,8 @@ import { combineReducers, Reducer } from 'redux'
 import { BackendConfig } from '../api/backend-config/types'
 import { FrontendConfig } from '../api/frontend-config/types'
 import { BackendConfigReducer } from './backend-config/reducers'
+import { BannerReducer } from './banner/reducers'
+import { BannerState } from './banner/types'
 import { EditorConfigReducer } from './editor/reducers'
 import { EditorConfig } from './editor/types'
 import { FrontendConfigReducer } from './frontend-config/reducers'
@@ -11,6 +13,7 @@ import { MaybeUserState } from './user/types'
 export interface ApplicationState {
     user: MaybeUserState;
     backendConfig: BackendConfig;
+    banner: BannerState;
     frontendConfig: FrontendConfig;
     editorConfig: EditorConfig;
 }
@@ -18,6 +21,7 @@ export interface ApplicationState {
 export const allReducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
   user: UserReducer,
   backendConfig: BackendConfigReducer,
+  banner: BannerReducer,
   frontendConfig: FrontendConfigReducer,
   editorConfig: EditorConfigReducer
 })