Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Fixed announcement bar close button state (#16699)

Browse source 
refs TryGhost/Team#3095

We should show the announcement bar again in the following case:

- User closes the bar
- Publisher updates announcement content
- We show the bar again even if the user closed it previously in the
same session
This commit is contained in:
Elena Baidakova 2023-04-21 16:58:41 +04:00 • committed by GitHub
parent 1538b18d4e
commit bef618c975
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
ghost/announcement-bar/src/components/AnnouncementBar.js
View file

@ -3,26 +3,36 @@ import React from 'react';
import './AnnouncementBar.css';
import {ReactComponent as CloseIcon} from '../icons/clear.svg';
export function AnnouncementBar({settings}) {
const [visible, setVisible] = React.useState(isBarVisible());
export function AnnouncementBar({settings = {}}) {
const [visible, setVisible] = React.useState(shouldShowBar(settings.announcement));
React.useEffect(() => {
if (!settings.announcement) {
return;
}
if (shouldShowBar(settings.announcement)) {
setVisible(true);
}
}, [settings.announcement]);
const handleButtonClick = () => {
setBarVisibility();
setVisible(false);
setBarVisibility(false);
};
if (!visible) {
return null;
}
if (!settings?.announcement) {
if (!settings.announcement) {
return null;
}
let className = 'gh-announcement-bar ' + settings?.announcement_background;
let className = 'gh-announcement-bar ' + settings.announcement_background;
return (
<div className={className}>
<div className="gh-announcement-bar-content" dangerouslySetInnerHTML={{__html: settings?.announcement}}></div>
<div className="gh-announcement-bar-content" dangerouslySetInnerHTML={{__html: settings.announcement}}></div>
<button onClick={handleButtonClick}>
<CloseIcon />
</button>
@ -30,11 +40,43 @@ export function AnnouncementBar({settings}) {
);
}
const BAR_STORAGE_KEY = 'isAnnouncementBarVisible';
function setBarVisibility(state = 'true') {
sessionStorage.setItem(BAR_STORAGE_KEY, state);
const BAR_VISIBILITY_STORAGE_KEY = 'isAnnouncementBarVisible';
const BAR_CONTENT_STORAGE_KEY = 'announcementBarContent';
function shouldShowBar(content) {
const contentChanged = isContentChanged(content);
if (contentChanged) {
setBarVisibility(true);
setContent(content);
return true;
}
function isBarVisible() {
return !sessionStorage.getItem(BAR_STORAGE_KEY);
const isBarVisible = getBarVisibility();
return !!isBarVisible;
}
function setContent(content) {
sessionStorage.setItem(BAR_CONTENT_STORAGE_KEY, content);
}
function isContentChanged(content) {
if (!content) {
return false;
}
const prevContent = sessionStorage.getItem(BAR_CONTENT_STORAGE_KEY);
return content !== prevContent;
}
function setBarVisibility(state) {
if (state) {
sessionStorage.setItem(BAR_VISIBILITY_STORAGE_KEY, state);
} else {
sessionStorage.removeItem(BAR_VISIBILITY_STORAGE_KEY);
}
}
function getBarVisibility() {
return sessionStorage.getItem(BAR_VISIBILITY_STORAGE_KEY);
}