2023-09-12 13:50:46 +03:00
|
|
|
import shortenNumber from '../utils/shorten-number';
|
2023-04-30 16:03:09 +03:00
|
|
|
import states from '../utils/states';
|
|
|
|
import store from '../utils/store';
|
|
|
|
|
|
|
|
import Avatar from './avatar';
|
2023-05-06 12:13:39 +03:00
|
|
|
import FollowRequestButtons from './follow-request-buttons';
|
2023-04-30 16:03:09 +03:00
|
|
|
import Icon from './icon';
|
|
|
|
import Link from './link';
|
|
|
|
import NameText from './name-text';
|
|
|
|
import RelativeTime from './relative-time';
|
|
|
|
import Status from './status';
|
|
|
|
|
|
|
|
const NOTIFICATION_ICONS = {
|
|
|
|
mention: 'comment',
|
|
|
|
status: 'notification',
|
|
|
|
reblog: 'rocket',
|
|
|
|
follow: 'follow',
|
|
|
|
follow_request: 'follow-add',
|
|
|
|
favourite: 'heart',
|
|
|
|
poll: 'poll',
|
|
|
|
update: 'pencil',
|
2023-09-05 04:19:11 +03:00
|
|
|
'admin.signup': 'account-edit',
|
|
|
|
'admin.report': 'account-warning',
|
2023-04-30 16:03:09 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Notification types
|
|
|
|
==================
|
|
|
|
mention = Someone mentioned you in their status
|
|
|
|
status = Someone you enabled notifications for has posted a status
|
|
|
|
reblog = Someone boosted one of your statuses
|
|
|
|
follow = Someone followed you
|
|
|
|
follow_request = Someone requested to follow you
|
|
|
|
favourite = Someone favourited one of your statuses
|
|
|
|
poll = A poll you have voted in or created has ended
|
|
|
|
update = A status you interacted with has been edited
|
|
|
|
admin.sign_up = Someone signed up (optionally sent to admins)
|
|
|
|
admin.report = A new report has been filed
|
|
|
|
*/
|
|
|
|
|
|
|
|
const contentText = {
|
|
|
|
mention: 'mentioned you in their post.',
|
|
|
|
status: 'published a post.',
|
|
|
|
reblog: 'boosted your post.',
|
2023-08-27 08:06:26 +03:00
|
|
|
'reblog+account': (count) => `boosted ${count} of your posts.`,
|
2023-08-20 09:22:47 +03:00
|
|
|
reblog_reply: 'boosted your reply.',
|
2023-04-30 16:03:09 +03:00
|
|
|
follow: 'followed you.',
|
|
|
|
follow_request: 'requested to follow you.',
|
|
|
|
favourite: 'favourited your post.',
|
2023-08-27 08:06:26 +03:00
|
|
|
'favourite+account': (count) => `favourited ${count} of your posts.`,
|
2023-08-20 09:22:47 +03:00
|
|
|
favourite_reply: 'favourited your reply.',
|
2023-04-30 16:03:09 +03:00
|
|
|
poll: 'A poll you have voted in or created has ended.',
|
|
|
|
'poll-self': 'A poll you have created has ended.',
|
|
|
|
'poll-voted': 'A poll you have voted in has ended.',
|
|
|
|
update: 'A post you interacted with has been edited.',
|
|
|
|
'favourite+reblog': 'boosted & favourited your post.',
|
2023-08-27 08:06:26 +03:00
|
|
|
'favourite+reblog+account': (count) =>
|
|
|
|
`boosted & favourited ${count} of your posts.`,
|
2023-08-20 09:22:47 +03:00
|
|
|
'favourite+reblog_reply': 'boosted & favourited your reply.',
|
2023-09-05 04:19:11 +03:00
|
|
|
'admin.signup': 'signed up.',
|
|
|
|
'admin.report': 'reported a post.',
|
2023-04-30 16:03:09 +03:00
|
|
|
};
|
|
|
|
|
2023-09-01 10:40:00 +03:00
|
|
|
function Notification({ notification, instance, reload, isStatic }) {
|
2023-08-28 00:49:12 +03:00
|
|
|
const { id, status, account, _accounts, _statuses } = notification;
|
2023-04-30 16:03:09 +03:00
|
|
|
let { type } = notification;
|
|
|
|
|
|
|
|
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
|
2023-09-01 10:40:00 +03:00
|
|
|
const actualStatus = status?.reblog || status;
|
|
|
|
const actualStatusID = actualStatus?.id;
|
2023-04-30 16:03:09 +03:00
|
|
|
|
|
|
|
const currentAccount = store.session.get('currentAccount');
|
|
|
|
const isSelf = currentAccount === account?.id;
|
|
|
|
const isVoted = status?.poll?.voted;
|
2023-08-20 09:22:47 +03:00
|
|
|
const isReplyToOthers =
|
|
|
|
!!status?.inReplyToAccountId &&
|
|
|
|
status?.inReplyToAccountId !== currentAccount &&
|
|
|
|
status?.account?.id === currentAccount;
|
2023-04-30 16:03:09 +03:00
|
|
|
|
|
|
|
let favsCount = 0;
|
|
|
|
let reblogsCount = 0;
|
|
|
|
if (type === 'favourite+reblog') {
|
|
|
|
for (const account of _accounts) {
|
|
|
|
if (account._types?.includes('favourite')) {
|
|
|
|
favsCount++;
|
|
|
|
}
|
|
|
|
if (account._types?.includes('reblog')) {
|
|
|
|
reblogsCount++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!reblogsCount && favsCount) type = 'favourite';
|
|
|
|
if (!favsCount && reblogsCount) type = 'reblog';
|
|
|
|
}
|
|
|
|
|
2023-08-20 09:22:47 +03:00
|
|
|
let text;
|
|
|
|
if (type === 'poll') {
|
|
|
|
text = contentText[isSelf ? 'poll-self' : isVoted ? 'poll-voted' : 'poll'];
|
|
|
|
} else if (
|
|
|
|
type === 'reblog' ||
|
|
|
|
type === 'favourite' ||
|
|
|
|
type === 'favourite+reblog'
|
|
|
|
) {
|
2023-08-27 08:06:26 +03:00
|
|
|
if (_statuses?.length > 1) {
|
|
|
|
text = contentText[`${type}+account`];
|
|
|
|
} else if (isReplyToOthers) {
|
|
|
|
text = contentText[`${type}_reply`];
|
|
|
|
} else {
|
|
|
|
text = contentText[type];
|
|
|
|
}
|
2023-09-05 04:19:11 +03:00
|
|
|
} else if (contentText[type]) {
|
2023-08-20 09:22:47 +03:00
|
|
|
text = contentText[type];
|
2023-09-05 04:19:11 +03:00
|
|
|
} else {
|
|
|
|
// Anticipate unhandled notification types, possibly from Mastodon forks or non-Mastodon instances
|
|
|
|
// This surfaces the error to the user, hoping that users will report it
|
|
|
|
text = `[Unknown notification type: ${type}]`;
|
2023-08-20 09:22:47 +03:00
|
|
|
}
|
2023-09-05 04:19:11 +03:00
|
|
|
|
2023-08-27 08:06:26 +03:00
|
|
|
if (typeof text === 'function') {
|
|
|
|
text = text(_statuses?.length || _accounts?.length);
|
|
|
|
}
|
2023-04-30 16:03:09 +03:00
|
|
|
|
2023-05-02 03:01:52 +03:00
|
|
|
if (type === 'mention' && !status) {
|
|
|
|
// Could be deleted
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2023-09-05 04:19:11 +03:00
|
|
|
const formattedCreatedAt =
|
|
|
|
notification.createdAt && new Date(notification.createdAt).toLocaleString();
|
|
|
|
|
2023-09-12 06:27:54 +03:00
|
|
|
const genericAccountsHeading =
|
|
|
|
{
|
|
|
|
'favourite+reblog': 'Boosted/Favourited by…',
|
|
|
|
favourite: 'Favourited by…',
|
|
|
|
reblog: 'Boosted by…',
|
|
|
|
follow: 'Followed by…',
|
|
|
|
}[type] || 'Accounts';
|
|
|
|
const handleOpenGenericAccounts = () => {
|
|
|
|
states.showGenericAccounts = {
|
|
|
|
heading: genericAccountsHeading,
|
|
|
|
accounts: _accounts,
|
|
|
|
showReactions: type === 'favourite+reblog',
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2023-04-30 16:03:09 +03:00
|
|
|
return (
|
|
|
|
<div class={`notification notification-${type}`} tabIndex="0">
|
|
|
|
<div
|
|
|
|
class={`notification-type notification-${type}`}
|
2023-09-05 04:19:11 +03:00
|
|
|
title={formattedCreatedAt}
|
2023-04-30 16:03:09 +03:00
|
|
|
>
|
|
|
|
{type === 'favourite+reblog' ? (
|
|
|
|
<>
|
|
|
|
<Icon icon="rocket" size="xl" alt={type} class="reblog-icon" />
|
|
|
|
<Icon icon="heart" size="xl" alt={type} class="favourite-icon" />
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<Icon
|
|
|
|
icon={NOTIFICATION_ICONS[type] || 'notification'}
|
|
|
|
size="xl"
|
|
|
|
alt={type}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div class="notification-content">
|
|
|
|
{type !== 'mention' && (
|
|
|
|
<>
|
|
|
|
<p>
|
|
|
|
{!/poll|update/i.test(type) && (
|
|
|
|
<>
|
|
|
|
{_accounts?.length > 1 ? (
|
|
|
|
<>
|
2023-09-12 06:27:54 +03:00
|
|
|
<b tabIndex="0" onClick={handleOpenGenericAccounts}>
|
2023-09-12 13:50:46 +03:00
|
|
|
<span title={_accounts.length}>
|
|
|
|
{shortenNumber(_accounts.length)}
|
|
|
|
</span>{' '}
|
|
|
|
people
|
2023-09-12 06:27:54 +03:00
|
|
|
</b>{' '}
|
2023-04-30 16:03:09 +03:00
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<NameText account={account} showAvatar />{' '}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{text}
|
|
|
|
{type === 'mention' && (
|
|
|
|
<span class="insignificant">
|
|
|
|
{' '}
|
|
|
|
•{' '}
|
|
|
|
<RelativeTime
|
|
|
|
datetime={notification.createdAt}
|
|
|
|
format="micro"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
{type === 'follow_request' && (
|
|
|
|
<FollowRequestButtons
|
|
|
|
accountID={account.id}
|
|
|
|
onChange={() => {
|
2023-08-11 13:00:36 +03:00
|
|
|
// reload();
|
2023-04-30 16:03:09 +03:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{_accounts?.length > 1 && (
|
|
|
|
<p class="avatars-stack">
|
2023-09-12 13:50:46 +03:00
|
|
|
{_accounts.slice(0, 50).map((account, i) => (
|
2023-04-30 16:03:09 +03:00
|
|
|
<>
|
|
|
|
<a
|
|
|
|
href={account.url}
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
class="account-avatar-stack"
|
|
|
|
onClick={(e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
states.showAccount = account;
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Avatar
|
|
|
|
url={account.avatarStatic}
|
|
|
|
size={
|
|
|
|
_accounts.length <= 10
|
|
|
|
? 'xxl'
|
2023-09-12 13:50:46 +03:00
|
|
|
: _accounts.length < 20
|
2023-04-30 16:03:09 +03:00
|
|
|
? 'xl'
|
2023-09-12 13:50:46 +03:00
|
|
|
: _accounts.length < 30
|
2023-04-30 16:03:09 +03:00
|
|
|
? 'l'
|
2023-09-12 13:50:46 +03:00
|
|
|
: _accounts.length < 40
|
2023-04-30 16:03:09 +03:00
|
|
|
? 'm'
|
|
|
|
: 's' // My god, this person is popular!
|
|
|
|
}
|
|
|
|
key={account.id}
|
|
|
|
alt={`${account.displayName} @${account.acct}`}
|
|
|
|
squircle={account?.bot}
|
|
|
|
/>
|
|
|
|
{type === 'favourite+reblog' && (
|
|
|
|
<div class="account-sub-icons">
|
|
|
|
{account._types.map((type) => (
|
|
|
|
<Icon
|
|
|
|
icon={NOTIFICATION_ICONS[type]}
|
|
|
|
size="s"
|
|
|
|
class={`${type}-icon`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</a>{' '}
|
|
|
|
</>
|
|
|
|
))}
|
2023-09-12 06:27:54 +03:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
class="small plain"
|
|
|
|
onClick={handleOpenGenericAccounts}
|
|
|
|
>
|
|
|
|
<Icon icon="chevron-down" />
|
|
|
|
</button>
|
2023-04-30 16:03:09 +03:00
|
|
|
</p>
|
|
|
|
)}
|
2023-08-27 08:06:26 +03:00
|
|
|
{_statuses?.length > 1 && (
|
|
|
|
<ul class="notification-group-statuses">
|
|
|
|
{_statuses.map((status) => (
|
|
|
|
<li key={status.id}>
|
|
|
|
<Link
|
|
|
|
class={`status-link status-type-${type}`}
|
|
|
|
to={
|
|
|
|
instance ? `/${instance}/s/${status.id}` : `/s/${status.id}`
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Status status={status} size="s" />
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
)}
|
|
|
|
{status && (!_statuses?.length || _statuses?.length <= 1) && (
|
2023-04-30 16:03:09 +03:00
|
|
|
<Link
|
|
|
|
class={`status-link status-type-${type}`}
|
|
|
|
to={
|
|
|
|
instance
|
|
|
|
? `/${instance}/s/${actualStatusID}`
|
|
|
|
: `/s/${actualStatusID}`
|
|
|
|
}
|
|
|
|
>
|
2023-09-01 10:40:00 +03:00
|
|
|
{isStatic ? (
|
|
|
|
<Status status={actualStatus} size="s" />
|
|
|
|
) : (
|
|
|
|
<Status statusID={actualStatusID} size="s" />
|
|
|
|
)}
|
2023-04-30 16:03:09 +03:00
|
|
|
</Link>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Notification;
|