import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusContainer from 'flavours/glitch/containers/status_container';
+import StatusContent from 'flavours/glitch/components/status_content';
+import AttachmentList from 'flavours/glitch/components/attachment_list';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
+import AvatarComposite from 'flavours/glitch/components/avatar_composite';
+import Permalink from 'flavours/glitch/components/permalink';
+import IconButton from 'flavours/glitch/components/icon_button';
+import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { HotKeys } from 'react-hotkeys';
-export default class Conversation extends ImmutablePureComponent {
+const messages = defineMessages({
+ more: { id: 'status.more', defaultMessage: 'More' },
+ open: { id: 'conversation.open', defaultMessage: 'View conversation' },
+ reply: { id: 'status.reply', defaultMessage: 'Reply' },
+ markAsRead: { id: 'conversation.mark_as_read', defaultMessage: 'Mark as read' },
+ delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
+ muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
+ unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+});
+
+export default @injectIntl
+class Conversation extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
static propTypes = {
conversationId: PropTypes.string.isRequired,
accounts: ImmutablePropTypes.list.isRequired,
- lastStatusId: PropTypes.string,
+ lastStatus: ImmutablePropTypes.map,
unread:PropTypes.bool.isRequired,
onMoveUp: PropTypes.func,
onMoveDown: PropTypes.func,
markRead: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ state = {
+ isExpanded: undefined,
};
+ parseClick = (e, destination) => {
+ const { router } = this.context;
+ const { lastStatus, unread, markRead } = this.props;
+ if (!router) return;
+
+ if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey)) {
+ if (destination === undefined) {
+ if (unread) {
+ markRead();
+ }
+ destination = `/statuses/${lastStatus.get('id')}`;
+ }
+ let state = {...router.history.location.state};
+ state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
+ router.history.push(destination, state);
+ e.preventDefault();
+ }
+ }
+
handleClick = () => {
if (!this.context.router) {
return;
}
- const { lastStatusId, unread, markRead } = this.props;
+ const { lastStatus, unread, markRead } = this.props;
if (unread) {
markRead();
}
- this.context.router.history.push(`/statuses/${lastStatusId}`);
+ this.context.router.history.push(`/statuses/${lastStatus.get('id')}`);
+ }
+
+ handleMarkAsRead = () => {
+ this.props.markRead();
+ }
+
+ handleReply = () => {
+ this.props.reply(this.props.lastStatus, this.context.router.history);
+ }
+
+ handleDelete = () => {
+ this.props.delete();
}
handleHotkeyMoveUp = () => {
this.props.onMoveDown(this.props.conversationId);
}
+ handleConversationMute = () => {
+ this.props.onMute(this.props.lastStatus);
+ }
+
+ handleShowMore = () => {
+ if (this.props.lastStatus.get('spoiler_text')) {
+ this.setExpansion(!this.state.isExpanded);
+ }
+ };
+
+ setExpansion = value => {
+ this.setState({ isExpanded: value });
+ }
+
render () {
- const { accounts, lastStatusId, unread } = this.props;
+ const { accounts, lastStatus, unread, intl } = this.props;
+ const { isExpanded } = this.state;
- if (lastStatusId === null) {
+ if (lastStatus === null) {
return null;
}
+ const menu = [
+ { text: intl.formatMessage(messages.open), action: this.handleClick },
+ null,
+ ];
+
+ menu.push({ text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMute });
+
+ if (unread) {
+ menu.push({ text: intl.formatMessage(messages.markAsRead), action: this.handleMarkAsRead });
+ menu.push(null);
+ }
+
+ menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
+
+ const names = accounts.map(a => <Permalink to={`/accounts/${a.get('id')}`} href={a.get('url')} key={a.get('id')} title={a.get('acct')}><bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi></Permalink>).reduce((prev, cur) => [prev, ', ', cur]);
+
+ const handlers = {
+ reply: this.handleReply,
+ open: this.handleClick,
+ moveUp: this.handleHotkeyMoveUp,
+ moveDown: this.handleHotkeyMoveDown,
+ toggleHidden: this.handleShowMore,
+ };
+
+ let media = null;
+ if (lastStatus.get('media_attachments').size > 0) {
+ media = <AttachmentList compact media={lastStatus.get('media_attachments')} />;
+ }
+
return (
- <StatusContainer
- id={lastStatusId}
- unread={unread}
- otherAccounts={accounts}
- onMoveUp={this.handleHotkeyMoveUp}
- onMoveDown={this.handleHotkeyMoveDown}
- onClick={this.handleClick}
- />
+ <HotKeys handlers={handlers}>
+ <div className='conversation focusable muted' tabIndex='0'>
+ <div className='conversation__avatar'>
+ <AvatarComposite accounts={accounts} size={48} />
+ </div>
+
+ <div className='conversation__content'>
+ <div className='conversation__content__info'>
+ <div className='conversation__content__relative-time'>
+ <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
+ </div>
+
+ <div className='conversation__content__names'>
+ <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
+ </div>
+ </div>
+
+ <StatusContent
+ status={lastStatus}
+ parseClick={this.parseClick}
+ expanded={isExpanded}
+ onExpandedToggle={this.handleShowMore}
+ collapsable
+ media={media}
+ />
+
+ <div className='status__action-bar'>
+ <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReply} />
+
+ <div className='status__action-bar-dropdown'>
+ <DropdownMenuContainer status={lastStatus} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />
+ </div>
+ </div>
+ </div>
+ </div>
+ </HotKeys>
);
}
import { connect } from 'react-redux';
import Conversation from '../components/conversation';
-import { markConversationRead } from '../../../actions/conversations';
+import { markConversationRead, deleteConversation } from 'flavours/glitch/actions/conversations';
+import { makeGetStatus } from 'flavours/glitch/selectors';
+import { replyCompose } from 'flavours/glitch/actions/compose';
+import { openModal } from 'flavours/glitch/actions/modal';
+import { muteStatus, unmuteStatus, hideStatus, revealStatus } from 'flavours/glitch/actions/statuses';
+import { defineMessages, injectIntl } from 'react-intl';
-const mapStateToProps = (state, { conversationId }) => {
- const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
+const messages = defineMessages({
+ replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+ replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
+});
+
+const mapStateToProps = () => {
+ const getStatus = makeGetStatus();
+
+ return (state, { conversationId }) => {
+ const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
+ const lastStatusId = conversation.get('last_status', null);
- return {
- accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
- unread: conversation.get('unread'),
- lastStatusId: conversation.get('last_status', null),
+ return {
+ accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
+ unread: conversation.get('unread'),
+ lastStatus: lastStatusId && getStatus(state, { id: lastStatusId }),
+ };
};
};
-const mapDispatchToProps = (dispatch, { conversationId }) => ({
- markRead: () => dispatch(markConversationRead(conversationId)),
+const mapDispatchToProps = (dispatch, { intl, conversationId }) => ({
+
+ markRead () {
+ dispatch(markConversationRead(conversationId));
+ },
+
+ reply (status, router) {
+ dispatch((_, getState) => {
+ let state = getState();
+
+ if (state.getIn(['compose', 'text']).trim().length !== 0) {
+ dispatch(openModal('CONFIRM', {
+ message: intl.formatMessage(messages.replyMessage),
+ confirm: intl.formatMessage(messages.replyConfirm),
+ onConfirm: () => dispatch(replyCompose(status, router)),
+ }));
+ } else {
+ dispatch(replyCompose(status, router));
+ }
+ });
+ },
+
+ delete () {
+ dispatch(deleteConversation(conversationId));
+ },
+
+ onMute (status) {
+ if (status.get('muted')) {
+ dispatch(unmuteStatus(status.get('id')));
+ } else {
+ dispatch(muteStatus(status.get('id')));
+ }
+ },
+
+ onToggleHidden (status) {
+ if (status.get('hidden')) {
+ dispatch(revealStatus(status.get('id')));
+ } else {
+ dispatch(hideStatus(status.get('id')));
+ }
+ },
+
});
-export default connect(mapStateToProps, mapDispatchToProps)(Conversation);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Conversation));
cat aescling's git repositories / mastodon.git / commitdiff