Fix subscribe WebUI

This commit is contained in:
noellabo 2020-07-19 12:12:09 +09:00
parent 40101fc7ae
commit 5b1f641fd2
10 changed files with 240 additions and 50 deletions

View file

@ -1,6 +1,5 @@
import api, { getLinks } from '../api';
import { importFetchedAccount, importFetchedAccounts } from './importer';
import { Map as ImmutableMap } from 'immutable';
export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
export const ACCOUNT_FETCH_SUCCESS = 'ACCOUNT_FETCH_SUCCESS';

View file

@ -9,7 +9,6 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { me, show_followed_by, follow_button_to_list_adder } from '../initial_state';
import RelativeTimestamp from './relative_timestamp';
import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
@ -129,12 +128,33 @@ class Account extends ImmutablePureComponent {
} else {
let following_buttons, subscribing_buttons;
if (!account.get('moved') || subscribing ) {
subscribing_buttons = <IconButton icon='rss-square' title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe)} onClick={this.handleSubscribe} active={subscribing} no_delivery={subscribing && !subscribing_home} />;
subscribing_buttons = (
<IconButton
icon='rss-square'
title={intl.formatMessage(
subscribing ? messages.unsubscribe : messages.subscribe
)}
onClick={this.handleSubscribe}
active={subscribing}
no_delivery={subscribing && !subscribing_home}
/>
);
}
if (!account.get('moved') || following) {
following_buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} passive={followed_by} no_delivery={following && !delivery} />;
following_buttons = (
<IconButton
icon={following ? 'user-times' : 'user-plus'}
title={intl.formatMessage(
following ? messages.unfollow : messages.follow
)}
onClick={this.handleFollow}
active={following}
passive={followed_by}
no_delivery={following && !delivery}
/>
);
}
buttons = <span>{subscribing_buttons}{following_buttons}</span>
buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
}
}

View file

@ -16,7 +16,6 @@ import {
import { openModal } from '../actions/modal';
import { initMuteModal } from '../actions/mutes';
import { unfollowModal, unsubscribeModal } from '../initial_state';
import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },

View file

