github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-01-21 16:26:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

NotificationListState separate content method

Browse Source 
This fixes an error where an empty notification list wouldn't show the "empty" text.

It also simplifies flow of logic and breaks the component up a bit for readability.
This commit is contained in:
Alexander Skvortsov 2021-05-14 21:04:26 -04:00
parent dd3c203827
commit 8ffeac4315
1 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
js/src/forum/components/NotificationList.js
View File

@ -12,7 +12,6 @@ import Discussion from '../../common/models/Discussion';
export default class NotificationList extends Component {
view() {
const state = this.attrs.state;
const pages = state.getPages();
return (
<div className="NotificationList">
@ -29,72 +28,73 @@ export default class NotificationList extends Component {
</div>
</div>
<div className="NotificationList-content">
{state.hasItems()
? pages.map((page) => {
const groups = [];
const discussions = {};
page.items.forEach((notification) => {
const subject = notification.subject();
if (typeof subject === 'undefined') return;
// Get the discussion that this notification is related to. If it's not
// directly related to a discussion, it may be related to a post or
// other entity which is related to a discussion.
let discussion = null;
if (subject instanceof Discussion) discussion = subject;
else if (subject && subject.discussion) discussion = subject.discussion();
// If the notification is not related to a discussion directly or
// indirectly, then we will assign it to a neutral group.
const key = discussion ? discussion.id() : 0;
discussions[key] = discussions[key] || { discussion: discussion, notifications: [] };
discussions[key].notifications.push(notification);
if (groups.indexOf(discussions[key]) === -1) {
groups.push(discussions[key]);
}
});
return groups.map((group) => {
const badges = group.discussion && group.discussion.badges().toArray();
return (
<div className="NotificationGroup">
{group.discussion ? (
<Link className="NotificationGroup-header" href={app.route.discussion(group.discussion)}>
{badges && badges.length && <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul>}
<span>{group.discussion.title()}</span>
</Link>
) : (
<div className="NotificationGroup-header">{app.forum.attribute('title')}</div>
)}
<ul className="NotificationGroup-content">
{group.notifications.map((notification) => {
const NotificationComponent = app.notificationComponents[notification.contentType()];
return NotificationComponent ? <li>{NotificationComponent.component({ notification })}</li> : '';
})}
</ul>
</div>
);
});
})
: ''}
{state.isLoading() ? (
<LoadingIndicator className="LoadingIndicator--block" />
) : pages.length ? (
''
) : (
<div className="NotificationList-empty">{app.translator.trans('core.forum.notifications.empty_text')}</div>
)}
</div>
<div className="NotificationList-content">{this.content(state)}</div>
</div>
);
}
content(state) {
if (state.isLoading()) {
return <LoadingIndicator className="LoadingIndicator--block" />;
}
if (state.hasItems()) {
return state.getPages().map((page) => {
const groups = [];
const discussions = {};
page.items.forEach((notification) => {
const subject = notification.subject();
if (typeof subject === 'undefined') return;
// Get the discussion that this notification is related to. If it's not
// directly related to a discussion, it may be related to a post or
// other entity which is related to a discussion.
let discussion = null;
if (subject instanceof Discussion) discussion = subject;
else if (subject && subject.discussion) discussion = subject.discussion();
// If the notification is not related to a discussion directly or
// indirectly, then we will assign it to a neutral group.
const key = discussion ? discussion.id() : 0;
discussions[key] = discussions[key] || { discussion: discussion, notifications: [] };
discussions[key].notifications.push(notification);
if (groups.indexOf(discussions[key]) === -1) {
groups.push(discussions[key]);
}
});
return groups.map((group) => {
const badges = group.discussion && group.discussion.badges().toArray();
return (
<div className="NotificationGroup">
{group.discussion ? (
<Link className="NotificationGroup-header" href={app.route.discussion(group.discussion)}>
{badges && badges.length && <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul>}
<span>{group.discussion.title()}</span>
</Link>
) : (
<div className="NotificationGroup-header">{app.forum.attribute('title')}</div>
)}
<ul className="NotificationGroup-content">
{group.notifications.map((notification) => {
const NotificationComponent = app.notificationComponents[notification.contentType()];
return NotificationComponent ? <li>{NotificationComponent.component({ notification })}</li> : '';
})}
</ul>
</div>
);
});
});
}
return <div className="NotificationList-empty">{app.translator.trans('core.forum.notifications.empty_text')}</div>;
}
oncreate(vnode) {
super.oncreate(vnode);