mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-17 16:44:49 -04:00
e014eb36b5
* 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>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
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>
|
|
)
|
|
}
|