From 5fddcdd4bf8d51ed3b769ff09c7ec2cfd320792d Mon Sep 17 00:00:00 2001 From: neatchee Date: Mon, 22 Jul 2024 22:50:44 -0700 Subject: [PATCH] Revert urusai's custom notification grouping work by @deanveloper --- .../flavours/glitch/components/name_list.jsx | 134 ------------------ .../flavours/glitch/components/status.jsx | 16 +-- .../glitch/components/status_header.jsx | 8 +- .../glitch/components/status_prepend.jsx | 60 ++++---- .../components/column_settings.jsx | 15 -- .../glitch/features/notifications/index.jsx | 54 +------ .../flavours/glitch/reducers/settings.js | 6 - .../flavours/glitch/selectors/index.js | 10 +- 8 files changed, 39 insertions(+), 264 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/name_list.jsx diff --git a/app/javascript/flavours/glitch/components/name_list.jsx b/app/javascript/flavours/glitch/components/name_list.jsx deleted file mode 100644 index 6f313f152d8852..00000000000000 --- a/app/javascript/flavours/glitch/components/name_list.jsx +++ /dev/null @@ -1,134 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -import { injectIntl } from 'react-intl'; - -import ImmutablePropTypes from 'react-immutable-proptypes'; - - -/** - * Displays a single account (or label) as a link. - * - * Noteworthy that onClick gets called as `onClick(account, ev)` if an account is provided, - * but only gets called with `onClick(ev)` if no account was provided. - */ -class NameLink extends React.PureComponent { - - static propTypes = { - account: ImmutablePropTypes.map, - href: PropTypes.string, - onClick: PropTypes.func, - children: PropTypes.string, - }; - - handleClick = (ev) => { - const { account, onClick } = this.props; - onClick(account, ev); - }; - - render() { - const { account, href, children } = this.props; - if (typeof account !== "undefined") { - return ( - - ); - } else { - return ( - - ); - } - } - -} - -/** - * Displays a list of accounts as a comma-separated, link-ified list of displaynames. - */ - -class NameList extends React.PureComponent { - - static propTypes = { - intl: PropTypes.object, - accounts: ImmutablePropTypes.listOf(ImmutablePropTypes.map), - viewMoreHref: PropTypes.string, - onClick: PropTypes.func, - }; - - render() { - const { accounts, intl, viewMoreHref, onClick } = this.props; - - // render a single name if there is only one account - if (accounts.size === 1) { - return ( - - - {accounts.get(0).get('display_name_html') || accounts.get(0).get('username')} - - - ); - } - - // turn a list of accounts into a list (max length 3) of labels - let accountsToIntl; - const hasOthers = accounts.size > 3; - if (hasOthers) { - accountsToIntl = accounts.slice(0, 2).map(acct => acct.get('display_name_html') || acct.get('username')); - accountsToIntl = accountsToIntl.push(intl.formatMessage({ id: 'notifications.others', defaultMessage: 'others' })); - } else { - accountsToIntl = accounts.map(acct => acct.get('display_name_html') || acct.get('username')); - } - - // turn the list of labels into an array of parts, with the correct localization - // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat - const parts = new Intl.ListFormat(intl.locale, { type: 'conjunction' }).formatToParts(accountsToIntl); - - // linkify the list of labels - let elementNum = 0; - return parts.map(({ type, value }) => { - const currentElement = elementNum; - const account = accounts.get(currentElement); - - // if this is a label, linkify it - if (type === 'element') { - elementNum++; - - // special case for the "and others" label - if (hasOthers && currentElement === 2) { - return ( - - {value} - - ); - } - - // return the linkified label - return {value}; - } else { - // if this is a separator, just print it out regularly - return {value}; - } - }); - } - -} - -export default injectIntl(NameList); diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 22719e32eaf549..333588b35f33cc 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -4,7 +4,6 @@ import { injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { List as ImmutableList } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -83,7 +82,7 @@ class Status extends ImmutablePureComponent { containerId: PropTypes.string, id: PropTypes.string, status: ImmutablePropTypes.map, - account: PropTypes.oneOfType([ImmutablePropTypes.record, ImmutablePropTypes.listOf(ImmutablePropTypes.record)]), + account: ImmutablePropTypes.record, previousId: PropTypes.string, nextInReplyToId: PropTypes.string, rootId: PropTypes.string, @@ -560,8 +559,6 @@ class Status extends ImmutablePureComponent { let media = contentMedia; let mediaIcons = contentMediaIcons; - const accounts = ImmutableList.isList(account) ? account : ImmutableList.of(account); - if (settings.getIn(['content_warnings', 'media_outside'])) { media = extraMedia; mediaIcons = extraMediaIcons; @@ -760,7 +757,7 @@ class Status extends ImmutablePureComponent { 'data-status-by': `@${status.getIn(['account', 'acct'])}`, }; - if (this.props.prepend && accounts) { + if (this.props.prepend && account) { const notifKind = { favourite: 'favourited', reaction: 'reacted', @@ -769,13 +766,12 @@ class Status extends ImmutablePureComponent { status: 'posted', }[this.props.prepend]; - selectorAttribs[`data-${notifKind}-by`] = accounts.map(acct => `@${acct.get('acct')}`).join(','); + selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`; prepend = ( @@ -791,7 +787,7 @@ class Status extends ImmutablePureComponent { if (this.props.prepend === 'reblog') { rebloggedByText = intl.formatMessage( { id: 'status.reblogged_by', defaultMessage: '{name} boosted' }, - { name: new Intl.ListFormat(intl.locale, { type: 'conjunction' }).format(accounts.map(acct => acct.get('acct'))) }, + { name: account.get('acct') }, ); } @@ -822,7 +818,7 @@ class Status extends ImmutablePureComponent {
; } else { - statusAvatar = ; + statusAvatar = ; } return ( diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx index b4217cb0a0853b..f6314402dfc8e4 100644 --- a/app/javascript/flavours/glitch/components/status_prepend.jsx +++ b/app/javascript/flavours/glitch/components/status_prepend.jsx @@ -16,29 +16,19 @@ import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; import { Icon } from 'flavours/glitch/components/icon'; import { me } from 'flavours/glitch/initial_state'; -import NameList from './name_list'; - export default class StatusPrepend extends PureComponent { static propTypes = { type: PropTypes.string.isRequired, - status: ImmutablePropTypes.map.isRequired, - accounts: ImmutablePropTypes.listOf(ImmutablePropTypes.map.isRequired), + account: ImmutablePropTypes.map.isRequired, parseClick: PropTypes.func.isRequired, notificationId: PropTypes.number, children: PropTypes.node, }; - handleClick = (acct, e) => { - const { status, parseClick } = this.props; - - if (!acct) { - const originalAuthor = status.getIn(['reblog', 'account', 'acct'], status.getIn(['account', 'acct'])); - const originalStatusId = status.getIn(['reblog', 'id'], status.get('id')); - parseClick(e, `/@${originalAuthor}/${originalStatusId}` + this.getUrlSuffix()); - } else { - parseClick(e, `/@${acct.get('acct')}`); - } + handleClick = (e) => { + const { account, parseClick } = this.props; + parseClick(e, `/@${account.get('acct')}`); }; getUrlSuffix = () => { @@ -54,18 +44,22 @@ export default class StatusPrepend extends PureComponent { }; Message = () => { - const { type, accounts, status } = this.props; - - const viewMoreHref = status.get('url') + this.getUrlSuffix(); - - const linkifiedAccounts = ( - - - + const { type, account } = this.props; + let link = ( + + + + + ); switch (type) { @@ -78,7 +72,7 @@ export default class StatusPrepend extends PureComponent { ); case 'favourite': @@ -86,7 +80,7 @@ export default class StatusPrepend extends PureComponent { ); case 'reaction': @@ -94,7 +88,7 @@ export default class StatusPrepend extends PureComponent { ); case 'reblog': @@ -102,7 +96,7 @@ export default class StatusPrepend extends PureComponent { ); case 'status': @@ -110,11 +104,11 @@ export default class StatusPrepend extends PureComponent { ); case 'poll': - if (me === accounts.get(0).get('id')) { + if (me === account.get('id')) { return ( ); } diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx index 3a80087c3b4895..9daae897d2dc0b 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx @@ -52,9 +52,6 @@ class ColumnSettings extends PureComponent { render () { const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission, notificationPolicy } = this.props; - const groupReactions = ; - const groupFavorites = ; - const groupBoosts = ; const unreadMarkersShowStr = ; const groupingShowStr = ; const filterBarShowStr = ; @@ -84,18 +81,6 @@ class ColumnSettings extends PureComponent { )} -
- - - - -
- - - -
-
-

diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx index 00e74024b9134e..2d3d4377561e7e 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.jsx +++ b/app/javascript/flavours/glitch/features/notifications/index.jsx @@ -83,7 +83,6 @@ const mapStateToProps = state => ({ lastReadId: state.getIn(['settings', 'notifications', 'showUnread']) ? state.getIn(['notifications', 'readMarkerId']) : '0', canMarkAsRead: state.getIn(['settings', 'notifications', 'showUnread']) && state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0), needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default' && !state.getIn(['settings', 'notifications', 'dismissPermissionBanner']), - grouping: state.getIn(['settings', 'notifications', 'grouping']), }); /* glitch */ @@ -113,7 +112,6 @@ class Notifications extends PureComponent { lastReadId: PropTypes.string, canMarkAsRead: PropTypes.bool, needsNotificationPermission: PropTypes.bool, - grouping: ImmutablePropTypes.map, }; static defaultProps = { @@ -218,56 +216,8 @@ class Notifications extends PureComponent { this.props.dispatch(submitMarkers({ immediate: true })); }; - /** - * Gets the list of notifications, grouped up (as per user settings) such that multiple users' interactions on the same - * post are collapsed into a single notification. - */ - getGroupedNotifications() { - const { notifications, grouping } = this.props; - const groupedNotifications = []; - - // if grouping is { "favourite": true, "reblog": false, "foo": true, "bar": false } - // then typesToGroup is [ "favourite", "foo" ] - const typesToGroup = grouping.reduce((acc, enabled, groupBy) => enabled ? acc.push(groupBy) : acc, ImmutableList.of()); - - // for each notification.... - for (const notif of notifications) { - - // `null` is used to signify that there is a "loading gap" in the notifications. We make sure that these loading gaps persist. - if (!notif) { - groupedNotifications.push(notif); - continue; - } - - // Make sure that we only group up notifications of the provided types. - if (typesToGroup.includes(notif.get('type'))) { - - // Get an already existing notification to collapse into - const matchingNotifIdx = groupedNotifications.findIndex( - other => other?.get('type') === notif.get('type') && other?.get('status') === notif.get('status'), - ); - const matchingNotif = groupedNotifications[matchingNotifIdx]; - - // Collapse this notifcation into the existing notification if it exists, - // otherwise push it as a new notification. - if (matchingNotif) { - groupedNotifications[matchingNotifIdx] = matchingNotif.update( - 'account', - ImmutableList(), - accounts => accounts.push(notif.get('account')), - ); - } else { - groupedNotifications.push(notif.update('account', singleAccount => ImmutableList.of(singleAccount))); - } - } else { - groupedNotifications.push(notif); - } - } - return ImmutableList(groupedNotifications); - } - render () { - const { intl, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar, lastReadId, canMarkAsRead, needsNotificationPermission } = this.props; + const { intl, notifications, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar, lastReadId, canMarkAsRead, needsNotificationPermission } = this.props; const { notifCleaningActive } = this.props; const { animatingNCD } = this.state; const pinned = !!columnId; @@ -280,8 +230,6 @@ class Notifications extends PureComponent { ? () : null; - const notifications = this.getGroupedNotifications(); - if (isLoading && this.scrollableContent) { scrollableContent = this.scrollableContent; } else if (notifications.size > 0 || hasMore) { diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js index c1f7f070c14812..0eec1c79f6e76d 100644 --- a/app/javascript/flavours/glitch/reducers/settings.js +++ b/app/javascript/flavours/glitch/reducers/settings.js @@ -81,12 +81,6 @@ const initialState = ImmutableMap({ 'admin.sign_up': true, 'admin.report': true, }), - - grouping: ImmutableMap({ - reaction: true, - favourite: true, - reblog: true, - }), }), firehose: ImmutableMap({ diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 2672cb5ea002f0..589968a00883ea 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -85,15 +85,7 @@ export const getAlerts = createSelector(state => state.get('alerts'), alerts => */ export const makeGetNotification = () => createSelector([ (_, base) => base, - (state, _, accountId) => { - let account; - if (ImmutableList.isList(accountId)) { - account = ImmutableList(accountId.map(each => state.getIn(['accounts', each]))); - } else { - account = state.getIn(['accounts', accountId]); - } - return account; - }, + (state, _, accountId) => state.getIn(['accounts', accountId]), ], (base, account) => base.set('account', account)); export const makeGetReport = () => createSelector([