nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Further grouping of notifications

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-06 12:51:53 +08:00
parent fd9d09b8b2
commit fffc8cc983
2 changed files with 23 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app.css
View file

@ -820,6 +820,14 @@ meter.donut:is(.danger, .explode):after {
filter: brightness(0.8); filter: brightness(0.8);
} }
/* AVATARS STACK */
.avatars-stack {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
@media (min-width: 40em) { @media (min-width: 40em) {
html, html,
body { body {

35
src/pages/notifications.jsx
View file

@ -112,7 +112,7 @@ function Notification({ notification }) {
</p> </p>
)} )}
{_accounts?.length > 1 && ( {_accounts?.length > 1 && (
<p> <p class="avatars-stack">
{_accounts.map((account, i) => ( {_accounts.map((account, i) => (
<> <>
<a <a
@ -126,7 +126,7 @@ function Notification({ notification }) {
<Avatar <Avatar
url={account.avatarStatic} url={account.avatarStatic}
size={ size={
_accounts.length < 10 _accounts.length < 30
? 'xl' ? 'xl'
: _accounts.length < 100 : _accounts.length < 100
? 'l' ? 'l'
@ -163,28 +163,23 @@ function NotificationsList({ notifications, emptyCopy }) {
// Create new flat list of notifications // Create new flat list of notifications
// Combine sibling notifications based on type and status id, ignore the id // Combine sibling notifications based on type and status id, ignore the id
// Concat all notification.account into an array of _accounts // Concat all notification.account into an array of _accounts
const cleanNotifications = [ const notificationsMap = {};
{ const cleanNotifications = [];
...notifications[0], for (let i = 0, j = 0; i < notifications.length; i++) {
_accounts: [notifications[0].account],
},
];
for (let i = 1, j = 0; i < notifications.length; i++) {
const notification = notifications[i]; const notification = notifications[i];
const cleanNotification = cleanNotifications[j]; // const cleanNotification = cleanNotifications[j];
const { status, account, type } = notification; const { status, account, type, created_at } = notification;
if ( const createdAt = new Date(created_at).toLocaleDateString();
account && const key = `${status?.id}-${type}-${createdAt}`;
cleanNotification?.account && const mappedNotification = notificationsMap[key];
cleanNotification?.status?.id === status?.id && if (mappedNotification?.account) {
cleanNotification?.type === type mappedNotification._accounts.push(account);
) {
cleanNotification._accounts.push(account);
} else { } else {
cleanNotifications[++j] = { let n = (notificationsMap[key] = {
...notification, ...notification,
_accounts: [account], _accounts: [account],
}; });
cleanNotifications[j++] = n;
} }
} }
// console.log({ notifications, cleanNotifications }); // console.log({ notifications, cleanNotifications });