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>
This commit is contained in:
Philip Molares 2020-06-15 21:54:20 +02:00 committed by GitHub
parent 75aa8b38af
commit e014eb36b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 144 additions and 15 deletions

View file

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

View file

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

19
src/redux/banner/types.ts Normal file
View file

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