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