Merge branch 'next-status-loading' into 'next'
Next: Improve status loading, refactor Status components to TSX See merge request soapbox-pub/soapbox-fe!1179
This commit is contained in:
Alex Gleason
commit
20aa17ce64
|
|
@ -83,7 +83,7 @@ export default (getState: () => RootState, authType: string = 'user'): AxiosInst
|
|||
const state = getState();
|
||||
const accessToken = getToken(state, authType);
|
||||
const me = state.me;
|
||||
const baseURL = getAuthBaseURL(state, me);
|
||||
const baseURL = me ? getAuthBaseURL(state, me) : '';
|
||||
|
||||
return baseClient(accessToken, baseURL);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
|||
let id = 0;
|
||||
|
||||
export interface MenuItem {
|
||||
action: React.EventHandler<React.KeyboardEvent | React.MouseEvent>,
|
||||
action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>,
|
||||
middleClick?: React.EventHandler<React.MouseEvent>,
|
||||
text: string,
|
||||
href?: string,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import PTRComponent from 'react-simple-pull-to-refresh';
|
|||
import { Spinner } from 'soapbox/components/ui';
|
||||
|
||||
interface IPullToRefresh {
|
||||
children: JSX.Element & React.ReactNode,
|
||||
onRefresh?: () => Promise<any>
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +11,7 @@ interface IPullToRefresh {
|
|||
* PullToRefresh:
|
||||
* Wrapper around a third-party PTR component with Soapbox defaults.
|
||||
*/
|
||||
const PullToRefresh = ({ children, onRefresh, ...rest }: IPullToRefresh) => {
|
||||
const PullToRefresh: React.FC<IPullToRefresh> = ({ children, onRefresh, ...rest }): JSX.Element => {
|
||||
const handleRefresh = () => {
|
||||
if (onRefresh) {
|
||||
return onRefresh();
|
||||
|
|
@ -33,7 +32,8 @@ const PullToRefresh = ({ children, onRefresh, ...rest }: IPullToRefresh) => {
|
|||
resistance={2}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
{/* This thing really wants a single JSX element as its child (TypeScript), so wrap it in one */}
|
||||
<>{children}</>
|
||||
</PTRComponent>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -87,8 +87,8 @@ interface IStatus extends RouteComponentProps {
|
|||
muted: boolean,
|
||||
hidden: boolean,
|
||||
unread: boolean,
|
||||
onMoveUp: (statusId: string, featured: string) => void,
|
||||
onMoveDown: (statusId: string, featured: string) => void,
|
||||
onMoveUp: (statusId: string, featured?: string) => void,
|
||||
onMoveDown: (statusId: string, featured?: string) => void,
|
||||
getScrollPosition?: () => ScrollPosition | undefined,
|
||||
updateScrollBottom?: (bottom: number) => void,
|
||||
cacheMediaWidth: () => void,
|
||||
|
|
@ -658,8 +658,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
|
|||
{quote}
|
||||
|
||||
<StatusActionBar
|
||||
// @ts-ignore what?
|
||||
status={status}
|
||||
// @ts-ignore what?
|
||||
account={account}
|
||||
emojiSelectorFocused={this.state.emojiSelectorFocused}
|
||||
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, IntlShape } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
|
||||
import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
|
||||
import EmojiSelector from 'soapbox/components/emoji_selector';
|
||||
|
|
@ -68,7 +68,7 @@ const messages = defineMessages({
|
|||
quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
|
||||
});
|
||||
|
||||
interface IStatusActionBar {
|
||||
interface IStatusActionBar extends RouteComponentProps {
|
||||
status: Status,
|
||||
onOpenUnauthorizedModal: (modalType?: string) => void,
|
||||
onOpenReblogsModal: (acct: string, statusId: string) => void,
|
||||
|
|
@ -718,9 +718,6 @@ const mapDispatchToProps = (dispatch: Dispatch, { status }: { status: Status}) =
|
|||
},
|
||||
});
|
||||
|
||||
const WrappedComponent = withRouter(injectIntl(StatusActionBar));
|
||||
// @ts-ignore
|
||||
export default withRouter(injectIntl(
|
||||
// @ts-ignore
|
||||
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true },
|
||||
// @ts-ignore
|
||||
)(StatusActionBar)));
|
||||
export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(WrappedComponent);
|
||||
|
|
|
|||
|
|
@ -1,20 +1,27 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { defineMessages, injectIntl, WrappedComponentProps as IntlComponentProps } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
|
||||
import { isUserTouching } from 'soapbox/is_mobile';
|
||||
import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
|
||||
|
||||
import { openModal } from '../../../actions/modals';
|
||||
import { HStack, IconButton } from '../../../components/ui';
|
||||
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
|
||||
|
||||
import type { History } from 'history';
|
||||
import type { List as ImmutableList } from 'immutable';
|
||||
import type { AnyAction } from 'redux';
|
||||
import type { ThunkDispatch } from 'redux-thunk';
|
||||
import type { Menu } from 'soapbox/components/dropdown_menu';
|
||||
import type { RootState } from 'soapbox/store';
|
||||
import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
||||
|
||||
type Dispatch = ThunkDispatch<RootState, void, AnyAction>;
|
||||
|
||||
const messages = defineMessages({
|
||||
delete: { id: 'status.delete', defaultMessage: 'Delete' },
|
||||
redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
|
||||
|
|
@ -57,10 +64,10 @@ const messages = defineMessages({
|
|||
quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const me = state.get('me');
|
||||
const account = state.getIn(['accounts', me]);
|
||||
const instance = state.get('instance');
|
||||
const mapStateToProps = (state: RootState) => {
|
||||
const me = state.me;
|
||||
const account = state.accounts.get(me);
|
||||
const instance = state.instance;
|
||||
|
||||
return {
|
||||
me,
|
||||
|
|
@ -70,54 +77,56 @@ const mapStateToProps = state => {
|
|||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { status }) => ({
|
||||
onOpenUnauthorizedModal(action) {
|
||||
const mapDispatchToProps = (dispatch: Dispatch, { status }: OwnProps) => ({
|
||||
onOpenUnauthorizedModal(action: string) {
|
||||
dispatch(openModal('UNAUTHORIZED', {
|
||||
action,
|
||||
ap_id: status.get('url'),
|
||||
ap_id: status.url,
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
@withRouter
|
||||
class ActionBar extends React.PureComponent {
|
||||
interface OwnProps {
|
||||
status: StatusEntity,
|
||||
onReply: (status: StatusEntity) => void,
|
||||
onReblog: (status: StatusEntity, e: React.MouseEvent) => void,
|
||||
onQuote: (status: StatusEntity, history: History) => void,
|
||||
onFavourite: (status: StatusEntity) => void,
|
||||
onEmojiReact: (status: StatusEntity, emoji: string) => void,
|
||||
onDelete: (status: StatusEntity, history: History, redraft?: boolean) => void,
|
||||
onBookmark: (status: StatusEntity) => void,
|
||||
onDirect: (account: AccountEntity, history: History) => void,
|
||||
onChat: (account: AccountEntity, history: History) => void,
|
||||
onMention: (account: AccountEntity, history: History) => void,
|
||||
onMute: (account: AccountEntity) => void,
|
||||
onMuteConversation: (status: StatusEntity) => void,
|
||||
onBlock: (status: StatusEntity) => void,
|
||||
onReport: (status: StatusEntity) => void,
|
||||
onPin: (status: StatusEntity) => void,
|
||||
onEmbed: (status: StatusEntity) => void,
|
||||
onDeactivateUser: (status: StatusEntity) => void,
|
||||
onDeleteUser: (status: StatusEntity) => void,
|
||||
onDeleteStatus: (status: StatusEntity) => void,
|
||||
onToggleStatusSensitivity: (status: StatusEntity) => void,
|
||||
allowedEmoji: ImmutableList<string>,
|
||||
emojiSelectorFocused: boolean,
|
||||
handleEmojiSelectorExpand: React.EventHandler<React.KeyboardEvent>,
|
||||
handleEmojiSelectorUnfocus: React.EventHandler<React.KeyboardEvent>,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.record.isRequired,
|
||||
onReply: PropTypes.func.isRequired,
|
||||
onReblog: PropTypes.func.isRequired,
|
||||
onQuote: PropTypes.func.isRequired,
|
||||
onFavourite: PropTypes.func.isRequired,
|
||||
onEmojiReact: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
onBookmark: PropTypes.func,
|
||||
onDirect: PropTypes.func.isRequired,
|
||||
onChat: PropTypes.func,
|
||||
onMention: PropTypes.func.isRequired,
|
||||
onMute: PropTypes.func,
|
||||
onMuteConversation: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onReport: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
onEmbed: PropTypes.func,
|
||||
onDeactivateUser: PropTypes.func,
|
||||
onDeleteUser: PropTypes.func,
|
||||
onDeleteStatus: PropTypes.func,
|
||||
onToggleStatusSensitivity: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onOpenUnauthorizedModal: PropTypes.func.isRequired,
|
||||
me: SoapboxPropTypes.me,
|
||||
isStaff: PropTypes.bool.isRequired,
|
||||
isAdmin: PropTypes.bool.isRequired,
|
||||
allowedEmoji: ImmutablePropTypes.list,
|
||||
emojiSelectorFocused: PropTypes.bool,
|
||||
handleEmojiSelectorExpand: PropTypes.func.isRequired,
|
||||
handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
|
||||
features: PropTypes.object.isRequired,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
type StateProps = ReturnType<typeof mapStateToProps>;
|
||||
type DispatchProps = ReturnType<typeof mapDispatchToProps>;
|
||||
|
||||
static defaultProps = {
|
||||
type IActionBar = OwnProps & StateProps & DispatchProps & RouteComponentProps & IntlComponentProps;
|
||||
|
||||
interface IActionBarState {
|
||||
emojiSelectorVisible: boolean,
|
||||
emojiSelectorFocused: boolean,
|
||||
}
|
||||
|
||||
class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
|
||||
|
||||
static defaultProps: Partial<IActionBar> = {
|
||||
isStaff: false,
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +135,9 @@ class ActionBar extends React.PureComponent {
|
|||
emojiSelectorFocused: false,
|
||||
}
|
||||
|
||||
handleReplyClick = (e) => {
|
||||
node: HTMLDivElement | null = null;
|
||||
|
||||
handleReplyClick: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
const { me, onReply, onOpenUnauthorizedModal } = this.props;
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -137,7 +148,7 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleReblogClick = (e) => {
|
||||
handleReblogClick: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
const { me, onReblog, onOpenUnauthorizedModal, status } = this.props;
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -148,7 +159,7 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleQuoteClick = () => {
|
||||
handleQuoteClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
|
||||
if (me) {
|
||||
onQuote(status, this.props.history);
|
||||
|
|
@ -157,12 +168,12 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleBookmarkClick = () => {
|
||||
handleBookmarkClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
this.props.onBookmark(this.props.status);
|
||||
}
|
||||
|
||||
handleFavouriteClick = (e) => {
|
||||
const { me, onFavourite, onOpenUnauthorizedModal } = this.props;
|
||||
handleFavouriteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -173,7 +184,7 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleLikeButtonHover = e => {
|
||||
handleLikeButtonHover: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { features } = this.props;
|
||||
|
||||
if (features.emojiReacts && !isUserTouching()) {
|
||||
|
|
@ -181,7 +192,7 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleLikeButtonLeave = e => {
|
||||
handleLikeButtonLeave: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { features } = this.props;
|
||||
|
||||
if (features.emojiReacts && !isUserTouching()) {
|
||||
|
|
@ -189,23 +200,23 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleLikeButtonClick = e => {
|
||||
handleLikeButtonClick: React.EventHandler<React.MouseEvent> = e => {
|
||||
const { features } = this.props;
|
||||
const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
|
||||
|
||||
if (features.emojiReacts && isUserTouching()) {
|
||||
if (this.state.emojiSelectorVisible) {
|
||||
this.handleReactClick(meEmojiReact)();
|
||||
this.handleReactClick(meEmojiReact)(e);
|
||||
} else {
|
||||
this.setState({ emojiSelectorVisible: true });
|
||||
}
|
||||
} else {
|
||||
this.handleReactClick(meEmojiReact)();
|
||||
this.handleReactClick(meEmojiReact)(e);
|
||||
}
|
||||
}
|
||||
|
||||
handleReactClick = emoji => {
|
||||
return e => {
|
||||
handleReactClick = (emoji: string): React.EventHandler<React.MouseEvent> => {
|
||||
return () => {
|
||||
const { me, onEmojiReact, onOpenUnauthorizedModal, status } = this.props;
|
||||
if (me) {
|
||||
onEmojiReact(status, emoji);
|
||||
|
|
@ -222,35 +233,43 @@ class ActionBar extends React.PureComponent {
|
|||
this.setState({ emojiSelectorVisible: !emojiSelectorVisible });
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
handleDeleteClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
this.props.onDelete(this.props.status, this.props.history);
|
||||
}
|
||||
|
||||
handleRedraftClick = () => {
|
||||
handleRedraftClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
this.props.onDelete(this.props.status, this.props.history, true);
|
||||
}
|
||||
|
||||
handleDirectClick = () => {
|
||||
this.props.onDirect(this.props.status.get('account'), this.props.history);
|
||||
handleDirectClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { account } = this.props.status;
|
||||
if (!account || typeof account !== 'object') return;
|
||||
this.props.onDirect(account, this.props.history);
|
||||
}
|
||||
|
||||
handleChatClick = () => {
|
||||
this.props.onChat(this.props.status.get('account'), this.props.history);
|
||||
handleChatClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { account } = this.props.status;
|
||||
if (!account || typeof account !== 'object') return;
|
||||
this.props.onChat(account, this.props.history);
|
||||
}
|
||||
|
||||
handleMentionClick = () => {
|
||||
this.props.onMention(this.props.status.get('account'), this.props.history);
|
||||
handleMentionClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { account } = this.props.status;
|
||||
if (!account || typeof account !== 'object') return;
|
||||
this.props.onMention(account, this.props.history);
|
||||
}
|
||||
|
||||
handleMuteClick = () => {
|
||||
this.props.onMute(this.props.status.get('account'));
|
||||
handleMuteClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
const { account } = this.props.status;
|
||||
if (!account || typeof account !== 'object') return;
|
||||
this.props.onMute(account);
|
||||
}
|
||||
|
||||
handleConversationMuteClick = () => {
|
||||
handleConversationMuteClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
this.props.onMuteConversation(this.props.status);
|
||||
}
|
||||
|
||||
handleBlockClick = () => {
|
||||
handleBlockClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
this.props.onBlock(this.props.status);
|
||||
}
|
||||
|
||||
|
|
@ -258,14 +277,14 @@ class ActionBar extends React.PureComponent {
|
|||
this.props.onReport(this.props.status);
|
||||
}
|
||||
|
||||
handlePinClick = () => {
|
||||
handlePinClick: React.EventHandler<React.MouseEvent> = () => {
|
||||
this.props.onPin(this.props.status);
|
||||
}
|
||||
|
||||
handleShare = () => {
|
||||
navigator.share({
|
||||
text: this.props.status.get('search_index'),
|
||||
url: this.props.status.get('url'),
|
||||
text: this.props.status.search_index,
|
||||
url: this.props.status.url,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -274,7 +293,7 @@ class ActionBar extends React.PureComponent {
|
|||
}
|
||||
|
||||
handleCopy = () => {
|
||||
const url = this.props.status.get('url');
|
||||
const url = this.props.status.url;
|
||||
const textarea = document.createElement('textarea');
|
||||
|
||||
textarea.textContent = url;
|
||||
|
|
@ -308,13 +327,13 @@ class ActionBar extends React.PureComponent {
|
|||
this.props.onDeleteStatus(this.props.status);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
setRef: React.RefCallback<HTMLDivElement> = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('click', e => {
|
||||
if (this.node && !this.node.contains(e.target))
|
||||
if (this.node && !this.node.contains(e.target as Element))
|
||||
this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
|
||||
});
|
||||
}
|
||||
|
|
@ -322,20 +341,25 @@ class ActionBar extends React.PureComponent {
|
|||
render() {
|
||||
const { status, intl, me, isStaff, isAdmin, allowedEmoji, features } = this.props;
|
||||
const ownAccount = status.getIn(['account', 'id']) === me;
|
||||
const username = String(status.getIn(['account', 'acct']));
|
||||
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
||||
const mutingConversation = status.get('muted');
|
||||
const meEmojiReact = getReactForStatus(status, allowedEmoji);
|
||||
const meEmojiTitle = intl.formatMessage({
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.visibility);
|
||||
const mutingConversation = status.muted;
|
||||
|
||||
const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
|
||||
|
||||
const reactMessages = {
|
||||
'👍': messages.reactionLike,
|
||||
'❤️': messages.reactionHeart,
|
||||
'😆': messages.reactionLaughing,
|
||||
'😮': messages.reactionOpenMouth,
|
||||
'😢': messages.reactionCry,
|
||||
'😩': messages.reactionWeary,
|
||||
}[meEmojiReact] || messages.favourite);
|
||||
};
|
||||
|
||||
const menu = [];
|
||||
const meEmojiTitle = intl.formatMessage(meEmojiReact ? reactMessages[meEmojiReact] : messages.favourite);
|
||||
|
||||
const menu: Menu = [];
|
||||
|
||||
if (publicStatus) {
|
||||
menu.push({
|
||||
|
|
@ -364,12 +388,12 @@ class ActionBar extends React.PureComponent {
|
|||
if (ownAccount) {
|
||||
if (publicStatus) {
|
||||
menu.push({
|
||||
text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
|
||||
text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
|
||||
action: this.handlePinClick,
|
||||
icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
|
||||
});
|
||||
} else {
|
||||
if (status.get('visibility') === 'private') {
|
||||
if (status.visibility === 'private') {
|
||||
menu.push({
|
||||
text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private),
|
||||
action: this.handleReblogClick,
|
||||
|
|
@ -399,20 +423,20 @@ class ActionBar extends React.PureComponent {
|
|||
});
|
||||
} else {
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }),
|
||||
text: intl.formatMessage(messages.mention, { name: username }),
|
||||
action: this.handleMentionClick,
|
||||
icon: require('@tabler/icons/icons/at.svg'),
|
||||
});
|
||||
|
||||
// if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
|
||||
// menu.push({
|
||||
// text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }),
|
||||
// text: intl.formatMessage(messages.chat, { name: username }),
|
||||
// action: this.handleChatClick,
|
||||
// icon: require('@tabler/icons/icons/messages.svg'),
|
||||
// });
|
||||
// } else {
|
||||
// menu.push({
|
||||
// text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }),
|
||||
// text: intl.formatMessage(messages.direct, { name: username }),
|
||||
// action: this.handleDirectClick,
|
||||
// icon: require('@tabler/icons/icons/mail.svg'),
|
||||
// });
|
||||
|
|
@ -420,17 +444,17 @@ class ActionBar extends React.PureComponent {
|
|||
|
||||
menu.push(null);
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
|
||||
text: intl.formatMessage(messages.mute, { name: username }),
|
||||
action: this.handleMuteClick,
|
||||
icon: require('@tabler/icons/icons/circle-x.svg'),
|
||||
});
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
|
||||
text: intl.formatMessage(messages.block, { name: username }),
|
||||
action: this.handleBlockClick,
|
||||
icon: require('@tabler/icons/icons/ban.svg'),
|
||||
});
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
|
||||
text: intl.formatMessage(messages.report, { name: username }),
|
||||
action: this.handleReport,
|
||||
icon: require('@tabler/icons/icons/flag.svg'),
|
||||
});
|
||||
|
|
@ -441,13 +465,13 @@ class ActionBar extends React.PureComponent {
|
|||
|
||||
if (isAdmin) {
|
||||
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'])}/`,
|
||||
icon: require('@tabler/icons/icons/gavel.svg'),
|
||||
});
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.admin_status),
|
||||
href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
|
||||
href: `/pleroma/admin/#/statuses/${status.id}/`,
|
||||
icon: require('@tabler/icons/icons/pencil.svg'),
|
||||
});
|
||||
}
|
||||
|
|
@ -460,12 +484,12 @@ class ActionBar extends React.PureComponent {
|
|||
|
||||
if (!ownAccount) {
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }),
|
||||
text: intl.formatMessage(messages.deactivateUser, { name: username }),
|
||||
action: this.handleDeactivateUser,
|
||||
icon: require('@tabler/icons/icons/user-off.svg'),
|
||||
});
|
||||
menu.push({
|
||||
text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }),
|
||||
text: intl.formatMessage(messages.deleteUser, { name: username }),
|
||||
action: this.handleDeleteUser,
|
||||
icon: require('@tabler/icons/icons/user-minus.svg'),
|
||||
destructive: true,
|
||||
|
|
@ -496,7 +520,7 @@ class ActionBar extends React.PureComponent {
|
|||
let reblogButton;
|
||||
|
||||
if (me && features.quotePosts) {
|
||||
const reblogMenu = [
|
||||
const reblogMenu: Menu = [
|
||||
{
|
||||
text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog),
|
||||
action: this.handleReblogClick,
|
||||
|
|
@ -517,7 +541,6 @@ class ActionBar extends React.PureComponent {
|
|||
pressed={status.get('reblogged')}
|
||||
title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
|
||||
src={reblogIcon}
|
||||
direction='right'
|
||||
text={intl.formatMessage(messages.reblog)}
|
||||
onShiftClick={this.handleReblogClick}
|
||||
/>
|
||||
|
|
@ -577,7 +600,6 @@ class ActionBar extends React.PureComponent {
|
|||
<DropdownMenuContainer
|
||||
src={require('@tabler/icons/icons/dots.svg')}
|
||||
items={menu}
|
||||
direction='left'
|
||||
title='More'
|
||||
/>
|
||||
</HStack>
|
||||
|
|
@ -586,5 +608,5 @@ class ActionBar extends React.PureComponent {
|
|||
|
||||
}
|
||||
|
||||
export default injectIntl(
|
||||
connect(mapStateToProps, mapDispatchToProps)(ActionBar));
|
||||
const WrappedComponent = withRouter(injectIntl(ActionBar));
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(WrappedComponent);
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import { FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from 'react-intl';
|
||||
import { FormattedDate } from 'react-intl';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
|
||||
|
|
@ -21,29 +19,39 @@ import scheduleIdleTask from '../../ui/util/schedule_idle_task';
|
|||
import Video from '../../video';
|
||||
|
||||
import Card from './card';
|
||||
import StatusInteractionBar from './status_interaction_bar';
|
||||
import StatusInteractionBar from './status-interaction-bar';
|
||||
|
||||
export default @injectIntl
|
||||
class DetailedStatus extends ImmutablePureComponent {
|
||||
import type { List as ImmutableList } from 'immutable';
|
||||
import type { Attachment as AttachmentEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.record,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
onOpenVideo: PropTypes.func.isRequired,
|
||||
onToggleHidden: PropTypes.func.isRequired,
|
||||
measureHeight: PropTypes.bool,
|
||||
onHeightChange: PropTypes.func,
|
||||
domain: PropTypes.string,
|
||||
compact: PropTypes.bool,
|
||||
showMedia: PropTypes.bool,
|
||||
onToggleMediaVisibility: PropTypes.func,
|
||||
};
|
||||
interface IDetailedStatus extends IntlProps {
|
||||
status: StatusEntity,
|
||||
onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
|
||||
onOpenVideo: (media: ImmutableList<AttachmentEntity>, start: number) => void,
|
||||
onToggleHidden: (status: StatusEntity) => void,
|
||||
measureHeight: boolean,
|
||||
onHeightChange: () => void,
|
||||
domain: string,
|
||||
compact: boolean,
|
||||
showMedia: boolean,
|
||||
onToggleMediaVisibility: () => void,
|
||||
}
|
||||
|
||||
interface IDetailedStatusState {
|
||||
height: number | null,
|
||||
mediaWrapperWidth: number,
|
||||
}
|
||||
|
||||
class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedStatusState> {
|
||||
|
||||
state = {
|
||||
height: null,
|
||||
mediaWrapperWidth: NaN,
|
||||
};
|
||||
|
||||
handleOpenVideo = (media, startTime) => {
|
||||
node: HTMLDivElement | null = null;
|
||||
|
||||
handleOpenVideo = (media: ImmutableList<AttachmentEntity>, startTime: number) => {
|
||||
this.props.onOpenVideo(media, startTime);
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +59,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
this.props.onToggleHidden(this.props.status);
|
||||
}
|
||||
|
||||
_measureHeight(heightJustChanged) {
|
||||
_measureHeight(heightJustChanged = false) {
|
||||
if (this.props.measureHeight && this.node) {
|
||||
scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
|
||||
|
||||
|
|
@ -61,7 +69,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
setRef: React.RefCallback<HTMLDivElement> = c => {
|
||||
this.node = c;
|
||||
this._measureHeight();
|
||||
|
||||
|
|
@ -70,35 +78,41 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
componentDidUpdate(prevProps: IDetailedStatus, prevState: IDetailedStatusState) {
|
||||
this._measureHeight(prevState.height !== this.state.height);
|
||||
}
|
||||
|
||||
handleModalLink = e => {
|
||||
e.preventDefault();
|
||||
// handleModalLink = e => {
|
||||
// e.preventDefault();
|
||||
//
|
||||
// let href;
|
||||
//
|
||||
// if (e.target.nodeName !== 'A') {
|
||||
// href = e.target.parentNode.href;
|
||||
// } else {
|
||||
// href = e.target.href;
|
||||
// }
|
||||
//
|
||||
// window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
|
||||
// }
|
||||
|
||||
let href;
|
||||
|
||||
if (e.target.nodeName !== 'A') {
|
||||
href = e.target.parentNode.href;
|
||||
} else {
|
||||
href = e.target.href;
|
||||
}
|
||||
|
||||
window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
|
||||
getActualStatus = () => {
|
||||
const { status } = this.props;
|
||||
if (!status) return undefined;
|
||||
return status.reblog && typeof status.reblog === 'object' ? status.reblog : status;
|
||||
}
|
||||
|
||||
render() {
|
||||
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
|
||||
const outerStyle = { boxSizing: 'border-box' };
|
||||
const { compact } = this.props;
|
||||
const favicon = status.getIn(['account', 'pleroma', 'favicon']);
|
||||
const domain = getDomain(status.get('account'));
|
||||
const size = status.get('media_attachments').size;
|
||||
const status = this.getActualStatus();
|
||||
if (!status) return null;
|
||||
const { account } = status;
|
||||
if (!account || typeof account !== 'object') return null;
|
||||
|
||||
const outerStyle: React.CSSProperties = { boxSizing: 'border-box' };
|
||||
const { compact } = this.props;
|
||||
const favicon = account.getIn(['pleroma', 'favicon']);
|
||||
const domain = getDomain(account);
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let media = null;
|
||||
let statusTypeIcon = null;
|
||||
|
|
@ -107,12 +121,15 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
outerStyle.height = `${this.state.height}px`;
|
||||
}
|
||||
|
||||
if (size > 0) {
|
||||
if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
|
||||
const video = status.getIn(['media_attachments', 0]);
|
||||
const size = status.media_attachments.size;
|
||||
const firstAttachment = status.media_attachments.get(0);
|
||||
|
||||
if (size > 0 && firstAttachment) {
|
||||
if (size === 1 && firstAttachment.type === 'video') {
|
||||
const video = firstAttachment;
|
||||
if (video.external_video_id && status.card?.html) {
|
||||
const { mediaWrapperWidth } = this.state;
|
||||
const height = mediaWrapperWidth / (video.getIn(['meta', 'original', 'width']) / video.getIn(['meta', 'original', 'height']));
|
||||
const height = mediaWrapperWidth / Number(video.meta.getIn(['original', 'width'])) / Number(video.meta.getIn(['original', 'height']));
|
||||
media = (
|
||||
<div className='status-card horizontal interactive status-card--video'>
|
||||
<div
|
||||
|
|
@ -126,33 +143,33 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
} else {
|
||||
media = (
|
||||
<Video
|
||||
preview={video.get('preview_url')}
|
||||
blurhash={video.get('blurhash')}
|
||||
src={video.get('url')}
|
||||
alt={video.get('description')}
|
||||
aspectRatio={video.getIn(['meta', 'original', 'aspect'])}
|
||||
preview={video.preview_url}
|
||||
blurhash={video.blurhash}
|
||||
src={video.url}
|
||||
alt={video.description}
|
||||
aspectRatio={video.meta.getIn(['original', 'aspect'])}
|
||||
width={300}
|
||||
height={150}
|
||||
inline
|
||||
onOpenVideo={this.handleOpenVideo}
|
||||
sensitive={status.get('sensitive')}
|
||||
sensitive={status.sensitive}
|
||||
visible={this.props.showMedia}
|
||||
onToggleVisibility={this.props.onToggleMediaVisibility}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
|
||||
const attachment = status.getIn(['media_attachments', 0]);
|
||||
} else if (size === 1 && firstAttachment.type === 'audio') {
|
||||
const attachment = firstAttachment;
|
||||
|
||||
media = (
|
||||
<Audio
|
||||
src={attachment.get('url')}
|
||||
alt={attachment.get('description')}
|
||||
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
|
||||
poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : status.getIn(['account', 'avatar_static'])}
|
||||
backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
|
||||
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
|
||||
accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
|
||||
src={attachment.url}
|
||||
alt={attachment.description}
|
||||
duration={attachment.meta.getIn(['original', 'duration', 0])}
|
||||
poster={attachment.preview_url !== attachment.url ? attachment.preview_url : account.avatar_static}
|
||||
backgroundColor={attachment.meta.getIn(['colors', 'background'])}
|
||||
foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
|
||||
accentColor={attachment.meta.getIn(['colors', 'accent'])}
|
||||
height={150}
|
||||
/>
|
||||
);
|
||||
|
|
@ -160,8 +177,8 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
media = (
|
||||
<MediaGallery
|
||||
standalone
|
||||
sensitive={status.get('sensitive')}
|
||||
media={status.get('media_attachments')}
|
||||
sensitive={status.sensitive}
|
||||
media={status.media_attachments}
|
||||
height={300}
|
||||
onOpenMedia={this.props.onOpenMedia}
|
||||
visible={this.props.showMedia}
|
||||
|
|
@ -169,27 +186,27 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
/>
|
||||
);
|
||||
}
|
||||
} else if (status.get('spoiler_text').length === 0 && !status.get('quote')) {
|
||||
media = <Card onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
|
||||
} else if (status.spoiler_text.length === 0 && !status.quote) {
|
||||
media = <Card onOpenMedia={this.props.onOpenMedia} card={status.card} />;
|
||||
}
|
||||
|
||||
let quote;
|
||||
|
||||
if (status.get('quote')) {
|
||||
if (status.getIn(['pleroma', 'quote_visible'], true) === false) {
|
||||
if (status.quote) {
|
||||
if (status.pleroma.get('quote_visible', true) === false) {
|
||||
quote = (
|
||||
<div className='quoted-status-tombstone'>
|
||||
<p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
quote = <QuotedStatus statusId={status.get('quote')} />;
|
||||
quote = <QuotedStatus statusId={status.quote} />;
|
||||
}
|
||||
}
|
||||
|
||||
if (status.get('visibility') === 'direct') {
|
||||
if (status.visibility === 'direct') {
|
||||
statusTypeIcon = <Icon src={require('@tabler/icons/icons/mail.svg')} />;
|
||||
} else if (status.get('visibility') === 'private') {
|
||||
} else if (status.visibility === 'private') {
|
||||
statusTypeIcon = <Icon src={require('@tabler/icons/icons/lock.svg')} />;
|
||||
}
|
||||
|
||||
|
|
@ -198,25 +215,25 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
<div ref={this.setRef} className={classNames('detailed-status', { compact })}>
|
||||
<div className='mb-4'>
|
||||
<AccountContainer
|
||||
key={status.getIn(['account', 'id'])}
|
||||
id={status.getIn(['account', 'id'])}
|
||||
timestamp={status.get('created_at')}
|
||||
key={account.id}
|
||||
id={account.id}
|
||||
timestamp={status.created_at}
|
||||
avatarSize={42}
|
||||
hideActions
|
||||
/>
|
||||
</div>
|
||||
|
||||
{status.get('group') && (
|
||||
{/* status.group && (
|
||||
<div className='status__meta'>
|
||||
Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
|
||||
</div>
|
||||
)}
|
||||
)*/}
|
||||
|
||||
<StatusReplyMentions status={status} />
|
||||
|
||||
<StatusContent
|
||||
status={status}
|
||||
expanded={!status.get('hidden')}
|
||||
expanded={!status.hidden}
|
||||
onExpandedToggle={this.handleExpandedToggle}
|
||||
/>
|
||||
|
||||
|
|
@ -227,18 +244,19 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
<StatusInteractionBar status={status} />
|
||||
|
||||
<div className='detailed-status__timestamp'>
|
||||
{favicon &&
|
||||
{typeof favicon === 'string' && (
|
||||
<div className='status__favicon'>
|
||||
<Link to={`/timeline/${domain}`}>
|
||||
<img src={favicon} alt='' title={domain} />
|
||||
</Link>
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{statusTypeIcon}
|
||||
|
||||
<a href={status.get('url')} target='_blank' rel='noopener' className='hover:underline'>
|
||||
<a href={status.url} target='_blank' rel='noopener' className='hover:underline'>
|
||||
<Text tag='span' theme='muted' size='sm'>
|
||||
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
|
||||
<FormattedDate value={new Date(status.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
|
||||
</Text>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -249,3 +267,5 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(DetailedStatus);
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
import classNames from 'classnames';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import React from 'react';
|
||||
import { FormattedNumber } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
|
||||
import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
|
||||
|
||||
import { HStack, IconButton, Text } from '../../../components/ui';
|
||||
|
||||
import type { Status } from 'soapbox/types/entities';
|
||||
|
||||
interface IStatusInteractionBar {
|
||||
status: Status,
|
||||
}
|
||||
|
||||
const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.Element | null => {
|
||||
|
||||
const me = useAppSelector(({ me }) => me);
|
||||
const { allowedEmoji } = useSoapboxConfig();
|
||||
const dispatch = useDispatch();
|
||||
const features = useFeatures();
|
||||
const { account } = status;
|
||||
|
||||
if (!account || typeof account !== 'object') return null;
|
||||
|
||||
const onOpenUnauthorizedModal = () => {
|
||||
dispatch(openModal('UNAUTHORIZED'));
|
||||
};
|
||||
|
||||
const onOpenReblogsModal = (username: string, statusId: string): void => {
|
||||
dispatch(openModal('REBLOGS', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
};
|
||||
|
||||
const onOpenFavouritesModal = (username: string, statusId: string): void => {
|
||||
dispatch(openModal('FAVOURITES', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
};
|
||||
|
||||
const onOpenReactionsModal = (username: string, statusId: string, reaction: string): void => {
|
||||
dispatch(openModal('REACTIONS', {
|
||||
username,
|
||||
statusId,
|
||||
reaction,
|
||||
}));
|
||||
};
|
||||
|
||||
const getNormalizedReacts = () => {
|
||||
return reduceEmoji(
|
||||
ImmutableList(status.getIn(['pleroma', 'emoji_reactions']) as any),
|
||||
status.favourites_count,
|
||||
status.favourited,
|
||||
allowedEmoji,
|
||||
).reverse();
|
||||
};
|
||||
|
||||
const handleOpenReblogsModal: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReblogsModal(account.acct, status.id);
|
||||
};
|
||||
|
||||
const getReposts = () => {
|
||||
if (status.reblogs_count) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className='text-success-600 cursor-pointer'
|
||||
src={require('@tabler/icons/icons/repeat.svg')}
|
||||
role='presentation'
|
||||
onClick={handleOpenReblogsModal}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.reblogs_count} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenFavouritesModal(account.acct, status.id);
|
||||
};
|
||||
|
||||
const getFavourites = () => {
|
||||
if (status.favourites_count) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className={classNames({
|
||||
'text-accent-300': true,
|
||||
'cursor-default': !features.exposableReactions,
|
||||
})}
|
||||
src={require('@tabler/icons/icons/heart.svg')}
|
||||
iconClassName='fill-accent-300'
|
||||
role='presentation'
|
||||
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.favourites_count} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleOpenReactionsModal = (reaction: ImmutableMap<string, any>) => () => {
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReactionsModal(account.acct, status.id, String(reaction.get('name')));
|
||||
};
|
||||
|
||||
const getEmojiReacts = () => {
|
||||
const emojiReacts = getNormalizedReacts();
|
||||
const count = emojiReacts.reduce((acc, cur) => (
|
||||
acc + cur.get('count')
|
||||
), 0);
|
||||
|
||||
if (count > 0) {
|
||||
return (
|
||||
<div className='emoji-reacts-container'>
|
||||
<div className='emoji-reacts'>
|
||||
{emojiReacts.map((e, i) => {
|
||||
const emojiReact = (
|
||||
<>
|
||||
<span
|
||||
className='emoji-react__emoji'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
|
||||
/>
|
||||
<span className='emoji-react__count'>{e.get('count')}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
if (features.exposableReactions) {
|
||||
return (
|
||||
<span
|
||||
className='emoji-react'
|
||||
role='presentation'
|
||||
key={i}
|
||||
onClick={handleOpenReactionsModal(e)}
|
||||
>
|
||||
{emojiReact}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className='emoji-react' key={i}>{emojiReact}</span>;
|
||||
})}
|
||||
</div>
|
||||
<div className='emoji-reacts__count'>
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack space={3}>
|
||||
{features.emojiReacts ? getEmojiReacts() : getFavourites()}
|
||||
|
||||
{getReposts()}
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusInteractionBar;
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedNumber } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
|
||||
|
||||
import { HStack, IconButton, Text } from '../../../components/ui';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const me = state.get('me');
|
||||
const instance = state.get('instance');
|
||||
|
||||
return {
|
||||
me,
|
||||
allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
|
||||
features: getFeatures(instance),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenUnauthorizedModal() {
|
||||
dispatch(openModal('UNAUTHORIZED'));
|
||||
},
|
||||
onOpenReblogsModal(username, statusId) {
|
||||
dispatch(openModal('REBLOGS', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
},
|
||||
onOpenFavouritesModal(username, statusId) {
|
||||
dispatch(openModal('FAVOURITES', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
},
|
||||
onOpenReactionsModal(username, statusId, reaction) {
|
||||
dispatch(openModal('REACTIONS', {
|
||||
username,
|
||||
statusId,
|
||||
reaction,
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
class StatusInteractionBar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.record,
|
||||
me: SoapboxPropTypes.me,
|
||||
allowedEmoji: ImmutablePropTypes.list,
|
||||
features: PropTypes.object.isRequired,
|
||||
onOpenReblogsModal: PropTypes.func,
|
||||
onOpenReactionsModal: PropTypes.func,
|
||||
}
|
||||
|
||||
getNormalizedReacts = () => {
|
||||
const { status } = this.props;
|
||||
return reduceEmoji(
|
||||
status.getIn(['pleroma', 'emoji_reactions']),
|
||||
status.get('favourites_count'),
|
||||
status.get('favourited'),
|
||||
this.props.allowedEmoji,
|
||||
).reverse();
|
||||
}
|
||||
|
||||
handleOpenReblogsModal = (event) => {
|
||||
const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
|
||||
}
|
||||
|
||||
getReposts = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
if (status.get('reblogs_count')) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className='text-success-600 cursor-pointer'
|
||||
src={require('@tabler/icons/icons/repeat.svg')}
|
||||
role='presentation'
|
||||
onClick={this.handleOpenReblogsModal}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.get('reblogs_count')} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
handleOpenFavouritesModal = (event) => {
|
||||
const { me, status, onOpenUnauthorizedModal, onOpenFavouritesModal } = this.props;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenFavouritesModal(status.getIn(['account', 'acct']), status.get('id'));
|
||||
}
|
||||
|
||||
getFavourites = () => {
|
||||
const { features, status } = this.props;
|
||||
|
||||
if (status.get('favourites_count')) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className={classNames({
|
||||
'text-accent-300': true,
|
||||
'cursor-default': !features.exposableReactions,
|
||||
})}
|
||||
src={require('@tabler/icons/icons/heart.svg')}
|
||||
iconClassName='fill-accent-300'
|
||||
role='presentation'
|
||||
onClick={features.exposableReactions ? this.handleOpenFavouritesModal : null}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.get('favourites_count')} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
handleOpenReactionsModal = (reaction) => () => {
|
||||
const { me, status, onOpenUnauthorizedModal, onOpenReactionsModal } = this.props;
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReactionsModal(status.getIn(['account', 'acct']), status.get('id'), reaction.get('name'));
|
||||
}
|
||||
|
||||
getEmojiReacts = () => {
|
||||
const { features } = this.props;
|
||||
|
||||
const emojiReacts = this.getNormalizedReacts();
|
||||
const count = emojiReacts.reduce((acc, cur) => (
|
||||
acc + cur.get('count')
|
||||
), 0);
|
||||
|
||||
if (count > 0) {
|
||||
return (
|
||||
<div className='emoji-reacts-container'>
|
||||
<div className='emoji-reacts'>
|
||||
{emojiReacts.map((e, i) => {
|
||||
const emojiReact = (
|
||||
<>
|
||||
<span
|
||||
className='emoji-react__emoji'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
|
||||
/>
|
||||
<span className='emoji-react__count'>{e.get('count')}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
if (features.exposableReactions) {
|
||||
return (
|
||||
<span
|
||||
className='emoji-react'
|
||||
type='button'
|
||||
role='presentation'
|
||||
key={i}
|
||||
onClick={this.handleOpenReactionsModal(e)}
|
||||
>
|
||||
{emojiReact}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className='emoji-react' key={i}>{emojiReact}</span>;
|
||||
})}
|
||||
</div>
|
||||
<div className='emoji-reacts__count'>
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
render() {
|
||||
const { features } = this.props;
|
||||
|
||||
return (
|
||||
<HStack space={3}>
|
||||
{features.emojiReacts ? this.getEmojiReacts() : this.getFavourites()}
|
||||
|
||||
{this.getReposts()}
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import classNames from 'classnames';
|
||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import React from 'react';
|
||||
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
interface IThreadStatus {
|
||||
id: string,
|
||||
focusedStatusId: string,
|
||||
}
|
||||
|
||||
const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
|
||||
const { id, focusedStatusId } = props;
|
||||
|
||||
const replyToId = useAppSelector(state => state.contexts.getIn(['inReplyTos', id]));
|
||||
const replyCount = useAppSelector(state => state.contexts.getIn(['replies', id], ImmutableOrderedSet()).size);
|
||||
const isLoaded = useAppSelector(state => Boolean(state.statuses.get(id)));
|
||||
|
||||
const renderConnector = (): JSX.Element | null => {
|
||||
const isConnectedTop = replyToId && replyToId !== focusedStatusId;
|
||||
const isConnectedBottom = replyCount > 0;
|
||||
const isConnected = isConnectedTop || isConnectedBottom;
|
||||
|
||||
if (!isConnected) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('thread__connector', {
|
||||
'thread__connector--top': isConnectedTop,
|
||||
'thread__connector--bottom': isConnectedBottom,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='thread__status'>
|
||||
{renderConnector()}
|
||||
{isLoaded ? (
|
||||
// @ts-ignore FIXME
|
||||
<StatusContainer {...props} />
|
||||
) : (
|
||||
<PlaceholderStatus thread />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThreadStatus;
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
|
||||
const mapStateToProps = (state, { id }) => {
|
||||
return {
|
||||
replyToId: state.getIn(['contexts', 'inReplyTos', id]),
|
||||
replyCount: state.getIn(['contexts', 'replies', id], ImmutableOrderedSet()).size,
|
||||
isLoaded: Boolean(state.getIn(['statuses', id])),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class ThreadStatus extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
focusedStatusId: PropTypes.string,
|
||||
replyToId: PropTypes.string,
|
||||
replyCount: PropTypes.number,
|
||||
isLoaded: PropTypes.bool,
|
||||
}
|
||||
|
||||
renderConnector() {
|
||||
const { focusedStatusId, replyToId, replyCount } = this.props;
|
||||
|
||||
const isConnectedTop = replyToId && replyToId !== focusedStatusId;
|
||||
const isConnectedBottom = replyCount > 0;
|
||||
const isConnected = isConnectedTop || isConnectedBottom;
|
||||
|
||||
if (!isConnected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('thread__connector', {
|
||||
'thread__connector--top': isConnectedTop,
|
||||
'thread__connector--bottom': isConnectedBottom,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoaded } = this.props;
|
||||
|
||||
return (
|
||||
<div className='thread__status'>
|
||||
{this.renderConnector()}
|
||||
{isLoaded ? (
|
||||
<StatusContainer {...this.props} />
|
||||
) : (
|
||||
<PlaceholderStatus thread />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@ import {
|
|||
revealStatus,
|
||||
} from '../../../actions/statuses';
|
||||
import { makeGetStatus } from '../../../selectors';
|
||||
import DetailedStatus from '../components/detailed_status';
|
||||
import DetailedStatus from '../components/detailed-status';
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import classNames from 'classnames';
|
||||
import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { defineMessages, injectIntl, FormattedMessage, WrappedComponentProps as IntlComponentProps } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { launchChat } from 'soapbox/actions/chats';
|
||||
|
|
@ -22,6 +20,7 @@ import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
|||
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
||||
import SubNavigation from 'soapbox/components/sub_navigation';
|
||||
import { Column } from 'soapbox/components/ui';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
import PendingStatus from 'soapbox/features/ui/components/pending_status';
|
||||
|
||||
import { blockAccount } from '../../actions/accounts';
|
||||
|
|
@ -58,9 +57,20 @@ import { textForScreenReader, defaultMediaVisibility } from '../../components/st
|
|||
import { makeGetStatus } from '../../selectors';
|
||||
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
|
||||
|
||||
import ActionBar from './components/action_bar';
|
||||
import DetailedStatus from './components/detailed_status';
|
||||
import ThreadStatus from './components/thread_status';
|
||||
import ActionBar from './components/action-bar';
|
||||
import DetailedStatus from './components/detailed-status';
|
||||
import ThreadStatus from './components/thread-status';
|
||||
|
||||
import type { AxiosError } from 'axios';
|
||||
import type { History } from 'history';
|
||||
import type { AnyAction } from 'redux';
|
||||
import type { ThunkDispatch } from 'redux-thunk';
|
||||
import type { RootState } from 'soapbox/store';
|
||||
import type {
|
||||
Account as AccountEntity,
|
||||
Attachment as AttachmentEntity,
|
||||
Status as StatusEntity,
|
||||
} from 'soapbox/types/entities';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'status.title', defaultMessage: '@{username}\'s Post' },
|
||||
|
|
@ -84,8 +94,8 @@ const makeMapStateToProps = () => {
|
|||
const getStatus = makeGetStatus();
|
||||
|
||||
const getAncestorsIds = createSelector([
|
||||
(_, { id }) => id,
|
||||
state => state.getIn(['contexts', 'inReplyTos']),
|
||||
(_: RootState, statusId: string) => statusId,
|
||||
(state: RootState) => state.contexts.get('inReplyTos'),
|
||||
], (statusId, inReplyTos) => {
|
||||
let ancestorsIds = ImmutableOrderedSet();
|
||||
let id = statusId;
|
||||
|
|
@ -99,8 +109,8 @@ const makeMapStateToProps = () => {
|
|||
});
|
||||
|
||||
const getDescendantsIds = createSelector([
|
||||
(_, { id }) => id,
|
||||
state => state.getIn(['contexts', 'replies']),
|
||||
(_: RootState, statusId: string) => statusId,
|
||||
(state: RootState) => state.contexts.get('replies'),
|
||||
], (statusId, contextReplies) => {
|
||||
let descendantsIds = ImmutableOrderedSet();
|
||||
const ids = [statusId];
|
||||
|
|
@ -118,7 +128,7 @@ const makeMapStateToProps = () => {
|
|||
}
|
||||
|
||||
if (replies) {
|
||||
replies.reverse().forEach(reply => {
|
||||
replies.reverse().forEach((reply: string) => {
|
||||
ids.unshift(reply);
|
||||
});
|
||||
}
|
||||
|
|
@ -127,15 +137,15 @@ const makeMapStateToProps = () => {
|
|||
return descendantsIds;
|
||||
});
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const mapStateToProps = (state: RootState, props: { params: RouteParams }) => {
|
||||
const status = getStatus(state, { id: props.params.statusId });
|
||||
let ancestorsIds = ImmutableOrderedSet();
|
||||
let descendantsIds = ImmutableOrderedSet();
|
||||
|
||||
if (status) {
|
||||
const statusId = status.get('id');
|
||||
ancestorsIds = getAncestorsIds(state, { id: state.getIn(['contexts', 'inReplyTos', statusId]) });
|
||||
descendantsIds = getDescendantsIds(state, { id: statusId });
|
||||
const statusId = status.id;
|
||||
ancestorsIds = getAncestorsIds(state, state.contexts.getIn(['inReplyTos', statusId]));
|
||||
descendantsIds = getDescendantsIds(state, statusId);
|
||||
ancestorsIds = ancestorsIds.delete(statusId).subtract(descendantsIds);
|
||||
descendantsIds = descendantsIds.delete(statusId).subtract(ancestorsIds);
|
||||
}
|
||||
|
|
@ -146,42 +156,56 @@ const makeMapStateToProps = () => {
|
|||
status,
|
||||
ancestorsIds,
|
||||
descendantsIds,
|
||||
askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
me: state.get('me'),
|
||||
askReplyConfirmation: state.compose.get('text', '').trim().length !== 0,
|
||||
me: state.me,
|
||||
displayMedia: getSettings(state).get('displayMedia'),
|
||||
allowedEmoji: soapbox.get('allowedEmoji'),
|
||||
allowedEmoji: soapbox.allowedEmoji,
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
export default @connect(makeMapStateToProps)
|
||||
@injectIntl
|
||||
@withRouter
|
||||
class Status extends ImmutablePureComponent {
|
||||
type DisplayMedia = 'default' | 'hide_all' | 'show_all';
|
||||
type RouteParams = { statusId: string };
|
||||
|
||||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
status: ImmutablePropTypes.record,
|
||||
ancestorsIds: ImmutablePropTypes.orderedSet,
|
||||
descendantsIds: ImmutablePropTypes.orderedSet,
|
||||
intl: PropTypes.object.isRequired,
|
||||
askReplyConfirmation: PropTypes.bool,
|
||||
domain: PropTypes.string,
|
||||
displayMedia: PropTypes.string,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
interface IStatus extends RouteComponentProps, IntlComponentProps {
|
||||
params: RouteParams,
|
||||
dispatch: ThunkDispatch<RootState, void, AnyAction>,
|
||||
status: StatusEntity,
|
||||
ancestorsIds: ImmutableOrderedSet<string>,
|
||||
descendantsIds: ImmutableOrderedSet<string>,
|
||||
askReplyConfirmation: boolean,
|
||||
displayMedia: DisplayMedia,
|
||||
allowedEmoji: ImmutableList<string>,
|
||||
onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
|
||||
onOpenVideo: (video: AttachmentEntity, time: number) => void,
|
||||
}
|
||||
|
||||
interface IStatusState {
|
||||
fullscreen: boolean,
|
||||
showMedia: boolean,
|
||||
loadedStatusId?: string,
|
||||
emojiSelectorFocused: boolean,
|
||||
isLoaded: boolean,
|
||||
error?: AxiosError,
|
||||
}
|
||||
|
||||
class Status extends ImmutablePureComponent<IStatus, IStatusState> {
|
||||
|
||||
state = {
|
||||
fullscreen: false,
|
||||
showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
|
||||
loadedStatusId: undefined,
|
||||
emojiSelectorFocused: false,
|
||||
isLoaded: Boolean(this.props.status),
|
||||
error: undefined,
|
||||
};
|
||||
|
||||
node: HTMLDivElement | null = null;
|
||||
status: HTMLDivElement | null = null;
|
||||
_scrolledIntoView: boolean = false;
|
||||
|
||||
fetchData = () => {
|
||||
const { dispatch, params } = this.props;
|
||||
const { statusId } = params;
|
||||
|
|
@ -190,7 +214,11 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
this.fetchData().then(() => {
|
||||
this.setState({ isLoaded: true });
|
||||
}).catch(error => {
|
||||
this.setState({ error, isLoaded: true });
|
||||
});
|
||||
attachFullscreenListener(this.onFullScreenChange);
|
||||
}
|
||||
|
||||
|
|
@ -198,35 +226,35 @@ class Status extends ImmutablePureComponent {
|
|||
this.setState({ showMedia: !this.state.showMedia });
|
||||
}
|
||||
|
||||
handleEmojiReactClick = (status, emoji) => {
|
||||
handleEmojiReactClick = (status: StatusEntity, emoji: string) => {
|
||||
this.props.dispatch(simpleEmojiReact(status, emoji));
|
||||
}
|
||||
|
||||
handleFavouriteClick = (status) => {
|
||||
if (status.get('favourited')) {
|
||||
handleFavouriteClick = (status: StatusEntity) => {
|
||||
if (status.favourited) {
|
||||
this.props.dispatch(unfavourite(status));
|
||||
} else {
|
||||
this.props.dispatch(favourite(status));
|
||||
}
|
||||
}
|
||||
|
||||
handlePin = (status) => {
|
||||
if (status.get('pinned')) {
|
||||
handlePin = (status: StatusEntity) => {
|
||||
if (status.pinned) {
|
||||
this.props.dispatch(unpin(status));
|
||||
} else {
|
||||
this.props.dispatch(pin(status));
|
||||
}
|
||||
}
|
||||
|
||||
handleBookmark = (status) => {
|
||||
if (status.get('bookmarked')) {
|
||||
handleBookmark = (status: StatusEntity) => {
|
||||
if (status.bookmarked) {
|
||||
this.props.dispatch(unbookmark(status));
|
||||
} else {
|
||||
this.props.dispatch(bookmark(status));
|
||||
}
|
||||
}
|
||||
|
||||
handleReplyClick = (status) => {
|
||||
handleReplyClick = (status: StatusEntity) => {
|
||||
const { askReplyConfirmation, dispatch, intl } = this.props;
|
||||
if (askReplyConfirmation) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
|
|
@ -239,14 +267,14 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleModalReblog = (status) => {
|
||||
handleModalReblog = (status: StatusEntity) => {
|
||||
this.props.dispatch(reblog(status));
|
||||
}
|
||||
|
||||
handleReblogClick = (status, e) => {
|
||||
handleReblogClick = (status: StatusEntity, e?: React.MouseEvent) => {
|
||||
this.props.dispatch((_, getState) => {
|
||||
const boostModal = getSettings(getState()).get('boostModal');
|
||||
if (status.get('reblogged')) {
|
||||
if (status.reblogged) {
|
||||
this.props.dispatch(unreblog(status));
|
||||
} else {
|
||||
if ((e && e.shiftKey) || !boostModal) {
|
||||
|
|
@ -258,7 +286,7 @@ class Status extends ImmutablePureComponent {
|
|||
});
|
||||
}
|
||||
|
||||
handleQuoteClick = (status, e) => {
|
||||
handleQuoteClick = (status: StatusEntity) => {
|
||||
const { askReplyConfirmation, dispatch, intl } = this.props;
|
||||
if (askReplyConfirmation) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
|
|
@ -271,147 +299,148 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleDeleteClick = (status, history, withRedraft = false) => {
|
||||
handleDeleteClick = (status: StatusEntity, history: History, withRedraft = false) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
|
||||
this.props.dispatch((_, getState) => {
|
||||
const deleteModal = getSettings(getState()).get('deleteModal');
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id'), history, withRedraft));
|
||||
dispatch(deleteStatus(status.id, history, withRedraft));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
|
||||
heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
|
||||
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
|
||||
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
|
||||
onConfirm: () => dispatch(deleteStatus(status.id, history, withRedraft)),
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleDirectClick = (account, router) => {
|
||||
handleDirectClick = (account: AccountEntity, router: History) => {
|
||||
this.props.dispatch(directCompose(account, router));
|
||||
}
|
||||
|
||||
handleChatClick = (account, router) => {
|
||||
this.props.dispatch(launchChat(account.get('id'), router));
|
||||
handleChatClick = (account: AccountEntity, router: History) => {
|
||||
this.props.dispatch(launchChat(account.id, router));
|
||||
}
|
||||
|
||||
handleMentionClick = (account, router) => {
|
||||
handleMentionClick = (account: AccountEntity, router: History) => {
|
||||
this.props.dispatch(mentionCompose(account, router));
|
||||
}
|
||||
|
||||
handleOpenMedia = (media, index) => {
|
||||
handleOpenMedia = (media: ImmutableList<AttachmentEntity>, index: number) => {
|
||||
this.props.dispatch(openModal('MEDIA', { media, index }));
|
||||
}
|
||||
|
||||
handleOpenVideo = (media, time) => {
|
||||
handleOpenVideo = (media: ImmutableList<AttachmentEntity>, time: number) => {
|
||||
this.props.dispatch(openModal('VIDEO', { media, time }));
|
||||
}
|
||||
|
||||
handleHotkeyOpenMedia = e => {
|
||||
const { onOpenMedia, onOpenVideo } = this.props;
|
||||
const status = this._properStatus();
|
||||
handleHotkeyOpenMedia = (e?: KeyboardEvent) => {
|
||||
const { status, onOpenMedia, onOpenVideo } = this.props;
|
||||
const firstAttachment = status.media_attachments.get(0);
|
||||
|
||||
e.preventDefault();
|
||||
e?.preventDefault();
|
||||
|
||||
if (status.get('media_attachments').size > 0) {
|
||||
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
|
||||
onOpenVideo(status.getIn(['media_attachments', 0]), 0);
|
||||
if (status.media_attachments.size > 0 && firstAttachment) {
|
||||
if (firstAttachment.type === 'video') {
|
||||
onOpenVideo(firstAttachment, 0);
|
||||
} else {
|
||||
onOpenMedia(status.get('media_attachments'), 0);
|
||||
onOpenMedia(status.media_attachments, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleMuteClick = (account) => {
|
||||
handleMuteClick = (account: AccountEntity) => {
|
||||
this.props.dispatch(initMuteModal(account));
|
||||
}
|
||||
|
||||
handleConversationMuteClick = (status) => {
|
||||
if (status.get('muted')) {
|
||||
this.props.dispatch(unmuteStatus(status.get('id')));
|
||||
handleConversationMuteClick = (status: StatusEntity) => {
|
||||
if (status.muted) {
|
||||
this.props.dispatch(unmuteStatus(status.id));
|
||||
} else {
|
||||
this.props.dispatch(muteStatus(status.get('id')));
|
||||
this.props.dispatch(muteStatus(status.id));
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleHidden = (status) => {
|
||||
if (status.get('hidden')) {
|
||||
this.props.dispatch(revealStatus(status.get('id')));
|
||||
handleToggleHidden = (status: StatusEntity) => {
|
||||
if (status.hidden) {
|
||||
this.props.dispatch(revealStatus(status.id));
|
||||
} else {
|
||||
this.props.dispatch(hideStatus(status.get('id')));
|
||||
this.props.dispatch(hideStatus(status.id));
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleAll = () => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
|
||||
const statusIds = [status.id].concat(ancestorsIds.toArray(), descendantsIds.toArray());
|
||||
|
||||
if (status.get('hidden')) {
|
||||
if (status.hidden) {
|
||||
this.props.dispatch(revealStatus(statusIds));
|
||||
} else {
|
||||
this.props.dispatch(hideStatus(statusIds));
|
||||
}
|
||||
}
|
||||
|
||||
handleBlockClick = (status) => {
|
||||
handleBlockClick = (status: StatusEntity) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
const account = status.get('account');
|
||||
const { account } = status;
|
||||
if (!account || typeof account !== 'object') return;
|
||||
|
||||
dispatch(openModal('CONFIRM', {
|
||||
icon: require('@tabler/icons/icons/ban.svg'),
|
||||
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
|
||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
||||
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
|
||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
|
||||
confirm: intl.formatMessage(messages.blockConfirm),
|
||||
onConfirm: () => dispatch(blockAccount(account.get('id'))),
|
||||
onConfirm: () => dispatch(blockAccount(account.id)),
|
||||
secondary: intl.formatMessage(messages.blockAndReport),
|
||||
onSecondary: () => {
|
||||
dispatch(blockAccount(account.get('id')));
|
||||
dispatch(blockAccount(account.id));
|
||||
dispatch(initReport(account, status));
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
handleReport = (status) => {
|
||||
this.props.dispatch(initReport(status.get('account'), status));
|
||||
handleReport = (status: StatusEntity) => {
|
||||
this.props.dispatch(initReport(status.account, status));
|
||||
}
|
||||
|
||||
handleEmbed = (status) => {
|
||||
this.props.dispatch(openModal('EMBED', { url: status.get('url') }));
|
||||
handleEmbed = (status: StatusEntity) => {
|
||||
this.props.dispatch(openModal('EMBED', { url: status.url }));
|
||||
}
|
||||
|
||||
handleDeactivateUser = (status) => {
|
||||
handleDeactivateUser = (status: StatusEntity) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
dispatch(deactivateUserModal(intl, status.getIn(['account', 'id'])));
|
||||
}
|
||||
|
||||
handleDeleteUser = (status) => {
|
||||
handleDeleteUser = (status: StatusEntity) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
dispatch(deleteUserModal(intl, status.getIn(['account', 'id'])));
|
||||
}
|
||||
|
||||
handleToggleStatusSensitivity = (status) => {
|
||||
handleToggleStatusSensitivity = (status: StatusEntity) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
dispatch(toggleStatusSensitivityModal(intl, status.get('id'), status.get('sensitive')));
|
||||
dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
|
||||
}
|
||||
|
||||
handleDeleteStatus = (status) => {
|
||||
handleDeleteStatus = (status: StatusEntity) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
dispatch(deleteStatusModal(intl, status.get('id')));
|
||||
dispatch(deleteStatusModal(intl, status.id));
|
||||
}
|
||||
|
||||
handleHotkeyMoveUp = () => {
|
||||
this.handleMoveUp(this.props.status.get('id'));
|
||||
this.handleMoveUp(this.props.status.id);
|
||||
}
|
||||
|
||||
handleHotkeyMoveDown = () => {
|
||||
this.handleMoveDown(this.props.status.get('id'));
|
||||
this.handleMoveDown(this.props.status.id);
|
||||
}
|
||||
|
||||
handleHotkeyReply = e => {
|
||||
e.preventDefault();
|
||||
handleHotkeyReply = (e?: KeyboardEvent) => {
|
||||
e?.preventDefault();
|
||||
this.handleReplyClick(this.props.status);
|
||||
}
|
||||
|
||||
|
|
@ -423,9 +452,11 @@ class Status extends ImmutablePureComponent {
|
|||
this.handleReblogClick(this.props.status);
|
||||
}
|
||||
|
||||
handleHotkeyMention = e => {
|
||||
e.preventDefault();
|
||||
this.handleMentionClick(this.props.status.get('account'));
|
||||
handleHotkeyMention = (e?: KeyboardEvent) => {
|
||||
e?.preventDefault();
|
||||
const { account } = this.props.status;
|
||||
if (!account || typeof account !== 'object') return;
|
||||
this.handleMentionClick(account, this.props.history);
|
||||
}
|
||||
|
||||
handleHotkeyOpenProfile = () => {
|
||||
|
|
@ -444,10 +475,10 @@ class Status extends ImmutablePureComponent {
|
|||
this._expandEmojiSelector();
|
||||
}
|
||||
|
||||
handleMoveUp = id => {
|
||||
handleMoveUp = (id: string) => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (id === status.get('id')) {
|
||||
if (id === status.id) {
|
||||
this._selectChild(ancestorsIds.size - 1, true);
|
||||
} else {
|
||||
let index = ImmutableList(ancestorsIds).indexOf(id);
|
||||
|
|
@ -461,10 +492,10 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleMoveDown = id => {
|
||||
handleMoveDown = (id: string) => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (id === status.get('id')) {
|
||||
if (id === status.id) {
|
||||
this._selectChild(ancestorsIds.size + 1, false);
|
||||
} else {
|
||||
let index = ImmutableList(ancestorsIds).indexOf(id);
|
||||
|
|
@ -478,26 +509,28 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleEmojiSelectorExpand = e => {
|
||||
handleEmojiSelectorExpand: React.EventHandler<React.KeyboardEvent> = e => {
|
||||
if (e.key === 'Enter') {
|
||||
this._expandEmojiSelector();
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
handleEmojiSelectorUnfocus = () => {
|
||||
handleEmojiSelectorUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
|
||||
this.setState({ emojiSelectorFocused: false });
|
||||
}
|
||||
|
||||
_expandEmojiSelector = () => {
|
||||
if (!this.status) return;
|
||||
this.setState({ emojiSelectorFocused: true });
|
||||
const firstEmoji = this.status.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
|
||||
firstEmoji.focus();
|
||||
const firstEmoji: HTMLButtonElement | null = this.status.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
|
||||
firstEmoji?.focus();
|
||||
};
|
||||
|
||||
_selectChild(index, align_top) {
|
||||
_selectChild(index: number, align_top: boolean) {
|
||||
const container = this.node;
|
||||
const element = container.querySelectorAll('.focusable')[index];
|
||||
if (!container) return;
|
||||
const element = container.querySelectorAll('.focusable')[index] as HTMLButtonElement;
|
||||
|
||||
if (element) {
|
||||
if (align_top && container.scrollTop > element.offsetTop) {
|
||||
|
|
@ -509,7 +542,7 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
renderTombstone(id) {
|
||||
renderTombstone(id: string) {
|
||||
return (
|
||||
<div className='tombstone' key={id}>
|
||||
<p><FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts is unavailable.' /></p>
|
||||
|
|
@ -517,22 +550,23 @@ class Status extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderStatus(id) {
|
||||
renderStatus(id: string) {
|
||||
const { status } = this.props;
|
||||
|
||||
return (
|
||||
<ThreadStatus
|
||||
key={id}
|
||||
id={id}
|
||||
focusedStatusId={status && status.get('id')}
|
||||
focusedStatusId={status.id}
|
||||
// @ts-ignore FIXME
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType='thread'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderPendingStatus(id) {
|
||||
renderPendingStatus(id: string) {
|
||||
const { status } = this.props;
|
||||
const idempotencyKey = id.replace(/^末pending-/, '');
|
||||
|
||||
return (
|
||||
|
|
@ -540,7 +574,7 @@ class Status extends ImmutablePureComponent {
|
|||
className='thread__status'
|
||||
key={id}
|
||||
idempotencyKey={idempotencyKey}
|
||||
focusedStatusId={status && status.get('id')}
|
||||
focusedStatusId={status.id}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType='thread'
|
||||
|
|
@ -548,7 +582,7 @@ class Status extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderChildren(list) {
|
||||
renderChildren(list: ImmutableOrderedSet<string>) {
|
||||
return list.map(id => {
|
||||
if (id.endsWith('-tombstone')) {
|
||||
return this.renderTombstone(id);
|
||||
|
|
@ -560,16 +594,16 @@ class Status extends ImmutablePureComponent {
|
|||
});
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
setRef: React.RefCallback<HTMLDivElement> = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
setStatusRef = c => {
|
||||
setStatusRef: React.RefCallback<HTMLDivElement> = c => {
|
||||
this.status = c;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { params, status } = this.props;
|
||||
componentDidUpdate(prevProps: IStatus, prevState: IStatusState) {
|
||||
const { params, status, displayMedia } = this.props;
|
||||
const { ancestorsIds } = prevProps;
|
||||
|
||||
if (params.statusId !== prevProps.params.statusId) {
|
||||
|
|
@ -577,8 +611,8 @@ class Status extends ImmutablePureComponent {
|
|||
this.fetchData();
|
||||
}
|
||||
|
||||
if (status && status.get('id') !== prevState.loadedStatusId) {
|
||||
this.setState({ showMedia: defaultMediaVisibility(status), loadedStatusId: status.get('id') });
|
||||
if (status && status.id !== prevState.loadedStatusId) {
|
||||
this.setState({ showMedia: defaultMediaVisibility(status, displayMedia), loadedStatusId: status.id });
|
||||
}
|
||||
|
||||
if (this._scrolledIntoView) {
|
||||
|
|
@ -589,7 +623,7 @@ class Status extends ImmutablePureComponent {
|
|||
const element = this.node.querySelector('.detailed-status');
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
element.scrollIntoView(true);
|
||||
element?.scrollIntoView(true);
|
||||
});
|
||||
this._scrolledIntoView = true;
|
||||
}
|
||||
|
|
@ -609,12 +643,17 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
render() {
|
||||
let ancestors, descendants;
|
||||
const { status, ancestorsIds, descendantsIds, intl, domain } = this.props;
|
||||
const { status, ancestorsIds, descendantsIds, intl } = this.props;
|
||||
|
||||
if (status === null) {
|
||||
if (!status && this.state.isLoaded) {
|
||||
// TODO: handle errors other than 404 with `this.state.error?.response?.status`
|
||||
return (
|
||||
<MissingIndicator />
|
||||
);
|
||||
} else if (!status) {
|
||||
return (
|
||||
<PlaceholderStatus />
|
||||
);
|
||||
}
|
||||
|
||||
if (ancestorsIds && ancestorsIds.size > 0) {
|
||||
|
|
@ -625,7 +664,9 @@ class Status extends ImmutablePureComponent {
|
|||
descendants = this.renderChildren(descendantsIds);
|
||||
}
|
||||
|
||||
const handlers = {
|
||||
type HotkeyHandlers = { [key: string]: (keyEvent?: KeyboardEvent) => void };
|
||||
|
||||
const handlers: HotkeyHandlers = {
|
||||
moveUp: this.handleHotkeyMoveUp,
|
||||
moveDown: this.handleHotkeyMoveDown,
|
||||
reply: this.handleHotkeyReply,
|
||||
|
|
@ -639,8 +680,8 @@ class Status extends ImmutablePureComponent {
|
|||
react: this.handleHotkeyReact,
|
||||
};
|
||||
|
||||
const username = status.getIn(['account', 'acct']);
|
||||
const titleMessage = status && status.get('visibility') === 'direct' ? messages.titleDirect : messages.title;
|
||||
const username = String(status.getIn(['account', 'acct']));
|
||||
const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(titleMessage, { username })} transparent>
|
||||
|
|
@ -656,13 +697,19 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
<div className='thread__status thread__status--focused'>
|
||||
<HotKeys handlers={handlers}>
|
||||
<div ref={this.setStatusRef} className={classNames('detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
|
||||
<div
|
||||
ref={this.setStatusRef}
|
||||
className={classNames('detailed-status__wrapper')}
|
||||
tabIndex={0}
|
||||
// FIXME: no "reblogged by" text is added for the screen reader
|
||||
aria-label={textForScreenReader(intl, status)}
|
||||
>
|
||||
{/* @ts-ignore */}
|
||||
<DetailedStatus
|
||||
status={status}
|
||||
onOpenVideo={this.handleOpenVideo}
|
||||
onOpenMedia={this.handleOpenMedia}
|
||||
onToggleHidden={this.handleToggleHidden}
|
||||
domain={domain}
|
||||
showMedia={this.state.showMedia}
|
||||
onToggleMediaVisibility={this.handleToggleMediaVisibility}
|
||||
/>
|
||||
|
|
@ -713,3 +760,7 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
const WrappedComponent = withRouter(injectIntl(Status));
|
||||
// @ts-ignore
|
||||
export default connect(makeMapStateToProps)(WrappedComponent);
|
||||
|
|
@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
|
|||
import { logOut, switchAccount } from 'soapbox/actions/auth';
|
||||
import { fetchOwnAccounts } from 'soapbox/actions/auth';
|
||||
import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
|
||||
import Account from '../../../components/account';
|
||||
|
|
@ -36,8 +36,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
|
|||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const me = useAppSelector((state) => state.me);
|
||||
const currentAccount = useAppSelector((state) => getAccount(state, me));
|
||||
const currentAccount = useOwnAccount();
|
||||
const authUsers = useAppSelector((state) => state.auth.get('users'));
|
||||
const isCurrentAccountStaff = Boolean(currentAccount?.staff);
|
||||
const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import { Button, Stack, Text } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
|
||||
|
||||
const SignUpPanel = () => {
|
||||
const soapboxConfig = useAppSelector((state) => getSoapboxConfig(state));
|
||||
const siteTitle: string = useAppSelector((state) => state.instance.title);
|
||||
const me: boolean | null = useAppSelector((state) => state.me);
|
||||
const singleUserMode: boolean = soapboxConfig.get('singleUserMode');
|
||||
const { singleUserMode } = useSoapboxConfig();
|
||||
const siteTitle = useAppSelector((state) => state.instance.title);
|
||||
const me = useAppSelector((state) => state.me);
|
||||
|
||||
if (me || singleUserMode) return null;
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export interface ReducerAccount extends AccountRecord {
|
|||
moved: string | null,
|
||||
}
|
||||
|
||||
type State = ImmutableMap<string | number, ReducerAccount>;
|
||||
type State = ImmutableMap<any, ReducerAccount>;
|
||||
|
||||
const initialState: State = ImmutableMap();
|
||||
|
||||
|
|
|
|||
|
|
@ -10,17 +10,21 @@ import {
|
|||
ME_PATCH_SUCCESS,
|
||||
} from '../actions/me';
|
||||
|
||||
const initialState = null;
|
||||
import type { AxiosError } from 'axios';
|
||||
import type { AnyAction } from 'redux';
|
||||
import type { Me } from 'soapbox/types/soapbox';
|
||||
|
||||
const handleForbidden = (state, error) => {
|
||||
if ([401, 403].includes(error.response?.status)) {
|
||||
const initialState: Me = null;
|
||||
|
||||
const handleForbidden = (state: Me, error: AxiosError) => {
|
||||
if (([401, 403] as any[]).includes(error.response?.status)) {
|
||||
return false;
|
||||
} else {
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
export default function me(state = initialState, action) {
|
||||
export default function me(state: Me = initialState, action: AnyAction): Me {
|
||||
switch(action.type) {
|
||||
case ME_FETCH_SUCCESS:
|
||||
case ME_PATCH_SUCCESS:
|
||||
|
|
@ -98,12 +98,12 @@ const toServerSideType = (columnType: string): string => {
|
|||
}
|
||||
};
|
||||
|
||||
type FilterContext = { contextType: string };
|
||||
type FilterContext = { contextType?: string };
|
||||
|
||||
export const getFilters = (state: RootState, { contextType }: FilterContext) => {
|
||||
export const getFilters = (state: RootState, query: FilterContext) => {
|
||||
return state.filters.filter((filter): boolean => {
|
||||
return contextType
|
||||
&& filter.get('context').includes(toServerSideType(contextType))
|
||||
return query?.contextType
|
||||
&& filter.get('context').includes(toServerSideType(query.contextType))
|
||||
&& (filter.get('expires_at') === null
|
||||
|| Date.parse(filter.get('expires_at')) > new Date().getTime());
|
||||
});
|
||||
|
|
@ -132,7 +132,7 @@ export const regexFromFilters = (filters: ImmutableList<ImmutableMap<string, any
|
|||
}).join('|'), 'i');
|
||||
};
|
||||
|
||||
type APIStatus = { id: string, username: string };
|
||||
type APIStatus = { id: string, username?: string };
|
||||
|
||||
export const makeGetStatus = () => {
|
||||
return createSelector(
|
||||
|
|
|
|||
Loading…
Reference in New Issue