Refactor notifications code to reduce differences with upstream (#2692)

* Merge back `Follow` notification component

* Merge back part of `FollowRequestContainer` notification container

* Reduce differences with upstream in the `mention` case

* Reduce differences with upstream in the `favourite` case

* Reduce differences with upstream in the `reblog` case

* Reduce differences with upstream in the `status` case

* Reduce differences with upstream in the `update` case

* Reduce differences with upstream in the `poll` case

* Merge back `AdminSignup` notification component

* Merge back `AdminReport` notification container

app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { HotKeys } from 'react-hotkeys';
-
-import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
-
-import Report from './report';
-
-class AdminReport extends ImmutablePureComponent {
-
-  static propTypes = {
-    hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    report: ImmutablePropTypes.map.isRequired,
-    ...WithRouterPropTypes,
-  };
-
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
-  render () {
-    const { account, notification, unread, report } = this.props;
-
-    if (!report) {
-      return null;
-    }
-
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
-    const targetAccount = report.get('target_account');
-    const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
-    const targetLink = <bdi><Permalink className='notification__display-name' href={targetAccount.get('url')} title={targetAccount.get('acct')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
-
-    return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='flag' icon={FlagIcon} />
-
-            <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />
-            </span>
-          </div>
-
-          <Report account={account} report={notification.get('report')} hidden={this.props.hidden} />
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
-    );
-  }
-
-}
-
-export default withRouter(AdminReport);

app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx

@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { HotKeys } from 'react-hotkeys';
-
-import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import AccountContainer from 'flavours/glitch/containers/account_container';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
-
-class NotificationAdminSignup extends ImmutablePureComponent {
-
-  static propTypes = {
-    hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
-  render () {
-    const { account, notification, hidden, unread } = this.props;
-
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
-    //  Renders.
-    return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='user-plus' icon={PersonAddIcon} />
-
-            <FormattedMessage
-              id='notification.admin.sign_up'
-              defaultMessage='{name} signed up'
-              values={{ name: link }}
-            />
-          </div>
-
-          <AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
-    );
-  }
-
-}
-
-export default withRouter(NotificationAdminSignup);

app/javascript/flavours/glitch/features/notifications/components/follow.jsx

@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { HotKeys } from 'react-hotkeys';
-
-import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import AccountContainer from 'flavours/glitch/containers/account_container';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
-
-class NotificationFollow extends ImmutablePureComponent {
-
-  static propTypes = {
-    hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
-  render () {
-    const { account, notification, hidden, unread } = this.props;
-
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
-    //  Renders.
-    return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='user-plus' icon={PersonAddIcon} />
-
-            <FormattedMessage
-              id='notification.follow'
-              defaultMessage='{name} followed you'
-              values={{ name: link }}
-            />
-          </div>
-
-          <AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
-    );
-  }
-
-}
-
-export default withRouter(NotificationFollow);

app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx

@@ -1,26 +1,16 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { HotKeys } from 'react-hotkeys';
-
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
-import { Icon } from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { Permalink } from 'flavours/glitch/components/permalink';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
 
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -34,50 +24,10 @@ class FollowRequest extends ImmutablePureComponent {
     onAuthorize: PropTypes.func.isRequired,
     onReject: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    ...WithRouterPropTypes,
   };
 
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
   render () {
-    const { intl, hidden, account, onAuthorize, onReject, notification, unread } = this.props;
+    const { intl, hidden, account, onAuthorize, onReject } = this.props;
 
     if (!account) {
       return <div />;
@@ -92,31 +42,7 @@ class FollowRequest extends ImmutablePureComponent {
       );
     }
 
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
     return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='user' icon={PersonIcon} />
-
-            <FormattedMessage
-              id='notification.follow_request'
-              defaultMessage='{name} has requested to follow you'
-              values={{ name: link }}
-            />
-          </div>
-
       <div className='account'>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
@@ -130,13 +56,9 @@ class FollowRequest extends ImmutablePureComponent {
           </div>
         </div>
       </div>
-
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
     );
   }
 
 }
 
