wip quote post composing

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/compose.js

@@ -27,6 +27,8 @@ export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
 export const COMPOSE_REPLY           = 'COMPOSE_REPLY';
 export const COMPOSE_REPLY_CANCEL    = 'COMPOSE_REPLY_CANCEL';
+export const COMPOSE_QUOTE           = 'COMPOSE_QUOTE';
+export const COMPOSE_QUOTE_CANCEL    = 'COMPOSE_QUOTE_CANCEL';
 export const COMPOSE_DIRECT          = 'COMPOSE_DIRECT';
 export const COMPOSE_MENTION         = 'COMPOSE_MENTION';
 export const COMPOSE_RESET           = 'COMPOSE_RESET';
@@ -119,6 +121,29 @@ export function cancelReplyCompose() {
   };
 }
 
+export function quoteCompose(status, routerHistory) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const instance = state.get('instance');
+    const { explicitAddressing } = getFeatures(instance);
+
+    dispatch({
+      type: COMPOSE_QUOTE,
+      status: status,
+      account: state.getIn(['accounts', state.get('me')]),
+      explicitAddressing,
+    });
+
+    dispatch(openModal('COMPOSE'));
+  };
+}
+
+export function cancelQuoteCompose() {
+  return {
+    type: COMPOSE_QUOTE_CANCEL,
+  };
+}
+
 export function resetCompose() {
   return {
     type: COMPOSE_RESET,
@@ -226,6 +251,7 @@ export function submitCompose(routerHistory, force = false) {
     const params = {
       status,
       in_reply_to_id: state.getIn(['compose', 'in_reply_to'], null),
+      quote_id: state.getIn(['compose', 'quote'], null),
       media_ids: media.map(item => item.get('id')),
       sensitive: state.getIn(['compose', 'sensitive']),
       spoiler_text: state.getIn(['compose', 'spoiler_text'], ''),

app/soapbox/components/modal_root.js

@@ -18,6 +18,7 @@ const checkComposeContent = compose => {
     compose.get('spoiler_text').length > 0,
     compose.get('media_attachments').size > 0,
     compose.get('in_reply_to') !== null,
+    compose.get('quote') !== null,
     compose.get('poll') !== null,
   ].some(check => check === true);
 };

app/soapbox/components/status.js

@@ -10,7 +10,7 @@ import { Link, NavLink } from 'react-router-dom';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import Icon from 'soapbox/components/icon';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
-import QuotedStatus from 'soapbox/features/status/components/quoted_status';
+import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
 import { getDomain } from 'soapbox/utils/accounts';
 
 import Card from '../features/status/components/card';
@@ -71,6 +71,7 @@ class Status extends ImmutablePureComponent {
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
+    onQuote: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onChat: PropTypes.func,

app/soapbox/components/status_action_bar.js

@@ -78,6 +78,7 @@ class StatusActionBar extends ImmutablePureComponent {
     onFavourite: PropTypes.func,
     onBookmark: PropTypes.func,
     onReblog: PropTypes.func,
+    onQuote: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onChat: PropTypes.func,
@@ -203,6 +204,15 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
+  handleQuoteClick = () => {
+    const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
+    if (me) {
+      onQuote(status, this.context.router.history);
+    } else {
+      onOpenUnauthorizedModal('REBLOG');
+    }
+  }
+
   handleDeleteClick = () => {
     this.props.onDelete(this.props.status, this.context.router.history);
   }
@@ -557,6 +567,9 @@ class StatusActionBar extends ImmutablePureComponent {
           <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={reblogIcon} onClick={this.handleReblogClick} />
           {reblogCount !== 0 && <span className='detailed-status__link' type='button' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</span>}
         </div>
+        <div className='status__action-bar__counter'>
+          <IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={require('@tabler/icons/icons/quote.svg')} onClick={this.handleQuoteClick} />
+        </div>
         <div
           className='status__action-bar__counter status__action-bar__counter--favourite'
           onMouseEnter={this.handleLikeButtonHover}

app/soapbox/containers/status_container.js

@@ -12,6 +12,7 @@ import {
   replyCompose,
   mentionCompose,
   directCompose,
+  quoteCompose,
 } from '../actions/compose';
 import {
   createRemovedAccount,
@@ -108,6 +109,21 @@ const mapDispatchToProps = (dispatch, { intl }) => {
       });
     },
 
+    onQuote(status, router) {
+      dispatch((_, getState) => {
+        const 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(quoteCompose(status, router)),
+          }));
+        } else {
+          dispatch(quoteCompose(status, router));
+        }
+      });
+    },
+
     onFavourite(status) {
       if (status.get('favourited')) {
         dispatch(unfavourite(status));

app/soapbox/features/compose/components/compose_form.js

@@ -21,6 +21,7 @@ import MarkdownButtonContainer from '../containers/markdown_button_container';
 import PollButtonContainer from '../containers/poll_button_container';
 import PollFormContainer from '../containers/poll_form_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
+import QuotedStatusContainer from '../containers/quoted_status_container';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 import ReplyMentions from '../containers/reply_mentions_container';
 import ScheduleButtonContainer from '../containers/schedule_button_container';
@@ -361,6 +362,8 @@ export default class ComposeForm extends ImmutablePureComponent {
           }
         </AutosuggestTextarea>
 
+        <QuotedStatusContainer />
+
         <div className='compose-form__buttons-wrapper'>
           <div className='compose-form__buttons'>
             <UploadButtonContainer />

app/soapbox/features/compose/containers/quoted_status_container.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+
+import QuotedStatus from 'soapbox/features/status/components/quoted_status';
+import { makeGetStatus } from 'soapbox/selectors';
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = state => ({
+    status: getStatus(state, { id: state.getIn(['compose', 'quote']) }),
+  });
+
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps)(QuotedStatus);

app/soapbox/features/status/components/detailed_status.js

@@ -9,7 +9,7 @@ import { Link, NavLink } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import Icon from 'soapbox/components/icon';
-import QuotedStatus from 'soapbox/features/status/components/quoted_status';
+import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
 import { getDomain } from 'soapbox/utils/accounts';
 
 import Avatar from '../../../components/avatar';

app/soapbox/features/status/components/quoted_status.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 
 import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
@@ -11,20 +10,8 @@ import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
 import { isRtl } from 'soapbox/rtl';
-import { makeGetStatus } from 'soapbox/selectors';
 
-const makeMapStateToProps = () => {
+export default @injectIntl
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = (state, props) => ({
-    status: getStatus(state, { id: props.statusId }),
-  });
-
-  return mapStateToProps;
-};
-
-export default @connect(makeMapStateToProps)
-@injectIntl
 class QuotedStatus extends ImmutablePureComponent {
 
   static contextTypes = {

app/soapbox/features/status/containers/quoted_status_container.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+
+import { makeGetStatus } from 'soapbox/selectors';
+
+import QuotedStatus from '../components/quoted_status';
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = (state, props) => ({
+    status: getStatus(state, { id: props.statusId }),
+  });
+
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps)(QuotedStatus);

app/soapbox/features/status/index.js

@@ -28,6 +28,7 @@ import {
   replyCompose,
   mentionCompose,
   directCompose,
+  quoteCompose,
 } from '../../actions/compose';
 import { simpleEmojiReact } from '../../actions/emoji_reacts';
 import {
@@ -258,6 +259,19 @@ class Status extends ImmutablePureComponent {
     });
   }
 
+  handleQuoteClick = (status, e) => {
+    const { askReplyConfirmation, dispatch, intl } = this.props;
+    if (askReplyConfirmation) {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.replyMessage),
+        confirm: intl.formatMessage(messages.replyConfirm),
+        onConfirm: () => dispatch(quoteCompose(status, this.context.router.history)),
+      }));
+    } else {
+      dispatch(quoteCompose(status, this.context.router.history));
+    }
+  }
+
   handleDeleteClick = (status, history, withRedraft = false) => {
     const { dispatch, intl } = this.props;
 
@@ -681,6 +695,7 @@ class Status extends ImmutablePureComponent {
                     onFavourite={this.handleFavouriteClick}
                     onEmojiReact={this.handleEmojiReactClick}
                     onReblog={this.handleReblogClick}
+                    onQuote={this.handleQuoteClick}
                     onDelete={this.handleDeleteClick}
                     onDirect={this.handleDirectClick}
                     onChat={this.handleChatClick}

app/soapbox/features/ui/components/compose_modal.js

@@ -23,6 +23,7 @@ const mapStateToProps = state => {
     composeText: state.getIn(['compose', 'text']),
     privacy: state.getIn(['compose', 'privacy']),
     inReplyTo: state.getIn(['compose', 'in_reply_to']),
+    quote: state.getIn(['compose', 'quote']),
   };
 };
 
@@ -35,6 +36,7 @@ class ComposeModal extends ImmutablePureComponent {
     composeText: PropTypes.string,
     privacy: PropTypes.string,
     inReplyTo: PropTypes.string,
+    quote: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
   };
 
@@ -56,12 +58,14 @@ class ComposeModal extends ImmutablePureComponent {
   };
 
   renderTitle = () => {
-    const { privacy, inReplyTo } = this.props;
+    const { privacy, inReplyTo, quote } = this.props;
 
     if (privacy === 'direct') {
       return <FormattedMessage id='navigation_bar.compose_direct' defaultMessage='Direct message' />;
     } else if (inReplyTo) {
       return <FormattedMessage id='navigation_bar.compose_reply' defaultMessage='Reply to post' />;
+    } else if (quote) {
+      return <FormattedMessage id='navigation_bar.compose_quote' defaultMessage='Quote post' />;
     } else {
       return <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />;
     }

app/soapbox/reducers/compose.js

@@ -8,6 +8,8 @@ import {
   COMPOSE_CHANGE,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
+  COMPOSE_QUOTE,
+  COMPOSE_QUOTE_CANCEL,
   COMPOSE_DIRECT,
   COMPOSE_MENTION,
   COMPOSE_SUBMIT_REQUEST,
@@ -65,6 +67,7 @@ const initialState = ImmutableMap({
   focusDate: null,
   caretPosition: null,
   in_reply_to: null,
+  quote: null,
   is_composing: false,
   is_submitting: false,
   is_changing_upload: false,
@@ -128,6 +131,7 @@ function clearAll(state) {
     map.set('is_submitting', false);
     map.set('is_changing_upload', false);
     map.set('in_reply_to', null);
+    map.set('quote', null);
     map.set('privacy', state.get('default_privacy'));
     map.set('sensitive', false);
     map.set('media_attachments', ImmutableList());
@@ -332,6 +336,25 @@ export default function compose(state = initialState, action) {
       map.set('idempotencyKey', uuid());
       map.set('content_type', state.get('default_content_type'));
 
+      if (action.status.get('spoiler_text', '').length > 0) {
+        map.set('spoiler', true);
+        map.set('spoiler_text', action.status.get('spoiler_text'));
+      } else {
+        map.set('spoiler', false);
+        map.set('spoiler_text', '');
+      }
+    });
+  case COMPOSE_QUOTE:
+    return state.withMutations(map => {
+      map.set('quote', action.status.get('id'));
+      map.set('to', action.explicitAddressing ? statusToMentionsArray(state, action.status, action.account) : undefined);
+      map.set('text', !action.explicitAddressing ? statusToTextMentions(state, action.status, action.account) : '');
+      map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
+      map.set('focusDate', new Date());
+      map.set('caretPosition', null);
+      map.set('idempotencyKey', uuid());
+      map.set('content_type', state.get('default_content_type'));
+
       if (action.status.get('spoiler_text', '').length > 0) {
         map.set('spoiler', true);
         map.set('spoiler_text', action.status.get('spoiler_text'));
@@ -345,6 +368,7 @@ export default function compose(state = initialState, action) {
   case COMPOSE_UPLOAD_CHANGE_REQUEST:
     return state.set('is_changing_upload', true);
   case COMPOSE_REPLY_CANCEL:
+  case COMPOSE_QUOTE_CANCEL:
   case COMPOSE_RESET:
   case COMPOSE_SUBMIT_SUCCESS:
     return clearAll(state);
@@ -390,6 +414,8 @@ export default function compose(state = initialState, action) {
   case TIMELINE_DELETE:
     if (action.id === state.get('in_reply_to')) {
       return state.set('in_reply_to', null);
+    } if (action.id === state.get('quote')) {
+      return state.set('quote', null);
     } else {
       return state;
     }

app/soapbox/reducers/search.js

@@ -4,6 +4,7 @@ import {
   COMPOSE_MENTION,
   COMPOSE_REPLY,
   COMPOSE_DIRECT,
+  COMPOSE_QUOTE,
 } from '../actions/compose';
 import {
   SEARCH_CHANGE,
@@ -78,6 +79,7 @@ export default function search(state = initialState, action) {
   case COMPOSE_REPLY:
   case COMPOSE_MENTION:
   case COMPOSE_DIRECT:
+  case COMPOSE_QUOTE:
     return state.set('hidden', true);
   case SEARCH_FETCH_REQUEST:
     return handleSubmitted(state, action.value);

app/styles/components/reply-mentions.scss

@@ -16,7 +16,8 @@
 }
 
 .status__wrapper,
-.detailed-status {
+.detailed-status,
+.quoted-status {
   .reply-mentions {
     display: block;
     margin: 4px 0 0 0;