Fix: Unable to approve follower requests from notifications

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
react-query-api
marcin mikołajczak 2022-07-30 23:31:38 +02:00
rodzic 018bf3705b
commit e45623eef6
4 zmienionych plików z 49 dodań i 5 usunięć

Wyświetl plik

@ -47,7 +47,7 @@ interface IAccount {
actionIcon?: string,
actionTitle?: string,
/** Override other actions for specificity like mute/unmute. */
actionType?: 'muting' | 'blocking',
actionType?: 'muting' | 'blocking' | 'follow_request',
avatarSize?: number,
hidden?: boolean,
hideActions?: boolean,

Wyświetl plik

@ -7,6 +7,7 @@ import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display-name';
import IconButton from 'soapbox/components/icon_button';
import Permalink from 'soapbox/components/permalink';
import { Text } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
@ -42,12 +43,12 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
return (
<div className='account-authorize__wrapper'>
<div className='account-authorize'>
<Permalink href={`/@${account.acct}`} to={`/@${account.acct}`} className='detailed-status__display-name'>
<Permalink href={`/@${account.acct}`} to={`/@${account.acct}`}>
<div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
<DisplayName account={account} />
</Permalink>
<div className='account__header__content' dangerouslySetInnerHTML={content} />
<Text className='account__header__content' dangerouslySetInnerHTML={content} />
</div>
<div className='account--panel'>

Wyświetl plik

@ -271,6 +271,14 @@ const Notification: React.FC<INotificaton> = (props) => {
switch (type) {
case 'follow':
case 'follow_request':
return account && typeof account === 'object' ? (
<AccountContainer
id={account.id}
hidden={hidden}
avatarSize={48}
actionType='follow_request'
/>
) : null;
case 'user_approved':
return account && typeof account === 'object' ? (
<AccountContainer

Wyświetl plik

@ -9,9 +9,11 @@ import {
unblockAccount,
muteAccount,
unmuteAccount,
authorizeFollowRequest,
rejectFollowRequest,
} from 'soapbox/actions/accounts';
import { openModal } from 'soapbox/actions/modals';
import { Button } from 'soapbox/components/ui';
import { Button, HStack } from 'soapbox/components/ui';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
import type { Account as AccountEntity } from 'soapbox/types/entities';
@ -28,13 +30,15 @@ const messages = defineMessages({
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
});
interface IActionButton {
/** Target account for the action. */
account: AccountEntity
/** Type of action to prioritize, eg on Blocks and Mutes pages. */
actionType?: 'muting' | 'blocking'
actionType?: 'muting' | 'blocking' | 'follow_request'
/** Displays shorter text on the "Awaiting approval" button. */
small?: boolean
}
@ -75,6 +79,14 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
}
};
const handleAuthorize = () => {
dispatch(authorizeFollowRequest(account.id));
};
const handleReject = () => {
dispatch(rejectFollowRequest(account.id));
};
const handleRemoteFollow = () => {
dispatch(openModal('UNAUTHORIZED', {
action: 'FOLLOW',
@ -115,6 +127,27 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
);
};
const followRequestAction = () => {
if (account.relationship?.followed_by) return null;
return (
<HStack space={2}>
<Button
theme='secondary'
size='sm'
text={intl.formatMessage(messages.authorize)}
onClick={handleAuthorize}
/>
<Button
theme='danger'
size='sm'
text={intl.formatMessage(messages.reject)}
onClick={handleReject}
/>
</HStack>
);
};
/** Render a remote follow button, depending on features. */
const renderRemoteFollow = () => {
// Remote follow through the API.
@ -162,6 +195,8 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
return mutingAction();
} else if (actionType === 'blocking') {
return blockingAction();
} else if (actionType === 'follow_request') {
return followRequestAction();
}
}