mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-28 22:15:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add application state hook (#1308)

Browse source 
* Add application state hook

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add docs

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-06-11 15:21:24 +02:00 • committed by GitHub
parent 4720f2d36b
commit 829cc2fe48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 149 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/common/branding/branding.tsx
View file

@ -4,12 +4,10 @@
SPDX-License-Identifier: AGPL-3.0-only
*/
import equal from 'fast-deep-equal'
import React from 'react'
import { useSelector } from 'react-redux'
import { ApplicationState } from '../../../redux'
import React, { useMemo } from 'react'
import { ShowIf } from '../show-if/show-if'
import './branding.scss'
import { useApplicationState } from '../../../hooks/common/use-application-state'
export interface BrandingProps {
inline?: boolean
@ -17,24 +15,30 @@ export interface BrandingProps {
}
export const Branding: React.FC<BrandingProps> = ({ inline = false, delimiter = true }) => {
const branding = useSelector((state: ApplicationState) => state.config.branding, equal)
const branding = useApplicationState((state) => state.config.branding)
const showBranding = !!branding.name || !!branding.logo
return (
<ShowIf condition={showBranding}>
<ShowIf condition={delimiter}>
<strong className={`mx-1 ${inline ? 'inline-size' : 'regular-size'}`}>@</strong>
</ShowIf>
{branding.logo ? (
const brandingDom = useMemo(() => {
if (branding.logo) {
return (
<img
src={branding.logo}
alt={branding.name}
title={branding.name}
className={inline ? 'inline-size' : 'regular-size'}
/>
) : (
branding.name
)}
)
} else {
return branding.name
}
}, [branding.logo, branding.name, inline])
return (
<ShowIf condition={showBranding}>
<ShowIf condition={delimiter}>
<strong className={`mx-1 ${inline ? 'inline-size' : 'regular-size'}`}>@</strong>
</ShowIf>
{brandingDom}
</ShowIf>
)
}

6
src/components/common/motd-banner/motd-banner.tsx
View file

@ -4,17 +4,15 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import equal from 'fast-deep-equal'
import React, { useCallback } from 'react'
import { Alert, Button } from 'react-bootstrap'
import { useSelector } from 'react-redux'
import { ApplicationState } from '../../../redux'
import { setBanner } from '../../../redux/banner/methods'
import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
import { BANNER_LOCAL_STORAGE_KEY } from '../../application-loader/initializers/fetch-and-set-banner'
import { useApplicationState } from '../../../hooks/common/use-application-state'
export const MotdBanner: React.FC = () => {
const bannerState = useSelector((state: ApplicationState) => state.banner, equal)
const bannerState = useApplicationState((state) => state.banner)
const dismissBanner = useCallback(() => {
if (bannerState.lastModified) {