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>

public/api/v2/config

@@ -13,6 +13,10 @@
     "email": true,
     "openid": true
   },
+  "banner": {
+      "text": "This is the test banner text",
+      "timestamp": "2020-05-22T20:46:08.962Z"
+  },
   "customAuthNames": {
     "ldap": "FooBar",
     "oauth2": "Olaf2",

public/api/v2/notes/banner

@@ -0,0 +1,14 @@
+{
+    "id": "ABC123",
+    "alias": "banner",
+    "lastChange": {
+        "userId": "snskxnksnxksnxksnx",
+        "username": "testy",
+        "timestamp": 123456789
+    },
+    "viewcount": 0,
+    "createtime": "2020-05-22T20:46:08.962Z",
+    "content": "This is the test banner text",
+    "authorship": [],
+    "preVersionTwoNote": true
+}

public/api/v2/notes/old

@@ -10,5 +10,5 @@
     "createtime": "2020-05-22T20:46:08.962Z",
     "content": "test123",
     "authorship": [],
-    "preVersionTwoNote": true
+    "preVersionTwoNote": false
 }

src/api/backend-config/types.ts

@@ -1,11 +1,17 @@
 export interface BackendConfig {
   allowAnonymous: boolean,
   authProviders: AuthProvidersState,
+  banner: BannerConfig,
   customAuthNames: CustomAuthNames,
   specialLinks: SpecialLinks,
   version: BackendVersion,
 }
 
+export interface BannerConfig {
+  text: string
+  timestamp: string
+}
+
 export interface BackendVersion {
   version: string,
   sourceCodeUrl: string

src/components/application-loader/initializers/configLoader.ts

@@ -1,6 +1,7 @@
 import { getBackendConfig } from '../../../api/backend-config'
 import { getFrontendConfig } from '../../../api/frontend-config'
 import { setBackendConfig } from '../../../redux/backend-config/methods'
+import { setBanner } from '../../../redux/banner/methods'
 import { setFrontendConfig } from '../../../redux/frontend-config/methods'
 import { getAndSetUser } from '../../../utils/apiUtils'
 
@@ -17,5 +18,14 @@ export const loadAllConfig: (baseUrl: string) => Promise<void> = async (baseUrl)
   }
   setBackendConfig(backendConfig)
 
+  const banner = backendConfig.banner
+  if (banner.text !== '') {
+    const lastAcknowledgedTimestamp = window.localStorage.getItem('bannerTimeStamp') || ''
+    setBanner({
+      ...banner,
+      show: banner.text !== '' && banner.timestamp !== lastAcknowledgedTimestamp
+    })
+  }
+
   await getAndSetUser()
 }

src/components/editor/editor.tsx

@@ -1,18 +1,15 @@
-import React, { useEffect, useState } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import useMedia from 'use-media'
 import { ApplicationState } from '../../redux'
 import { setEditorModeConfig } from '../../redux/editor/methods'
 import { Splitter } from '../common/splitter/splitter'
+import { InfoBanner } from '../landing/layout/info-banner'
 import { EditorWindow } from './editor-window/editor-window'
 import { MarkdownPreview } from './markdown-preview/markdown-preview'
 import { EditorMode } from './task-bar/editor-view-mode'
 import { TaskBar } from './task-bar/task-bar'
 
-interface RouteParameters {
-  id: string
-}
-
 const Editor: React.FC = () => {
   const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
   const isWide = useMedia({ minWidth: 576 })
@@ -29,15 +26,18 @@ const Editor: React.FC = () => {
   }, [editorMode, firstDraw, isWide])
 
   return (
-    <div className={'d-flex flex-column vh-100'}>
-      <TaskBar/>
-      <Splitter
-        showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
-        left={<EditorWindow/>}
-        showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
-        right={<MarkdownPreview/>}
-        containerClassName={'overflow-hidden'}/>
-    </div>
+    <Fragment>
+      <InfoBanner/>
+      <div className={'d-flex flex-column vh-100'}>
+        <TaskBar/>
+        <Splitter
+          showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
+          left={<EditorWindow/>}
+          showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
+          right={<MarkdownPreview/>}
+          containerClassName={'overflow-hidden'}/>
+      </div>
+    </Fragment>
   )
 }
 

src/components/landing/landing-layout.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { Container } from 'react-bootstrap'
 import { Footer } from './layout/footer/footer'
+import { InfoBanner } from './layout/info-banner'
 import { HeaderBar } from './layout/navigation/header-bar/header-bar'
 
 export const LandingLayout: React.FC = ({ children }) => {
   return (
     <Container className="text-white d-flex flex-column mvh-100">
+      <InfoBanner/>
       <HeaderBar/>
       <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
         <div>

src/components/landing/layout/info-banner.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { ApplicationState } from '../../../redux'
+import { Alert, Button } from 'react-bootstrap'
+import { setBanner } from '../../../redux/banner/methods'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../../common/show-if/show-if'
+
+export const InfoBanner: React.FC = () => {
+  const bannerState = useSelector((state: ApplicationState) => state.banner)
+
+  const dismissBanner = () => {
+    setBanner({ ...bannerState, show: false })
+    window.localStorage.setItem('bannerTimeStamp', bannerState.timestamp)
+  }
+
+  return (
+    <ShowIf condition={bannerState.show}>
+      <Alert variant='primary' dir='auto' className='mb-0 text-center d-flex flex-row justify-content-center'>
+        <Link to='/s/banner' className='flex-grow-1 align-self-center'>
+          {bannerState.text}
+        </Link>
+        <Button
+          variant='outline-primary'
+          size='sm'
+          className='mx-2'
+          onClick={dismissBanner}>
+          <ForkAwesomeIcon icon='times'/>
+        </Button>
+      </Alert>
+    </ShowIf>
+  )
+}

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
 })