moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

StatusActionBar: convert to tsx

This commit is contained in:
Alex Gleason 2022-04-01 18:39:27 -05:00
parent c59ff4e822
commit 4a8f08e313
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
6 changed files with 191 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
app/soapbox/components/status_action_bar.js → app/soapbox/components/status_action_bar.tsx
View File

@ -1,10 +1,8 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl, IntlShape } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
@ -20,12 +18,16 @@ import { isUserTouching } from 'soapbox/is_mobile';
import { isStaff, isAdmin } from 'soapbox/utils/accounts'; import { isStaff, isAdmin } from 'soapbox/utils/accounts';
import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts'; import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
import { openModal } from '../actions/modals'; import { openModal } from '../actions/modals';
import { IconButton, Hoverable } from './ui'; import { IconButton, Hoverable } from './ui';
import type { History } from 'history';
import type { AnyAction, Dispatch } from 'redux';
import type { RootState } from 'soapbox/store';
import type { Status } from 'soapbox/types/entities';
import type { Features } from 'soapbox/utils/features';
const messages = defineMessages({ const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' }, delete: { id: 'status.delete', defaultMessage: 'Delete' },
@ -72,63 +74,70 @@ const messages = defineMessages({
quotePost: { id: 'status.quote', defaultMessage: 'Quote post' }, quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
}); });
class StatusActionBar extends ImmutablePureComponent { interface IStatusActionBar {
status: Status,
onOpenUnauthorizedModal: (modalType?: string) => void,
onOpenReblogsModal: (acct: string, statusId: string) => void,
onReply: (status: Status, history: History) => void,
onFavourite: (status: Status) => void,
onBookmark: (status: Status) => void,
onReblog: (status: Status, e: React.MouseEvent) => void,
onQuote: (status: Status, history: History) => void,
onDelete: (status: Status, history: History, redraft?: boolean) => void,
onDirect: (account: any, history: History) => void,
onChat: (account: any, history: History) => void,
onMention: (account: any, history: History) => void,
onMute: (account: any) => void,
onBlock: (status: Status) => void,
onReport: (status: Status) => void,
onEmbed: (status: Status) => void,
onDeactivateUser: (status: Status) => void,
onDeleteUser: (status: Status) => void,
onToggleStatusSensitivity: (status: Status) => void,
onDeleteStatus: (status: Status) => void,
onMuteConversation: (status: Status) => void,
onPin: (status: Status) => void,
withDismiss: boolean,
withGroupAdmin: boolean,
intl: IntlShape,
me: string | null | false | undefined,
isStaff: boolean,
isAdmin: boolean,
allowedEmoji: ImmutableList<string>,
emojiSelectorFocused: boolean,
handleEmojiSelectorUnfocus: () => void,
features: Features,
history: History,
dispatch: Dispatch,
}
static propTypes = { interface IStatusActionBarState {
status: ImmutablePropTypes.record.isRequired, emojiSelectorVisible: boolean,
onOpenUnauthorizedModal: PropTypes.func.isRequired, }
onOpenReblogsModal: PropTypes.func.isRequired,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
onBookmark: PropTypes.func,
onReblog: PropTypes.func,
onQuote: PropTypes.func,
onDelete: PropTypes.func,
onDirect: PropTypes.func,
onChat: PropTypes.func,
onMention: PropTypes.func,
onMute: PropTypes.func,
onBlock: PropTypes.func,
onReport: PropTypes.func,
onEmbed: PropTypes.func,
onDeactivateUser: PropTypes.func,
onDeleteUser: PropTypes.func,
onToggleStatusSensitivity: PropTypes.func,
onDeleteStatus: PropTypes.func,
onMuteConversation: PropTypes.func,
onPin: PropTypes.func,
withDismiss: PropTypes.bool,
withGroupAdmin: PropTypes.bool,
intl: PropTypes.object.isRequired,
me: SoapboxPropTypes.me,
isStaff: PropTypes.bool.isRequired,
isAdmin: PropTypes.bool.isRequired,
allowedEmoji: ImmutablePropTypes.list,
emojiSelectorFocused: PropTypes.bool,
handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
features: PropTypes.object.isRequired,
history: PropTypes.object,
};
static defaultProps = { class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusActionBarState> {
static defaultProps: Partial<IStatusActionBar> = {
isStaff: false, isStaff: false,
} }
node?: HTMLDivElement = undefined;
state = { state = {
emojiSelectorVisible: false, emojiSelectorVisible: false,
} }
// Avoid checking props that are functions (and whose equality will always // Avoid checking props that are functions (and whose equality will always
// evaluate to false. See react-immutable-pure-component for usage. // evaluate to false. See react-immutable-pure-component for usage.
// @ts-ignore: the type checker is wrong.
updateOnProps = [ updateOnProps = [
'status', 'status',
'withDismiss', 'withDismiss',
'emojiSelectorFocused', 'emojiSelectorFocused',
] ]
handleReplyClick = (event) => { handleReplyClick = () => {
const { me, onReply, onOpenUnauthorizedModal, status } = this.props; const { me, onReply, onOpenUnauthorizedModal, status } = this.props;
event.stopPropagation();
if (me) { if (me) {
onReply(status, this.props.history); onReply(status, this.props.history);
@ -137,9 +146,7 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleShareClick = (e) => { handleShareClick = () => {
e.stopPropagation();
navigator.share({ navigator.share({
text: this.props.status.get('search_index'), text: this.props.status.get('search_index'),
url: this.props.status.get('url'), url: this.props.status.get('url'),
@ -148,7 +155,7 @@ class StatusActionBar extends ImmutablePureComponent {
}); });
} }
handleLikeButtonHover = e => { handleLikeButtonHover: React.EventHandler<React.MouseEvent> = () => {
const { features } = this.props; const { features } = this.props;
if (features.emojiReacts && !isUserTouching()) { if (features.emojiReacts && !isUserTouching()) {
@ -156,7 +163,7 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleLikeButtonLeave = e => { handleLikeButtonLeave: React.EventHandler<React.MouseEvent> = () => {
const { features } = this.props; const { features } = this.props;
if (features.emojiReacts && !isUserTouching()) { if (features.emojiReacts && !isUserTouching()) {
@ -164,10 +171,11 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleLikeButtonClick = e => { handleLikeButtonClick = () => {
const { features } = this.props; const { features } = this.props;
const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍'; const reactForStatus = getReactForStatus(this.props.status, this.props.allowedEmoji);
const meEmojiReact = typeof reactForStatus === 'string' ? reactForStatus : '👍';
if (features.emojiReacts && isUserTouching()) { if (features.emojiReacts && isUserTouching()) {
if (this.state.emojiSelectorVisible) { if (this.state.emojiSelectorVisible) {
@ -180,23 +188,23 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleReact = emoji => { handleReact = (emoji: string): void => {
const { me, dispatch, onOpenUnauthorizedModal, status } = this.props; const { me, dispatch, onOpenUnauthorizedModal, status } = this.props;
if (me) { if (me) {
dispatch(simpleEmojiReact(status, emoji)); dispatch(simpleEmojiReact(status, emoji) as any);
} else { } else {
onOpenUnauthorizedModal('FAVOURITE'); onOpenUnauthorizedModal('FAVOURITE');
} }
this.setState({ emojiSelectorVisible: false }); this.setState({ emojiSelectorVisible: false });
} }
handleReactClick = emoji => { handleReactClick = (emoji: string): React.EventHandler<React.MouseEvent> => {
return e => { return () => {
this.handleReact(emoji); this.handleReact(emoji);
}; };
} }
handleFavouriteClick = () => { handleFavouriteClick: React.EventHandler<React.MouseEvent> = () => {
const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props; const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props;
if (me) { if (me) {
onFavourite(status); onFavourite(status);
@ -205,12 +213,12 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleBookmarkClick = (e) => { handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onBookmark(this.props.status); this.props.onBookmark(this.props.status);
} }
handleReblogClick = e => { handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
const { me, onReblog, onOpenUnauthorizedModal, status } = this.props; const { me, onReblog, onOpenUnauthorizedModal, status } = this.props;
e.stopPropagation(); e.stopPropagation();
@ -221,7 +229,7 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleQuoteClick = (e) => { handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
const { me, onQuote, onOpenUnauthorizedModal, status } = this.props; const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
if (me) { if (me) {
@ -231,47 +239,47 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleDeleteClick = (e) => { handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onDelete(this.props.status, this.props.history); this.props.onDelete(this.props.status, this.props.history);
} }
handleRedraftClick = (e) => { handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onDelete(this.props.status, this.props.history, true); this.props.onDelete(this.props.status, this.props.history, true);
} }
handlePinClick = (e) => { handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onPin(this.props.status); this.props.onPin(this.props.status);
} }
handleMentionClick = (e) => { handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onMention(this.props.status.get('account'), this.props.history); this.props.onMention(this.props.status.get('account'), this.props.history);
} }
handleDirectClick = (e) => { handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onDirect(this.props.status.get('account'), this.props.history); this.props.onDirect(this.props.status.get('account'), this.props.history);
} }
handleChatClick = (e) => { handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onChat(this.props.status.get('account'), this.props.history); this.props.onChat(this.props.status.get('account'), this.props.history);
} }
handleMuteClick = (e) => { handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onMute(this.props.status.get('account')); this.props.onMute(this.props.status.get('account'));
} }
handleBlockClick = (e) => { handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onBlock(this.props.status); this.props.onBlock(this.props.status);
} }
handleOpen = (e) => { handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`); this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
} }
@ -280,17 +288,17 @@ class StatusActionBar extends ImmutablePureComponent {
this.props.onEmbed(this.props.status); this.props.onEmbed(this.props.status);
} }
handleReport = (e) => { handleReport: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onReport(this.props.status); this.props.onReport(this.props.status);
} }
handleConversationMuteClick = (e) => { handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onMuteConversation(this.props.status); this.props.onMuteConversation(this.props.status);
} }
handleCopy = (e) => { handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
const url = this.props.status.get('url'); const url = this.props.status.get('url');
const textarea = document.createElement('textarea'); const textarea = document.createElement('textarea');
@ -311,38 +319,38 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
handleGroupRemoveAccount = (e) => { // handleGroupRemoveAccount: React.EventHandler<React.MouseEvent> = (e) => {
const { status } = this.props; // const { status } = this.props;
//
// e.stopPropagation();
//
// this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
// }
//
// handleGroupRemovePost: React.EventHandler<React.MouseEvent> = (e) => {
// const { status } = this.props;
//
// e.stopPropagation();
//
// this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
// }
e.stopPropagation(); handleDeactivateUser: React.EventHandler<React.MouseEvent> = (e) => {
this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
}
handleGroupRemovePost = (e) => {
const { status } = this.props;
e.stopPropagation();
this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
}
handleDeactivateUser = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onDeactivateUser(this.props.status); this.props.onDeactivateUser(this.props.status);
} }
handleDeleteUser = (e) => { handleDeleteUser: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onDeleteUser(this.props.status); this.props.onDeleteUser(this.props.status);
} }
handleDeleteStatus = (e) => { handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onDeleteStatus(this.props.status); this.props.onDeleteStatus(this.props.status);
} }
handleToggleStatusSensitivity = (e) => { handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
e.stopPropagation(); e.stopPropagation();
this.props.onToggleStatusSensitivity(this.props.status); this.props.onToggleStatusSensitivity(this.props.status);
} }
@ -351,13 +359,14 @@ class StatusActionBar extends ImmutablePureComponent {
const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props; const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
if (!me) onOpenUnauthorizedModal(); if (!me) onOpenUnauthorizedModal();
else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id')); else onOpenReblogsModal(String(status.getIn(['account', 'acct'])), status.id);
} }
_makeMenu = (publicStatus) => { _makeMenu = (publicStatus: boolean) => {
const { status, intl, withDismiss, withGroupAdmin, me, features, isStaff, isAdmin } = this.props; const { status, intl, withDismiss, me, features, isStaff, isAdmin } = this.props;
const mutingConversation = status.get('muted'); const mutingConversation = status.get('muted');
const ownAccount = status.getIn(['account', 'id']) === me; const ownAccount = status.getIn(['account', 'id']) === me;
const username = String(status.getIn(['account', 'username']));
const menu = []; const menu = [];
@ -434,20 +443,20 @@ class StatusActionBar extends ImmutablePureComponent {
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.mention, { name: username }),
action: this.handleMentionClick, action: this.handleMentionClick,
icon: require('@tabler/icons/icons/at.svg'), icon: require('@tabler/icons/icons/at.svg'),
}); });
// if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) { // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
// menu.push({ // menu.push({
// text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }), // text: intl.formatMessage(messages.chat, { name: username }),
// action: this.handleChatClick, // action: this.handleChatClick,
// icon: require('@tabler/icons/icons/messages.svg'), // icon: require('@tabler/icons/icons/messages.svg'),
// }); // });
// } else { // } else {
// menu.push({ // menu.push({
// text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), // text: intl.formatMessage(messages.direct, { name: username }),
// action: this.handleDirectClick, // action: this.handleDirectClick,
// icon: require('@tabler/icons/icons/mail.svg'), // icon: require('@tabler/icons/icons/mail.svg'),
// }); // });
@ -455,17 +464,17 @@ class StatusActionBar extends ImmutablePureComponent {
menu.push(null); menu.push(null);
menu.push({ menu.push({
text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.mute, { name: username }),
action: this.handleMuteClick, action: this.handleMuteClick,
icon: require('@tabler/icons/icons/circle-x.svg'), icon: require('@tabler/icons/icons/circle-x.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.block, { name: username }),
action: this.handleBlockClick, action: this.handleBlockClick,
icon: require('@tabler/icons/icons/ban.svg'), icon: require('@tabler/icons/icons/ban.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.report, { name: username }),
action: this.handleReport, action: this.handleReport,
icon: require('@tabler/icons/icons/flag.svg'), icon: require('@tabler/icons/icons/flag.svg'),
}); });
@ -476,16 +485,16 @@ class StatusActionBar extends ImmutablePureComponent {
if (isAdmin) { if (isAdmin) {
menu.push({ menu.push({
text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.admin_account, { name: username }),
href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`, href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
icon: require('@tabler/icons/icons/gavel.svg'), icon: require('@tabler/icons/icons/gavel.svg'),
action: (event) => event.stopPropagation(), action: (event: Event) => event.stopPropagation(),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.admin_status), text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.get('id')}/`, href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
icon: require('@tabler/icons/icons/pencil.svg'), icon: require('@tabler/icons/icons/pencil.svg'),
action: (event) => event.stopPropagation(), action: (event: Event) => event.stopPropagation(),
}); });
} }
@ -497,12 +506,12 @@ class StatusActionBar extends ImmutablePureComponent {
if (!ownAccount) { if (!ownAccount) {
menu.push({ menu.push({
text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.deactivateUser, { name: username }),
action: this.handleDeactivateUser, action: this.handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'), icon: require('@tabler/icons/icons/user-off.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }), text: intl.formatMessage(messages.deleteUser, { name: username }),
action: this.handleDeleteUser, action: this.handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'), icon: require('@tabler/icons/icons/user-minus.svg'),
destructive: true, destructive: true,
@ -516,32 +525,32 @@ class StatusActionBar extends ImmutablePureComponent {
} }
} }
if (!ownAccount && withGroupAdmin) { // if (!ownAccount && withGroupAdmin) {
menu.push(null); // menu.push(null);
menu.push({ // menu.push({
text: intl.formatMessage(messages.group_remove_account), // text: intl.formatMessage(messages.group_remove_account),
action: this.handleGroupRemoveAccount, // action: this.handleGroupRemoveAccount,
icon: require('@tabler/icons/icons/user-x.svg'), // icon: require('@tabler/icons/icons/user-x.svg'),
destructive: true, // destructive: true,
}); // });
menu.push({ // menu.push({
text: intl.formatMessage(messages.group_remove_post), // text: intl.formatMessage(messages.group_remove_post),
action: this.handleGroupRemovePost, // action: this.handleGroupRemovePost,
icon: require('@tabler/icons/icons/trash.svg'), // icon: require('@tabler/icons/icons/trash.svg'),
destructive: true, // destructive: true,
}); // });
} // }
return menu; return menu;
} }
setRef = c => { setRef = (c: HTMLDivElement) => {
this.node = c; this.node = c;
} }
componentDidMount() { componentDidMount() {
document.addEventListener('click', e => { document.addEventListener('click', (e) => {
if (this.node && !this.node.contains(e.target)) if (this.node && !this.node.contains(e.target as Node))
this.setState({ emojiSelectorVisible: false }); this.setState({ emojiSelectorVisible: false });
}); });
} }
@ -555,9 +564,9 @@ class StatusActionBar extends ImmutablePureComponent {
const reblogCount = status.get('reblogs_count'); const reblogCount = status.get('reblogs_count');
const favouriteCount = status.get('favourites_count'); const favouriteCount = status.get('favourites_count');
const emojiReactCount = reduceEmoji( const emojiReactCount = reduceEmoji(
status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()), (status.getIn(['pleroma', 'emoji_reactions']) || ImmutableList()) as ImmutableList<any>,
favouriteCount, favouriteCount,
status.get('favourited'), status.favourited,
allowedEmoji, allowedEmoji,
).reduce((acc, cur) => acc + cur.get('count'), 0); ).reduce((acc, cur) => acc + cur.get('count'), 0);
const meEmojiReact = getReactForStatus(status, allowedEmoji); const meEmojiReact = getReactForStatus(status, allowedEmoji);
@ -599,6 +608,7 @@ class StatusActionBar extends ImmutablePureComponent {
reblogButton = ( reblogButton = (
<DropdownMenuContainer <DropdownMenuContainer
items={reblogMenu} items={reblogMenu}
// @ts-ignore
disabled={!publicStatus} disabled={!publicStatus}
active={status.get('reblogged')} active={status.get('reblogged')}
pressed={status.get('reblogged')} pressed={status.get('reblogged')}
@ -659,7 +669,7 @@ class StatusActionBar extends ImmutablePureComponent {
onReact={this.handleReact} onReact={this.handleReact}
focused={emojiSelectorFocused} focused={emojiSelectorFocused}
onUnfocus={handleEmojiSelectorUnfocus} onUnfocus={handleEmojiSelectorUnfocus}
/> /> as any
)} )}
> >
<IconButton <IconButton
@ -708,7 +718,14 @@ class StatusActionBar extends ImmutablePureComponent {
)} )}
<StatusAction> <StatusAction>
<DropdownMenuContainer items={menu} title={intl.formatMessage(messages.more)} status={status} src={require('@tabler/icons/icons/dots.svg')} direction='right' /> <DropdownMenuContainer
items={menu}
// @ts-ignore
title={intl.formatMessage(messages.more)}
status={status}
src={require('@tabler/icons/icons/dots.svg')}
direction='right'
/>
</StatusAction> </StatusAction>
</div> </div>
); );
@ -716,10 +733,9 @@ class StatusActionBar extends ImmutablePureComponent {
} }
const mapStateToProps = state => { const mapStateToProps = (state: RootState) => {
const me = state.get('me'); const { me, instance } = state;
const account = state.getIn(['accounts', me]); const account = state.accounts.get(me);
const instance = state.get('instance');
return { return {
me, me,
@ -729,15 +745,15 @@ const mapStateToProps = state => {
}; };
}; };
const mapDispatchToProps = (dispatch, { status }) => ({ const mapDispatchToProps = (dispatch: Dispatch, { status }: { status: Status}) => ({
dispatch, dispatch,
onOpenUnauthorizedModal(action) { onOpenUnauthorizedModal(action: AnyAction) {
dispatch(openModal('UNAUTHORIZED', { dispatch(openModal('UNAUTHORIZED', {
action, action,
ap_id: status.get('url'), ap_id: status.url,
})); }));
}, },
onOpenReblogsModal(username, statusId) { onOpenReblogsModal(username: string, statusId: string) {
dispatch(openModal('REBLOGS', { dispatch(openModal('REBLOGS', {
username, username,
statusId, statusId,
@ -745,6 +761,9 @@ const mapDispatchToProps = (dispatch, { status }) => ({
}, },
}); });
// @ts-ignore
export default withRouter(injectIntl( export default withRouter(injectIntl(
// @ts-ignore
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }, connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true },
// @ts-ignore
)(StatusActionBar))); )(StatusActionBar)));

2
app/soapbox/components/ui/status/status-action-button.tsx
View File

@ -32,7 +32,7 @@ const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick
interface IStatusActionButton { interface IStatusActionButton {
icon: string, icon: string,
onClick: () => void, onClick: () => void,
count: number, count?: number,
active?: boolean, active?: boolean,
title?: string, title?: string,
to?: string, to?: string,

4
app/soapbox/reducers/statuses.ts
View File

@ -211,13 +211,13 @@ export default function statuses(state = initialState, action: AnyAction): State
return state return state
.updateIn( .updateIn(
[action.status.get('id'), 'pleroma', 'emoji_reactions'], [action.status.get('id'), 'pleroma', 'emoji_reactions'],
emojiReacts => simulateEmojiReact(emojiReacts, action.emoji), emojiReacts => simulateEmojiReact(emojiReacts as any, action.emoji),
); );
case UNEMOJI_REACT_REQUEST: case UNEMOJI_REACT_REQUEST:
return state return state
.updateIn( .updateIn(
[action.status.get('id'), 'pleroma', 'emoji_reactions'], [action.status.get('id'), 'pleroma', 'emoji_reactions'],
emojiReacts => simulateUnEmojiReact(emojiReacts, action.emoji), emojiReacts => simulateUnEmojiReact(emojiReacts as any, action.emoji),
); );
case FAVOURITE_FAIL: case FAVOURITE_FAIL:
return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false); return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);

3
app/soapbox/types/soapbox.ts
View File

@ -5,12 +5,15 @@ import {
SoapboxConfigRecord, SoapboxConfigRecord,
} from 'soapbox/normalizers/soapbox/soapbox_config'; } from 'soapbox/normalizers/soapbox/soapbox_config';
type Me = string | null | false | undefined;
type PromoPanelItem = ReturnType<typeof PromoPanelItemRecord>; type PromoPanelItem = ReturnType<typeof PromoPanelItemRecord>;
type FooterItem = ReturnType<typeof FooterItemRecord>; type FooterItem = ReturnType<typeof FooterItemRecord>;
type CryptoAddress = ReturnType<typeof CryptoAddressRecord>; type CryptoAddress = ReturnType<typeof CryptoAddressRecord>;
type SoapboxConfig = ReturnType<typeof SoapboxConfigRecord>; type SoapboxConfig = ReturnType<typeof SoapboxConfigRecord>;
export { export {
Me,
PromoPanelItem, PromoPanelItem,
FooterItem, FooterItem,
CryptoAddress, CryptoAddress,

6
app/soapbox/utils/accounts.ts
View File

@ -29,15 +29,15 @@ export const getAcct = (account: Account, displayFqn: boolean): string => (
displayFqn === true ? account.fqn : account.acct displayFqn === true ? account.fqn : account.acct
); );
export const isStaff = (account: ImmutableMap<any, any> = ImmutableMap()): boolean => ( export const isStaff = (account: Account): boolean => (
[isAdmin, isModerator].some(f => f(account) === true) [isAdmin, isModerator].some(f => f(account) === true)
); );
export const isAdmin = (account: ImmutableMap<string, any>): boolean => ( export const isAdmin = (account: Account): boolean => (
account.getIn(['pleroma', 'is_admin']) === true account.getIn(['pleroma', 'is_admin']) === true
); );
export const isModerator = (account: ImmutableMap<string, any>): boolean => ( export const isModerator = (account: Account): boolean => (
account.getIn(['pleroma', 'is_moderator']) === true account.getIn(['pleroma', 'is_moderator']) === true
); );

49
app/soapbox/utils/emoji_reacts.js → app/soapbox/utils/emoji_reacts.ts
View File

@ -3,31 +3,36 @@ import {
List as ImmutableList, List as ImmutableList,
} from 'immutable'; } from 'immutable';
import type { Me } from 'soapbox/types/soapbox';
// https://emojipedia.org/facebook // https://emojipedia.org/facebook
// I've customized them. // I've customized them.
export const ALLOWED_EMOJI = [ export const ALLOWED_EMOJI = ImmutableList([
'👍', '👍',
'❤️', '❤️',
'😆', '😆',
'😮', '😮',
'😢', '😢',
'😩', '😩',
]; ]);
export const sortEmoji = emojiReacts => ( type Account = ImmutableMap<string, any>;
type EmojiReact = ImmutableMap<string, any>;
export const sortEmoji = (emojiReacts: ImmutableList<EmojiReact>): ImmutableList<EmojiReact> => (
emojiReacts.sortBy(emojiReact => -emojiReact.get('count')) emojiReacts.sortBy(emojiReact => -emojiReact.get('count'))
); );
export const mergeEmoji = emojiReacts => ( export const mergeEmoji = (emojiReacts: ImmutableList<EmojiReact>): ImmutableList<EmojiReact> => (
emojiReacts // TODO: Merge similar emoji emojiReacts // TODO: Merge similar emoji
); );
export const mergeEmojiFavourites = (emojiReacts = ImmutableList(), favouritesCount, favourited) => { export const mergeEmojiFavourites = (emojiReacts = ImmutableList<EmojiReact>(), favouritesCount: number, favourited: boolean) => {
if (!favouritesCount) return emojiReacts; if (!favouritesCount) return emojiReacts;
const likeIndex = emojiReacts.findIndex(emojiReact => emojiReact.get('name') === '👍'); const likeIndex = emojiReacts.findIndex(emojiReact => emojiReact.get('name') === '👍');
if (likeIndex > -1) { if (likeIndex > -1) {
const likeCount = emojiReacts.getIn([likeIndex, 'count']); const likeCount = Number(emojiReacts.getIn([likeIndex, 'count']));
favourited = favourited || emojiReacts.getIn([likeIndex, 'me'], false); favourited = favourited || Boolean(emojiReacts.getIn([likeIndex, 'me'], false));
return emojiReacts return emojiReacts
.setIn([likeIndex, 'count'], likeCount + favouritesCount) .setIn([likeIndex, 'count'], likeCount + favouritesCount)
.setIn([likeIndex, 'me'], favourited); .setIn([likeIndex, 'me'], favourited);
@ -36,24 +41,24 @@ export const mergeEmojiFavourites = (emojiReacts = ImmutableList(), favouritesCo
} }
}; };
const hasMultiReactions = (emojiReacts, account) => ( const hasMultiReactions = (emojiReacts: ImmutableList<EmojiReact>, account: Account): boolean => (
emojiReacts.filter( emojiReacts.filter(
e => e.get('accounts').filter( e => e.get('accounts').filter(
a => a.get('id') === account.get('id'), (a: Account) => a.get('id') === account.get('id'),
).count() > 0, ).count() > 0,
).count() > 1 ).count() > 1
); );
const inAccounts = (accounts, id) => ( const inAccounts = (accounts: ImmutableList<Account>, id: string): boolean => (
accounts.filter(a => a.get('id') === id).count() > 0 accounts.filter(a => a.get('id') === id).count() > 0
); );
export const oneEmojiPerAccount = (emojiReacts, me) => { export const oneEmojiPerAccount = (emojiReacts: ImmutableList<EmojiReact>, me: Me) => {
emojiReacts = emojiReacts.reverse(); emojiReacts = emojiReacts.reverse();
return emojiReacts.reduce((acc, cur, idx) => { return emojiReacts.reduce((acc, cur, idx) => {
const accounts = cur.get('accounts', ImmutableList()) const accounts = cur.get('accounts', ImmutableList())
.filter(a => !hasMultiReactions(acc, a)); .filter((a: Account) => !hasMultiReactions(acc, a));
return acc.set(idx, cur.merge({ return acc.set(idx, cur.merge({
accounts: accounts, accounts: accounts,
@ -65,30 +70,31 @@ export const oneEmojiPerAccount = (emojiReacts, me) => {
.reverse(); .reverse();
}; };
export const filterEmoji = (emojiReacts, allowedEmoji=ALLOWED_EMOJI) => ( export const filterEmoji = (emojiReacts: ImmutableList<EmojiReact>, allowedEmoji=ALLOWED_EMOJI): ImmutableList<EmojiReact> => (
emojiReacts.filter(emojiReact => ( emojiReacts.filter(emojiReact => (
allowedEmoji.includes(emojiReact.get('name')) allowedEmoji.includes(emojiReact.get('name'))
))); )));
export const reduceEmoji = (emojiReacts, favouritesCount, favourited, allowedEmoji=ALLOWED_EMOJI) => ( export const reduceEmoji = (emojiReacts: ImmutableList<EmojiReact>, favouritesCount: number, favourited: boolean, allowedEmoji=ALLOWED_EMOJI): ImmutableList<EmojiReact> => (
filterEmoji(sortEmoji(mergeEmoji(mergeEmojiFavourites( filterEmoji(sortEmoji(mergeEmoji(mergeEmojiFavourites(
emojiReacts, favouritesCount, favourited, emojiReacts, favouritesCount, favourited,
))), allowedEmoji)); ))), allowedEmoji));
export const getReactForStatus = (status, allowedEmoji=ALLOWED_EMOJI) => { export const getReactForStatus = (status: any, allowedEmoji=ALLOWED_EMOJI): string => {
return reduceEmoji( return String(reduceEmoji(
status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()), status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()),
status.get('favourites_count', 0), status.get('favourites_count', 0),
status.get('favourited'), status.get('favourited'),
allowedEmoji, allowedEmoji,
).filter(e => e.get('me') === true) ).filter(e => e.get('me') === true)
.getIn([0, 'name']); .getIn([0, 'name'], ''));
}; };
export const simulateEmojiReact = (emojiReacts, emoji) => { export const simulateEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string) => {
const idx = emojiReacts.findIndex(e => e.get('name') === emoji); const idx = emojiReacts.findIndex(e => e.get('name') === emoji);
if (idx > -1) {
const emojiReact = emojiReacts.get(idx); const emojiReact = emojiReacts.get(idx);
if (emojiReact) {
return emojiReacts.set(idx, emojiReact.merge({ return emojiReacts.set(idx, emojiReact.merge({
count: emojiReact.get('count') + 1, count: emojiReact.get('count') + 1,
me: true, me: true,
@ -102,12 +108,13 @@ export const simulateEmojiReact = (emojiReacts, emoji) => {
} }
}; };
export const simulateUnEmojiReact = (emojiReacts, emoji) => { export const simulateUnEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string) => {
const idx = emojiReacts.findIndex(e => const idx = emojiReacts.findIndex(e =>
e.get('name') === emoji && e.get('me') === true); e.get('name') === emoji && e.get('me') === true);
if (idx > -1) {
const emojiReact = emojiReacts.get(idx); const emojiReact = emojiReacts.get(idx);
if (emojiReact) {
const newCount = emojiReact.get('count') - 1; const newCount = emojiReact.get('count') - 1;
if (newCount < 1) return emojiReacts.delete(idx); if (newCount < 1) return emojiReacts.delete(idx);
return emojiReacts.set(idx, emojiReact.merge({ return emojiReacts.set(idx, emojiReact.merge({