diff --git a/app/soapbox/features/notifications/components/follow_request.js b/app/soapbox/features/notifications/components/follow_request.js
new file mode 100644
index 000000000..c15d8de23
--- /dev/null
+++ b/app/soapbox/features/notifications/components/follow_request.js
@@ -0,0 +1,59 @@
+import React, { Fragment } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display_name';
+import Permalink from 'soapbox/components/permalink';
+import IconButton from 'soapbox/components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const messages = defineMessages({
+ authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
+ reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
+});
+
+export default @injectIntl
+class FollowRequest extends ImmutablePureComponent {
+
+ static propTypes = {
+ account: ImmutablePropTypes.map.isRequired,
+ onAuthorize: PropTypes.func.isRequired,
+ onReject: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ render() {
+ const { intl, hidden, account, onAuthorize, onReject } = this.props;
+
+ if (!account) {
+ return
;
+ }
+
+ if (hidden) {
+ return (
+
+ {account.get('display_name')}
+ {account.get('username')}
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js
index 73fa00629..c189e2c17 100644
--- a/app/soapbox/features/notifications/components/notification.js
+++ b/app/soapbox/features/notifications/components/notification.js
@@ -7,8 +7,10 @@ import { injectIntl, FormattedMessage } from 'react-intl';
import Permalink from '../../../components/permalink';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
+import FollowRequestContainer from '../containers/follow_request_container';
import Icon from 'soapbox/components/icon';
import emojify from 'soapbox/features/emoji/emoji';
+import classNames from 'classnames';
const notificationForScreenReader = (intl, message, timestamp) => {
const output = [message];
@@ -125,6 +127,28 @@ class Notification extends ImmutablePureComponent {
);
}
+ renderFollowRequest(notification, account, link) {
+ const { intl, unread } = this.props;
+
+ return (
+
+
+
+ );
+ }
+
renderMention(notification) {
return (
{
+ const getAccount = makeGetAccount();
+
+ const mapStateToProps = (state, props) => ({
+ account: getAccount(state, props.id),
+ });
+
+ return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch, { id }) => ({
+ onAuthorize() {
+ dispatch(authorizeFollowRequest(id));
+ },
+
+ onReject() {
+ dispatch(rejectFollowRequest(id));
+ },
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(FollowRequest);
diff --git a/app/soapbox/reducers/__tests__/push_notifications-test.js b/app/soapbox/reducers/__tests__/push_notifications-test.js
index 7c47f4dd7..97e75df54 100644
--- a/app/soapbox/reducers/__tests__/push_notifications-test.js
+++ b/app/soapbox/reducers/__tests__/push_notifications-test.js
@@ -7,6 +7,7 @@ describe('push_notifications reducer', () => {
subscription: null,
alerts: new ImmutableMap({
follow: false,
+ follow_request: false,
favourite: false,
reblog: false,
mention: false,
diff --git a/app/soapbox/reducers/notifications.js b/app/soapbox/reducers/notifications.js
index 68cc90c29..e37b51151 100644
--- a/app/soapbox/reducers/notifications.js
+++ b/app/soapbox/reducers/notifications.js
@@ -14,6 +14,8 @@ import {
import {
ACCOUNT_BLOCK_SUCCESS,
ACCOUNT_MUTE_SUCCESS,
+ FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
+ FOLLOW_REQUEST_REJECT_SUCCESS,
} from '../actions/accounts';
import { TIMELINE_DELETE } from '../actions/timelines';
import { Map as ImmutableMap, OrderedMap as ImmutableOrderedMap } from 'immutable';
@@ -88,6 +90,11 @@ const filterNotifications = (state, relationship) => {
return state.update('items', map => map.filterNot(item => item !== null && item.get('account') === relationship.id));
};
+const filterNotificationIds = (state, accountIds, type) => {
+ const helper = list => list.filterNot(item => item !== null && accountIds.includes(item.get('account')) && (type === undefined || type === item.get('type')));
+ return state.update('items', helper);
+};
+
const updateTop = (state, top) => {
if (top) state = state.set('unread', 0);
return state.set('top', top);
@@ -149,6 +156,9 @@ export default function notifications(state = initialState, action) {
return filterNotifications(state, action.relationship);
case ACCOUNT_MUTE_SUCCESS:
return action.relationship.muting_notifications ? filterNotifications(state, action.relationship) : state;
+ case FOLLOW_REQUEST_AUTHORIZE_SUCCESS:
+ case FOLLOW_REQUEST_REJECT_SUCCESS:
+ return filterNotificationIds(state, [action.id], 'follow_request');
case NOTIFICATIONS_CLEAR:
return state.set('items', ImmutableOrderedMap()).set('hasMore', false);
case NOTIFICATIONS_MARK_READ_REQUEST:
diff --git a/app/soapbox/reducers/push_notifications.js b/app/soapbox/reducers/push_notifications.js
index 6b9001684..1ca54e6e1 100644
--- a/app/soapbox/reducers/push_notifications.js
+++ b/app/soapbox/reducers/push_notifications.js
@@ -5,6 +5,7 @@ const initialState = Immutable.Map({
subscription: null,
alerts: new Immutable.Map({
follow: false,
+ follow_request: false,
favourite: false,
reblog: false,
mention: false,
diff --git a/app/soapbox/reducers/user_lists.js b/app/soapbox/reducers/user_lists.js
index 9dd079203..b96f3ce03 100644
--- a/app/soapbox/reducers/user_lists.js
+++ b/app/soapbox/reducers/user_lists.js
@@ -1,3 +1,6 @@
+import {
+ NOTIFICATIONS_UPDATE,
+} from '../actions/notifications';
import {
FOLLOWERS_FETCH_SUCCESS,
FOLLOWERS_EXPAND_SUCCESS,
@@ -54,6 +57,12 @@ const appendToList = (state, type, id, accounts, next) => {
});
};
+const normalizeFollowRequest = (state, notification) => {
+ return state.updateIn(['follow_requests', 'items'], list => {
+ return list.filterNot(item => item === notification.account.id).unshift(notification.account.id);
+ });
+};
+
export default function userLists(state = initialState, action) {
switch(action.type) {
case FOLLOWERS_FETCH_SUCCESS:
@@ -68,6 +77,8 @@ export default function userLists(state = initialState, action) {
return state.setIn(['reblogged_by', action.id], ImmutableOrderedSet(action.accounts.map(item => item.id)));
case FAVOURITES_FETCH_SUCCESS:
return state.setIn(['favourited_by', action.id], ImmutableOrderedSet(action.accounts.map(item => item.id)));
+ case NOTIFICATIONS_UPDATE:
+ return action.notification.type === 'follow_request' ? normalizeFollowRequest(state, action.notification) : state;
case FOLLOW_REQUESTS_FETCH_SUCCESS:
return state.setIn(['follow_requests', 'items'], ImmutableOrderedSet(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
case FOLLOW_REQUESTS_EXPAND_SUCCESS:
diff --git a/app/soapbox/service_worker/web_push_locales.js b/app/soapbox/service_worker/web_push_locales.js
index 5ce8c7b50..1265f3cfa 100644
--- a/app/soapbox/service_worker/web_push_locales.js
+++ b/app/soapbox/service_worker/web_push_locales.js
@@ -16,6 +16,7 @@ filenames.forEach(filename => {
filtered[locale] = {
'notification.favourite': full['notification.favourite'] || '',
'notification.follow': full['notification.follow'] || '',
+ 'notification.follow_request': full['notification.follow_request'] || '',
'notification.mention': full['notification.mention'] || '',
'notification.reblog': full['notification.reblog'] || '',
'notification.poll': full['notification.poll'] || '',