Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Refined newsletter preference update UI

Browse source 
refs https://github.com/TryGhost/Team/issues/1559
This commit is contained in:
Rishabh 2022-05-06 18:59:05 +05:30
parent 160c61e66f
commit e9a282ee43
1 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ghost/portal/src/components/common/NewsletterManagement.js
View file

@ -20,43 +20,52 @@ function AccountHeader() {
);
}
function SuccessIcon({show}) {
if (!show) {
return null;
}
return (
<div style={{marginRight: '4px'}}>
✅
</div>
);
}
function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribedNewsletters}) {
const isChecked = subscribedNewsletters.some((d) => {
return d.id === newsletter?.id;
});
const [description, setDescription] = useState(newsletter?.description || '');
const [showUpdated, setShowUpdated] = useState(false);
const [timeoutId, setTimeoutId] = useState(null);
let finalDescription = description;
if (!description) {
finalDescription = isChecked ? 'Subscribed' : 'Unsubscribed';
}
return (
<section className='gh-portal-list-toggle-wrapper'>
<div className='gh-portal-list-detail'>
<h3>{newsletter.name}</h3>
<p>{finalDescription}</p>
<p>{newsletter?.description}</p>
</div>
<div>
<div style={{display: 'flex', alignItems: 'center'}}>
<SuccessIcon show={showUpdated} />
<Switch id={newsletter.id} onToggle={(e, checked) => {
let updatedNewsletters = [];
if (!checked) {
updatedNewsletters = subscribedNewsletters.filter((d) => {
return d.id !== newsletter.id;
});
setDescription('Unsubscribed');
setShowUpdated(true);
clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => {
setDescription(newsletter?.description);
setShowUpdated(false);
}, 3000);
setTimeoutId(newTimeoutId);
} else {
updatedNewsletters = subscribedNewsletters.filter((d) => {
return d.id !== newsletter.id;
}).concat(newsletter);
setDescription('Subscribed');
setShowUpdated(true);
clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => {
setDescription(newsletter?.description);
setShowUpdated(false);
}, 3000);
setTimeoutId(newTimeoutId);
}