-export default withRouter(injectIntl(FollowRequest));
+export default injectIntl(FollowRequest);

app/javascript/flavours/glitch/features/notifications/components/notification.jsx

@@ -1,180 +1,224 @@
-//  Package imports.
 import PropTypes from 'prop-types';
 
+import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-//  Our imports,
+import { HotKeys } from 'react-hotkeys';
+
+import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import { Icon }  from 'flavours/glitch/components/icon';
+import { Permalink } from 'flavours/glitch/components/permalink';
+import AccountContainer from 'flavours/glitch/containers/account_container';
 import StatusContainer from 'flavours/glitch/containers/status_container';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
-import NotificationAdminReportContainer from '../containers/admin_report_container';
+import FollowRequestContainer from '../containers/follow_request_container';
-import NotificationFollowRequestContainer from '../containers/follow_request_container';
+import NotificationOverlayContainer from '../containers/overlay_container';
 
-import NotificationAdminSignup from './admin_signup';
+import Report from './report';
-import NotificationFollow from './follow';
 
-export default class Notification extends ImmutablePureComponent {
+const messages = defineMessages({
+  follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
+  adminSignUp: { id: 'notification.admin.sign_up', defaultMessage: '{name} signed up' },
+  adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
+});
 
+const notificationForScreenReader = (intl, message, timestamp) => {
+  const output = [message];
+
+  output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }));
+
+  return output.join(', ');
+};
+
+class Notification extends ImmutablePureComponent {
   static propTypes = {
     notification: ImmutablePropTypes.map.isRequired,
     hidden: PropTypes.bool,
     onMoveUp: PropTypes.func.isRequired,
     onMoveDown: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
+    onFavourite: PropTypes.func.isRequired,
+    onReblog: PropTypes.func.isRequired,
+    onToggleHidden: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
     getScrollPosition: PropTypes.func,
     updateScrollBottom: PropTypes.func,
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
     onUnmount: PropTypes.func,
     unread: PropTypes.bool,
+    ...WithRouterPropTypes,
   };
 
-  render () {
+  handleMoveUp = () => {
-    const {
+    const { notification, onMoveUp } = this.props;
-      hidden,
+    onMoveUp(notification.get('id'));
-      notification,
+  };
-      onMoveDown,
+
-      onMoveUp,
+  handleMoveDown = () => {
-      onMention,
+    const { notification, onMoveDown } = this.props;
-      getScrollPosition,
+    onMoveDown(notification.get('id'));
-      updateScrollBottom,
+  };
-    } = this.props;
+
+  handleOpen = () => {
+    const { notification } = this.props;
+
+    if (notification.get('status')) {
+      this.props.history.push(`/@${notification.getIn(['status', 'account', 'acct'])}/${notification.get('status')}`);
+    } else {
+      this.handleOpenProfile();
+    }
+  };
+
+  handleOpenProfile = () => {
+    const { notification } = this.props;
+    this.props.history.push(`/@${notification.getIn(['account', 'acct'])}`);
+  };
+
+  handleMention = e => {
+    e.preventDefault();
+
+    const { notification, onMention } = this.props;
+    onMention(notification.get('account'), this.props.history);
+  };
+
+  handleHotkeyFavourite = () => {
+    const { status } = this.props;
+    if (status) this.props.onFavourite(status);
+  };
+
+  handleHotkeyBoost = e => {
+    const { status } = this.props;
+    if (status) this.props.onReblog(status, e);
+  };
+
+  getHandlers () {
+    return {
+      reply: this.handleMention,
+      favourite: this.handleHotkeyFavourite,
+      boost: this.handleHotkeyBoost,
+      mention: this.handleMention,
+      open: this.handleOpen,
+      openProfile: this.handleOpenProfile,
+      moveUp: this.handleMoveUp,
+      moveDown: this.handleMoveDown,
+    };
+  }
+
+  renderFollow (notification, account, link) {
+    const { intl, unread } = this.props;
 
-    switch(notification.get('type')) {
-    case 'follow':
     return (
-        <NotificationFollow
+      <HotKeys handlers={this.getHandlers()}>
-          hidden={hidden}
+        <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
-          id={notification.get('id')}
+          <div className='notification__message'>
-          account={notification.get('account')}
+            <Icon id='user-plus' icon={PersonAddIcon} />
-          notification={notification}
+
-          onMoveDown={onMoveDown}
+            <span title={notification.get('created_at')}>
-          onMoveUp={onMoveUp}
+              <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
-          onMention={onMention}
+            </span>
-          unread={this.props.unread}
+          </div>
-        />
+
+          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
     );
-    case 'follow_request':
+  }
+
+  renderFollowRequest (notification, account, link) {
+    const { intl, unread } = this.props;
+
     return (
-        <NotificationFollowRequestContainer
+      <HotKeys handlers={this.getHandlers()}>
-          hidden={hidden}
+        <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
-          id={notification.get('id')}
+          <div className='notification__message'>
-          account={notification.get('account')}
+            <Icon id='user' icon={PersonIcon} />
-          notification={notification}
+
-          onMoveDown={onMoveDown}
+            <span title={notification.get('created_at')}>
-          onMoveUp={onMoveUp}
+              <FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={{ name: link }} />
-          onMention={onMention}
+            </span>
-          unread={this.props.unread}
+          </div>
-        />
+
+          <FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
     );
-    case 'admin.sign_up':
+  }
-      return (
+
-        <NotificationAdminSignup
+  renderMention (notification) {
-          hidden={hidden}
-          id={notification.get('id')}
-          account={notification.get('account')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          unread={this.props.unread}
-        />
-      );
-    case 'admin.report':
-      return (
-        <NotificationAdminReportContainer
-          hidden={hidden}
-          id={notification.get('id')}
-          account={notification.get('account')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          unread={this.props.unread}
-        />
-      );
-    case 'mention':
     return (
       <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
         id={notification.get('status')}
-          notification={notification}
+        containerId={notification.get('id')}
-          onMoveDown={onMoveDown}
+        withDismiss
-          onMoveUp={onMoveUp}
+        hidden={this.props.hidden}
-          onMention={onMention}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
         contextType='notifications'
-          getScrollPosition={getScrollPosition}
+        getScrollPosition={this.props.getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
+        updateScrollBottom={this.props.updateScrollBottom}
+        notification={notification}
         cachedMediaWidth={this.props.cachedMediaWidth}
         cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
         unread={this.props.unread}
+        onUnmount={this.props.onUnmount}
       />
     );
-    case 'status':
+  }
+
+  renderFavourite (notification) {
     return (
       <StatusContainer
         containerId={notification.get('id')}
-          hidden={hidden}
+        hidden={!!this.props.hidden}
-          id={notification.get('status')}
-          account={notification.get('account')}
-          prepend='status'
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
-    case 'favourite':
-      return (
-        <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
         id={notification.get('status')}
         account={notification.get('account')}
         prepend='favourite'
         muted
+        withDismiss
         notification={notification}
-          onMoveDown={onMoveDown}
+        onMoveDown={this.handleMoveDown}
-          onMoveUp={onMoveUp}
+        onMoveUp={this.handleMoveUp}
-          onMention={onMention}
+        onMention={this.props.onMention}
         contextType='notifications'
-          getScrollPosition={getScrollPosition}
+        getScrollPosition={this.props.getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
+        updateScrollBottom={this.props.updateScrollBottom}
         cachedMediaWidth={this.props.cachedMediaWidth}
         cacheMediaWidth={this.props.cacheMediaWidth}
         onUnmount={this.props.onUnmount}
-          withDismiss
         unread={this.props.unread}
       />
     );
-    case 'reblog':
+  }
+
+  renderReblog (notification) {
     return (
       <StatusContainer
         containerId={notification.get('id')}
-          hidden={hidden}
+        hidden={!!this.props.hidden}
         id={notification.get('status')}
         account={notification.get('account')}
         prepend='reblog'
         muted
         notification={notification}
-          onMoveDown={onMoveDown}
+        onMoveDown={this.handleMoveDown}
-          onMoveUp={onMoveUp}
+        onMoveUp={this.handleMoveUp}
-          onMention={onMention}
+        onMention={this.props.onMention}
         contextType='notifications'
-          getScrollPosition={getScrollPosition}
+        getScrollPosition={this.props.getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
+        updateScrollBottom={this.props.updateScrollBottom}
         cachedMediaWidth={this.props.cachedMediaWidth}
         cacheMediaWidth={this.props.cacheMediaWidth}
         onUnmount={this.props.onUnmount}
@@ -182,22 +226,24 @@ export default class Notification extends ImmutablePureComponent {
         unread={this.props.unread}
       />
     );
-    case 'poll':
+  }
+
+  renderStatus (notification) {
     return (
       <StatusContainer
         containerId={notification.get('id')}
-          hidden={hidden}
+        hidden={!!this.props.hidden}
         id={notification.get('status')}
         account={notification.get('account')}
-          prepend='poll'
+        prepend='status'
         muted
         notification={notification}
-          onMoveDown={onMoveDown}
+        onMoveDown={this.handleMoveDown}
-          onMoveUp={onMoveUp}
+        onMoveUp={this.handleMoveUp}
-          onMention={onMention}
+        onMention={this.props.onMention}
         contextType='notifications'
-          getScrollPosition={getScrollPosition}
+        getScrollPosition={this.props.getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
+        updateScrollBottom={this.props.updateScrollBottom}
         cachedMediaWidth={this.props.cachedMediaWidth}
         cacheMediaWidth={this.props.cacheMediaWidth}
         onUnmount={this.props.onUnmount}
@@ -205,22 +251,24 @@ export default class Notification extends ImmutablePureComponent {
         unread={this.props.unread}
       />
     );
-    case 'update':
+  }
+
+  renderUpdate (notification) {
     return (
       <StatusContainer
         containerId={notification.get('id')}
-          hidden={hidden}
+        hidden={!!this.props.hidden}
         id={notification.get('status')}
         account={notification.get('account')}
         prepend='update'
         muted
         notification={notification}
-          onMoveDown={onMoveDown}
+        onMoveDown={this.handleMoveDown}
-          onMoveUp={onMoveUp}
+        onMoveUp={this.handleMoveUp}
-          onMention={onMention}
+        onMention={this.props.onMention}
         contextType='notifications'
-          getScrollPosition={getScrollPosition}
+        getScrollPosition={this.props.getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
+        updateScrollBottom={this.props.updateScrollBottom}
         cachedMediaWidth={this.props.cachedMediaWidth}
         cacheMediaWidth={this.props.cacheMediaWidth}
         onUnmount={this.props.onUnmount}
@@ -228,9 +276,135 @@ export default class Notification extends ImmutablePureComponent {
         unread={this.props.unread}
       />
     );
-    default:
+  }
+
+  renderPoll (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='poll'
+        muted
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        withDismiss
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderAdminSignUp (notification, account, link) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminSignUp, { name: account.get('acct') }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='user-plus' icon={PersonAddIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.admin.sign_up' defaultMessage='{name} signed up' values={{ name: link }} />
+            </span>
+          </div>
+
+          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+  renderAdminReport (notification, account, link) {
+    const { intl, unread, report } = this.props;
+
+    if (!report) {
       return null;
     }
+
+    const targetAccount = report.get('target_account');
+    const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
+    const targetLink = (
+      <bdi>
+        <Permalink
+          className='notification__display-name'
+          href={account.get('url')}
+          title={targetAccount.get('acct')}
+          to={`/@${targetAccount.get('acct')}`}
+          dangerouslySetInnerHTML={targetDisplayNameHtml}
+        />
+      </bdi>
+    );
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: account.get('acct'), target: notification.getIn(['report', 'target_account', 'acct']) }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='flag' icon={FlagIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />
+            </span>
+          </div>
+
+          <Report account={account} report={notification.get('report')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+  render () {
+    const { notification } = this.props;
+    const account          = notification.get('account');
+    const displayNameHtml  = { __html: account.get('display_name_html') };
+    const link             = (
+      <bdi>
+        <Permalink
+          className='notification__display-name'
+          href={`/@${account.get('acct')}`}
+          title={account.get('acct')}
+          to={`/@${account.get('acct')}`}
+          dangerouslySetInnerHTML={displayNameHtml}
+        />
+      </bdi>
+    );
+
+    switch(notification.get('type')) {
+    case 'follow':
+      return this.renderFollow(notification, account, link);
+    case 'follow_request':
+      return this.renderFollowRequest(notification, account, link);
+    case 'mention':
+      return this.renderMention(notification);
+    case 'favourite':
+      return this.renderFavourite(notification);
+    case 'reblog':
+      return this.renderReblog(notification);
+    case 'status':
+      return this.renderStatus(notification);
+    case 'update':
+      return this.renderUpdate(notification);
+    case 'poll':
+      return this.renderPoll(notification);
+    case 'admin.sign_up':
+      return this.renderAdminSignUp(notification, account, link);
+    case 'admin.report':
+      return this.renderAdminReport(notification, account, link);
+    }
+
+    return null;
   }
 
 }
+
+export default withRouter(injectIntl(Notification));

app/javascript/flavours/glitch/features/notifications/containers/admin_report_container.js

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import { makeGetReport } from 'flavours/glitch/selectors';
-
-import AdminReport from '../components/admin_report';
-
-const mapStateToProps = (state, { notification }) => {
-  const getReport = makeGetReport();
-
-  return {
-    report: notification.get('report') ? getReport(state, notification.get('report'), notification.getIn(['report', 'target_account', 'id'])) : null,
-  };
-};
-
-export default connect(mapStateToProps)(AdminReport);

app/javascript/flavours/glitch/features/notifications/containers/notification_container.js

@@ -1,24 +1,62 @@
 import { connect } from 'react-redux';
 
-import { mentionCompose } from 'flavours/glitch/actions/compose';
+import { initBoostModal } from '../../../actions/boosts';
-import { makeGetNotification } from 'flavours/glitch/selectors';
+import { mentionCompose } from '../../../actions/compose';
-
+import {
+  reblog,
+  favourite,
+  unreblog,
+  unfavourite,
+} from '../../../actions/interactions';
+import { boostModal } from '../../../initial_state';
+import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
 import Notification from '../components/notification';
 
 const makeMapStateToProps = () => {
   const getNotification = makeGetNotification();
+  const getStatus = makeGetStatus();
+  const getReport = makeGetReport();
 
-  const mapStateToProps = (state, props) => ({
+  const mapStateToProps = (state, props) => {
-    notification: getNotification(state, props.notification, props.accountId),
+    const notification = getNotification(state, props.notification, props.accountId);
+    return {
+      notification: notification,
+      status: notification.get('status') ? getStatus(state, { id: notification.get('status'), contextType: 'notifications' }) : null,
+      report: notification.get('report') ? getReport(state, notification.get('report'), notification.getIn(['report', 'target_account', 'id'])) : null,
       notifCleaning: state.getIn(['notifications', 'cleaningMode']),
-  });
+    };
+  };
 
   return mapStateToProps;
 };
 
 const mapDispatchToProps = dispatch => ({
-  onMention: (account, history) => {
+  onMention: (account, router) => {
-    dispatch(mentionCompose(account, history));
+    dispatch(mentionCompose(account, router));
+  },
+
+  onModalReblog (status, privacy) {
+    dispatch(reblog(status, privacy));
+  },
+
+  onReblog (status, e) {
+    if (status.get('reblogged')) {
+      dispatch(unreblog(status));
+    } else {
+      if (e.shiftKey || !boostModal) {
+        this.onModalReblog(status);
+      } else {
+        dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
+      }
+    }
+  },
+
+  onFavourite (status) {
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
   },
 });