-
+
);
}
}
-export default withRouter(injectIntl(FollowRequest));
+export default injectIntl(FollowRequest);
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
index 1d476969cb..4aac5e8d6d 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
@@ -1,236 +1,410 @@
-// 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 NotificationFollowRequestContainer from '../containers/follow_request_container';
+import FollowRequestContainer from '../containers/follow_request_container';
+import NotificationOverlayContainer from '../containers/overlay_container';
-import NotificationAdminSignup from './admin_signup';
-import NotificationFollow from './follow';
+import Report from './report';
-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,
};
+ handleMoveUp = () => {
+ const { notification, onMoveUp } = this.props;
+ onMoveUp(notification.get('id'));
+ };
+
+ handleMoveDown = () => {
+ const { notification, onMoveDown } = this.props;
+ onMoveDown(notification.get('id'));
+ };
+
+ 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;
+
+ return (
+
+
+
+ );
+ }
+
+ renderFollowRequest (notification, account, link) {
+ const { intl, unread } = this.props;
+
+ return (
+
+
+
+ );
+ }
+
+ renderMention (notification) {
+ return (
+
+ );
+ }
+
+ renderFavourite (notification) {
+ return (
+
+ );
+ }
+
+ renderReblog (notification) {
+ return (
+
+ );
+ }
+
+ renderStatus (notification) {
+ return (
+
+ );
+ }
+
+ renderUpdate (notification) {
+ return (
+
+ );
+ }
+
+ renderPoll (notification) {
+ return (
+
+ );
+ }
+
+ renderAdminSignUp (notification, account, link) {
+ const { intl, unread } = this.props;
+
+ return (
+
+
+
+ );
+ }
+
+ 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 = (
+
+
+
+ );
+
+ return (
+
+
+
+ );
+ }
+
render () {
- const {
- hidden,
- notification,
- onMoveDown,
- onMoveUp,
- onMention,
- getScrollPosition,
- updateScrollBottom,
- } = this.props;
+ const { notification } = this.props;
+ const account = notification.get('account');
+ const displayNameHtml = { __html: account.get('display_name_html') };
+ const link = (
+
+
+
+ );
switch(notification.get('type')) {
case 'follow':
- return (
-
- );
+ return this.renderFollow(notification, account, link);
case 'follow_request':
- return (
-
- );
- case 'admin.sign_up':
- return (
-
- );
- case 'admin.report':
- return (
-
- );
+ return this.renderFollowRequest(notification, account, link);
case 'mention':
- return (
-
- );
- case 'status':
- return (
-
- );
+ return this.renderMention(notification);
case 'favourite':
- return (
-
- );
+ return this.renderFavourite(notification);
case 'reblog':
- return (
-
- );
- case 'poll':
- return (
-
- );
+ return this.renderReblog(notification);
+ case 'status':
+ return this.renderStatus(notification);
case 'update':
- return (
-
- );
- default:
- return null;
+ 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));
diff --git a/app/javascript/flavours/glitch/features/notifications/containers/admin_report_container.js b/app/javascript/flavours/glitch/features/notifications/containers/admin_report_container.js
deleted file mode 100644
index 62809b57b2..0000000000
--- a/app/javascript/flavours/glitch/features/notifications/containers/admin_report_container.js
+++ /dev/null
@@ -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);
diff --git a/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js b/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
index 2fda4ac3a2..8a4b5c8ed5 100644
--- a/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
+++ b/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 { makeGetNotification } from 'flavours/glitch/selectors';
-
+import { initBoostModal } from '../../../actions/boosts';
+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) => ({
- notification: getNotification(state, props.notification, props.accountId),
- notifCleaning: state.getIn(['notifications', 'cleaningMode']),
- });
+ const mapStateToProps = (state, props) => {
+ 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) => {
- dispatch(mentionCompose(account, history));
+ onMention: (account, router) => {
+ 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));
+ }
},
});