mirror of https://github.com/mastodon/mastodon.git
Use a constant for the max amount of avatars to display in a group
parent
a885a2e824
commit
32bb2d20eb
|
@ -1,6 +1,7 @@
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import { Avatar } from 'mastodon/components/avatar';
|
import { Avatar } from 'mastodon/components/avatar';
|
||||||
|
import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'mastodon/models/notification_group';
|
||||||
import { useAppSelector } from 'mastodon/store';
|
import { useAppSelector } from 'mastodon/store';
|
||||||
|
|
||||||
const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
|
const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
|
||||||
|
@ -19,7 +20,7 @@ export const AvatarGroup: React.FC<{ accountIds: string[] }> = ({
|
||||||
accountIds,
|
accountIds,
|
||||||
}) => (
|
}) => (
|
||||||
<div className='notification-group__avatar-group'>
|
<div className='notification-group__avatar-group'>
|
||||||
{accountIds.slice(0, 7).map((accountId) => (
|
{accountIds.slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS).map((accountId) => (
|
||||||
<AvatarWrapper key={accountId} accountId={accountId} />
|
<AvatarWrapper key={accountId} accountId={accountId} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,6 +9,10 @@ import type {
|
||||||
} from 'mastodon/api_types/notifications';
|
} from 'mastodon/api_types/notifications';
|
||||||
import type { ApiReportJSON } from 'mastodon/api_types/reports';
|
import type { ApiReportJSON } from 'mastodon/api_types/reports';
|
||||||
|
|
||||||
|
// Maximum number of avatars displayed in a notification group
|
||||||
|
// This corresponds to the max lenght of `group.sampleAccountsIds`
|
||||||
|
export const NOTIFICATIONS_GROUP_MAX_AVATARS = 6;
|
||||||
|
|
||||||
interface BaseNotificationGroup
|
interface BaseNotificationGroup
|
||||||
extends Omit<BaseNotificationGroupJSON, 'sample_accounts'> {
|
extends Omit<BaseNotificationGroupJSON, 'sample_accounts'> {
|
||||||
sampleAccountsIds: string[];
|
sampleAccountsIds: string[];
|
||||||
|
|
|
@ -6,6 +6,7 @@ import {
|
||||||
processNewNotificationForGroups,
|
processNewNotificationForGroups,
|
||||||
} from 'mastodon/actions/notification_groups';
|
} from 'mastodon/actions/notification_groups';
|
||||||
import {
|
import {
|
||||||
|
NOTIFICATIONS_GROUP_MAX_AVATARS,
|
||||||
createNotificationGroupFromJSON,
|
createNotificationGroupFromJSON,
|
||||||
createNotificationGroupFromNotificationJSON,
|
createNotificationGroupFromNotificationJSON,
|
||||||
} from 'mastodon/models/notification_group';
|
} from 'mastodon/models/notification_group';
|
||||||
|
@ -84,8 +85,11 @@ export const notificationsGroupsReducer =
|
||||||
|
|
||||||
if (existingGroup && existingGroup.type !== 'gap') {
|
if (existingGroup && existingGroup.type !== 'gap') {
|
||||||
// Update the existing group
|
// Update the existing group
|
||||||
existingGroup.sampleAccountsIds.unshift(notification.account.id);
|
if (
|
||||||
existingGroup.sampleAccountsIds.pop();
|
existingGroup.sampleAccountsIds.unshift(notification.account.id) >
|
||||||
|
NOTIFICATIONS_GROUP_MAX_AVATARS
|
||||||
|
)
|
||||||
|
existingGroup.sampleAccountsIds.pop();
|
||||||
|
|
||||||
existingGroup.most_recent_notification_id = notification.id;
|
existingGroup.most_recent_notification_id = notification.id;
|
||||||
existingGroup.page_max_id = notification.id;
|
existingGroup.page_max_id = notification.id;
|
||||||
|
|
Loading…
Reference in New Issue