@ -50,7 +50,6 @@ import { deployPictureInPicture } from '../actions/picture_in_picture';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { boostModal, deleteModal, unfollowModal, unsubscribeModal } from '../initial_state';
import { showAlertForError } from '../actions/alerts';
import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -14,7 +14,6 @@ import ShortNumber from 'mastodon/components/short_number';
import { NavLink } from 'react-router-dom';
import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
import AccountNoteContainer from '../containers/account_note_container';
import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@ -297,12 +296,33 @@ class Header extends ImmutablePureComponent {
if(me !== account.get('id') && !blockd_by) {
let following_buttons, subscribing_buttons;
if(!account.get('moved') || subscribing) {
subscribing_buttons = <IconButton icon='rss-square' title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe)} onClick={this.handleSubscribe} active={subscribing} no_delivery={subscribing && !subscribing_home} />;
subscribing_buttons = (
<IconButton
icon='rss-square'
title={intl.formatMessage(
subscribing ? messages.unsubscribe : messages.subscribe
)}
onClick={this.handleSubscribe}
active={subscribing}
no_delivery={subscribing && !subscribing_home}
/>
);
}
if(!account.get('moved') || following) {
following_buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} passive={followed_by} no_delivery={following && !delivery} />;
following_buttons = (
<IconButton
icon={following ? 'user-times' : 'user-plus'}
title={intl.formatMessage(
following ? messages.unfollow : messages.follow
)}
onClick={this.handleFollow}
active={following}
passive={followed_by}
no_delivery={following && !delivery}
/>
);
}
buttons = <span>{subscribing_buttons}{following_buttons}</span>
buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
}
return (

View file

@ -10,7 +10,14 @@ import Permalink from 'mastodon/components/permalink';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import IconButton from 'mastodon/components/icon_button';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { autoPlayGif, me, unfollowModal, unsubscribeModal, show_followed_by } from 'mastodon/initial_state';
import {
autoPlayGif,
me,
unfollowModal,
unsubscribeModal,
show_followed_by,
follow_button_to_list_adder,
} from 'mastodon/initial_state';
import ShortNumber from 'mastodon/components/short_number';
import {
followAccount,
@ -19,11 +26,10 @@ import {
unsubscribeAccount,
blockAccount,
unblockAccount,
unmuteAccount
unmuteAccount,
} from 'mastodon/actions/accounts';
import { openModal } from 'mastodon/actions/modal';
import { initMuteModal } from 'mastodon/actions/mutes';
import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
@ -262,7 +268,7 @@ class AccountCard extends ImmutablePureComponent {
/>
);
}
buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>
buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
}
}

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
@ -10,11 +10,20 @@ import Permalink from 'mastodon/components/permalink';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import IconButton from 'mastodon/components/icon_button';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
import {
autoPlayGif,
me,
unfollowModal,
unsubscribeModal,
show_followed_by,
follow_button_to_list_adder,
} from 'mastodon/initial_state';
import ShortNumber from 'mastodon/components/short_number';
import {
followAccount,
unfollowAccount,
subscribeAccount,
unsubscribeAccount,
blockAccount,
unblockAccount,
unmuteAccount,
@ -25,6 +34,8 @@ import { initMuteModal } from 'mastodon/actions/mutes';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe' },
subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe' },
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
@ -32,6 +43,10 @@ const messages = defineMessages({
id: 'confirmations.unfollow.confirm',
defaultMessage: 'Unfollow',
},
unsubscribeConfirm: {
id: 'confirmations.unsubscribe.confirm',
defaultMessage: 'Unsubscribe'
},
});
const makeMapStateToProps = () => {
@ -72,6 +87,28 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
},
onSubscribe(account) {
if (account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0) {
if (unsubscribeModal) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.unsubscribe.message' defaultMessage='Are you sure you want to unsubscribe {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.unsubscribeConfirm),
onConfirm: () => dispatch(unsubscribeAccount(account.get('id'))),
}));
} else {
dispatch(unsubscribeAccount(account.get('id')));
}
} else {
dispatch(subscribeAccount(account.get('id')));
}
},
onAddToList(account){
dispatch(openModal('LIST_ADDER', {
accountId: account.get('id'),
}));
},
onBlock(account) {
if (account.getIn(['relationship', 'blocking'])) {
dispatch(unblockAccount(account.get('id')));
@ -98,6 +135,8 @@ class AccountCard extends ImmutablePureComponent {
account: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
onFollow: PropTypes.func.isRequired,
onSubscribe: PropTypes.func.isRequired,
onAddToList: PropTypes.func.isRequired,
onBlock: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
};
@ -139,8 +178,20 @@ class AccountCard extends ImmutablePureComponent {
target.src = target.getAttribute('data-static');
};
handleFollow = () => {
this.props.onFollow(this.props.account);
handleFollow = (e) => {
if ((e && e.shiftKey) || !follow_button_to_list_adder) {
this.props.onFollow(this.props.account);
} else {
this.props.onAddToList(this.props.account);
}
};
handleSubscribe = (e) => {
if ((e && e.shiftKey) || !follow_button_to_list_adder) {
this.props.onSubscribe(this.props.account);
} else {
this.props.onAddToList(this.props.account);
}
};
handleBlock = () => {
@ -165,6 +216,10 @@ class AccountCard extends ImmutablePureComponent {
account.get('relationship', null) !== null
) {
const following = account.getIn(['relationship', 'following']);
const delivery = account.getIn(['relationship', 'delivery_following']);
const followed_by = account.getIn(['relationship', 'followed_by']) && show_followed_by;
const subscribing = account.getIn(['relationship', 'subscribing'], new Map).size > 0;
const subscribing_home = account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0;
const requested = account.getIn(['relationship', 'requested']);
const blocking = account.getIn(['relationship', 'blocking']);
const muting = account.getIn(['relationship', 'muting']);
@ -200,16 +255,35 @@ class AccountCard extends ImmutablePureComponent {
/>
);
} else if (!account.get('moved') || following) {
buttons = (
<IconButton
icon={following ? 'user-times' : 'user-plus'}
title={intl.formatMessage(
following ? messages.unfollow : messages.follow,
)}
onClick={this.handleFollow}
active={following}
/>
);
let following_buttons, subscribing_buttons;
if(!account.get('moved') || subscribing) {
subscribing_buttons = (
<IconButton
icon='rss-square'
title={intl.formatMessage(
subscribing ? messages.unsubscribe : messages.subscribe
)}
onClick={this.handleSubscribe}
active={subscribing}
no_delivery={subscribing && !subscribing_home}
/>
);
}
if(!account.get('moved') || following) {
following_buttons = (
<IconButton
icon={following ? 'user-times' : 'user-plus'}
title={intl.formatMessage(
following ? messages.unfollow : messages.follow
)}
onClick={this.handleFollow}
active={following}
passive={followed_by}
no_delivery={following && !delivery}
/>
);
}
buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
}
}

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
@ -9,11 +9,20 @@ import Avatar from 'mastodon/components/avatar';
import DisplayName from 'mastodon/components/display_name';
import IconButton from 'mastodon/components/icon_button';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
import {
autoPlayGif,
me,
unfollowModal,
unsubscribeModal,
show_followed_by,
follow_button_to_list_adder,
} from 'mastodon/initial_state';
import ShortNumber from 'mastodon/components/short_number';
import {
followAccount,
unfollowAccount,
subscribeAccount,
unsubscribeAccount,
blockAccount,
unblockAccount,
unmuteAccount,
@ -24,6 +33,8 @@ import { initMuteModal } from 'mastodon/actions/mutes';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe' },
subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe' },
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
@ -31,6 +42,10 @@ const messages = defineMessages({
id: 'confirmations.unfollow.confirm',
defaultMessage: 'Unfollow',
},
unsubscribeConfirm: {
id: 'confirmations.unsubscribe.confirm',
defaultMessage: 'Unsubscribe'
},
});
const makeMapStateToProps = () => {
@ -71,6 +86,28 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
},
onSubscribe(account) {
if (account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0) {
if (unsubscribeModal) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.unsubscribe.message' defaultMessage='Are you sure you want to unsubscribe {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.unsubscribeConfirm),
onConfirm: () => dispatch(unsubscribeAccount(account.get('id'))),
}));
} else {
dispatch(unsubscribeAccount(account.get('id')));
}
} else {
dispatch(subscribeAccount(account.get('id')));
}
},
onAddToList(account){
dispatch(openModal('LIST_ADDER', {
accountId: account.get('id'),
}));
},
onBlock(account) {
if (account.getIn(['relationship', 'blocking'])) {
dispatch(unblockAccount(account.get('id')));
@ -97,6 +134,8 @@ class GroupDetail extends ImmutablePureComponent {
account: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
onFollow: PropTypes.func.isRequired,
onSubscribe: PropTypes.func.isRequired,
onAddToList: PropTypes.func.isRequired,
onBlock: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
};
@ -138,8 +177,20 @@ class GroupDetail extends ImmutablePureComponent {
target.src = target.getAttribute('data-static');
};
handleFollow = () => {
this.props.onFollow(this.props.account);
handleFollow = (e) => {
if ((e && e.shiftKey) || !follow_button_to_list_adder) {
this.props.onFollow(this.props.account);
} else {
this.props.onAddToList(this.props.account);
}
};
handleSubscribe = (e) => {
if ((e && e.shiftKey) || !follow_button_to_list_adder) {
this.props.onSubscribe(this.props.account);
} else {
this.props.onAddToList(this.props.account);
}
};
handleBlock = () => {
@ -163,10 +214,14 @@ class GroupDetail extends ImmutablePureComponent {
account.get('id') !== me &&
account.get('relationship', null) !== null
) {
const following = account.getIn(['relationship', 'following']);
const requested = account.getIn(['relationship', 'requested']);
const blocking = account.getIn(['relationship', 'blocking']);
const muting = account.getIn(['relationship', 'muting']);
const following = account.getIn(['relationship', 'following']);
const delivery = account.getIn(['relationship', 'delivery_following']);
const followed_by = account.getIn(['relationship', 'followed_by']) && show_followed_by;
const subscribing = account.getIn(['relationship', 'subscribing'], new Map).size > 0;
const subscribing_home = account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0;
const requested = account.getIn(['relationship', 'requested']);
const blocking = account.getIn(['relationship', 'blocking']);
const muting = account.getIn(['relationship', 'muting']);
if (requested) {
buttons = (
@ -199,16 +254,35 @@ class GroupDetail extends ImmutablePureComponent {
/>
);
} else if (!account.get('moved') || following) {
buttons = (
<IconButton
icon={following ? 'user-times' : 'user-plus'}
title={intl.formatMessage(
following ? messages.unfollow : messages.follow,
)}
onClick={this.handleFollow}
active={following}
/>
);
let following_buttons, subscribing_buttons;
if(!account.get('moved') || subscribing) {
subscribing_buttons = (
<IconButton
icon='rss-square'
title={intl.formatMessage(
subscribing ? messages.unsubscribe : messages.subscribe
)}
onClick={this.handleSubscribe}
active={subscribing}
no_delivery={subscribing && !subscribing_home}
/>
);
}
if(!account.get('moved') || following) {
following_buttons = (
<IconButton
icon={following ? 'user-times' : 'user-plus'}
title={intl.formatMessage(
following ? messages.unfollow : messages.follow
)}
onClick={this.handleFollow}
active={following}
passive={followed_by}
no_delivery={following && !delivery}
/>
);
}
buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
}
}

View file

@ -10,7 +10,6 @@ import { unfollowAccount, followAccount } from '../../../actions/accounts';
import { me, show_followed_by, unfollowModal } from '../../../initial_state';
import { openModal } from '../../../actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },

View file

@ -6165,7 +6165,7 @@ a.status-card.compact:hover {
}
&__relationship {
width: 23px;
width: 46px;
min-height: 1px;
flex: 0 0 auto;
}