[Glitch] Add UI for revoking quote posts

Port 55a98580aa to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/actions/interactions_typed.ts

@@ -1,4 +1,8 @@
-import { apiReblog, apiUnreblog } from 'flavours/glitch/api/interactions';
+import {
+  apiReblog,
+  apiUnreblog,
+  apiRevokeQuote,
+} from 'flavours/glitch/api/interactions';
 import type { StatusVisibility } from 'flavours/glitch/models/status';
 import { createDataLoadingThunk } from 'flavours/glitch/store/typed_functions';
 
@@ -33,3 +37,19 @@ export const unreblog = createDataLoadingThunk(
     return discardLoadData;
   },
 );
+
+export const revokeQuote = createDataLoadingThunk(
+  'status/revoke_quote',
+  ({
+    statusId,
+    quotedStatusId,
+  }: {
+    statusId: string;
+    quotedStatusId: string;
+  }) => apiRevokeQuote(quotedStatusId, statusId),
+  (data, { dispatch, discardLoadData }) => {
+    dispatch(importFetchedStatus(data));
+
+    return discardLoadData;
+  },
+);

app/javascript/flavours/glitch/api/interactions.ts

@@ -8,3 +8,8 @@ export const apiReblog = (statusId: string, visibility: StatusVisibility) =>
 
 export const apiUnreblog = (statusId: string) =>
   apiRequestPost<Status>(`v1/statuses/${statusId}/unreblog`);
+
+export const apiRevokeQuote = (quotedStatusId: string, statusId: string) =>
+  apiRequestPost<Status>(
+    `v1/statuses/${quotedStatusId}/quotes/${statusId}/revoke`,
+  );

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
@@ -67,16 +68,26 @@ const messages = defineMessages({
   edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
   filter: { id: 'status.filter', defaultMessage: 'Filter this post' },
   openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
+  revokeQuote: { id: 'status.revoke_quote', defaultMessage: 'Remove my post from @{name}’s post' },
 });
 
+const mapStateToProps = (state, { status }) => {
+  const quotedStatusId = status.getIn(['quote', 'quoted_status']);
+  return ({
+    quotedAccountId: quotedStatusId ? state.getIn(['statuses', quotedStatusId, 'account']) : null,
+  });
+};
+
 class StatusActionBar extends ImmutablePureComponent {
   static propTypes = {
     identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
+    quotedAccountId: ImmutablePropTypes.string,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
     onDelete: PropTypes.func,
+    onRevokeQuote: PropTypes.func,
     onDirect: PropTypes.func,
     onMention: PropTypes.func,
     onMute: PropTypes.func,
@@ -101,6 +112,7 @@ class StatusActionBar extends ImmutablePureComponent {
   // evaluate to false. See react-immutable-pure-component for usage.
   updateOnProps = [
     'status',
+    'quotedAccountId',
     'showReplyCount',
     'withCounters',
     'withDismiss',
@@ -119,6 +131,8 @@ class StatusActionBar extends ImmutablePureComponent {
   handleShareClick = () => {
     navigator.share({
       url: this.props.status.get('url'),
+    }).catch((e) => {
+      if (e.name !== 'AbortError') console.error(e);
     });
   };
 
@@ -174,6 +188,10 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onMute(this.props.status.get('account'));
   };
 
+  handleRevokeQuoteClick = () => {
+    this.props.onRevokeQuote(this.props.status);
+  }
+
   handleBlockClick = () => {
     this.props.onBlock(this.props.status);
   };
@@ -194,6 +212,10 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onMuteConversation(this.props.status);
   };
 
+  handleFilterClick = () => {
+    this.props.onAddFilter(this.props.status);
+  };
+
   handleCopy = () => {
     const url = this.props.status.get('url');
     navigator.clipboard.writeText(url);
@@ -203,25 +225,18 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onFilter();
   };
 
-  handleFilterClick = () => {
-    this.props.onAddFilter(this.props.status);
-  };
-
   render () {
-    const { status, intl, withDismiss, withCounters, showReplyCount, scrollKey } = this.props;
+    const { status, quotedAccountId, intl, withDismiss, withCounters, showReplyCount, scrollKey } = this.props;
-    const { permissions, signedIn } = this.props.identity;
+    const { signedIn, permissions } = this.props.identity;
 
-    const mutingConversation = status.get('muted');
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
     const pinnableStatus     = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
+    const mutingConversation = status.get('muted');
     const writtenByMe        = status.getIn(['account', 'id']) === me;
     const isRemote           = status.getIn(['account', 'username']) !== status.getIn(['account', 'acct']);
 
     let menu = [];
     let reblogIcon = 'retweet';
-    let replyIcon;
-    let replyIconComponent;
-    let replyTitle;
 
     menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
 
@@ -266,6 +281,10 @@ class StatusActionBar extends ImmutablePureComponent {
           menu.push(null);
         }
 
+        if (quotedAccountId === me) {
+          menu.push({ text: intl.formatMessage(messages.revokeQuote, { name: status.getIn(['account', 'username']) }), action: this.handleRevokeQuoteClick, dangerous: true });
+        }
+
         menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick, dangerous: true });
         menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick, dangerous: true });
         menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport, dangerous: true });
@@ -288,6 +307,10 @@ class StatusActionBar extends ImmutablePureComponent {
       }
     }
 
+    let replyIcon;
+    let replyIconComponent;
+    let replyTitle;
+
     if (status.get('in_reply_to_id', null) === null) {
       replyIcon = 'reply';
       replyIconComponent = ReplyIcon;
@@ -373,4 +396,4 @@ class StatusActionBar extends ImmutablePureComponent {
 
 }
 
-export default withRouter(withIdentity(injectIntl(StatusActionBar)));
+export default withRouter(withIdentity(connect(mapStateToProps)(injectIntl(StatusActionBar))));

app/javascript/flavours/glitch/containers/status_container.js

@@ -119,6 +119,10 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({
     }
   },
 
+  onRevokeQuote (status) {
+    dispatch(openModal({ modalType: 'CONFIRM_REVOKE_QUOTE', modalProps: { statusId: status.get('id'), quotedStatusId: status.getIn(['quote', 'quoted_status']) }}));
+  },
+
   onEdit (status) {
     dispatch((_, getState) => {
       let state = getState();

app/javascript/flavours/glitch/features/status/components/action_bar.jsx

@@ -6,6 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
@@ -57,17 +58,27 @@ const messages = defineMessages({
   admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
   openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
+  revokeQuote: { id: 'status.revoke_quote', defaultMessage: 'Remove my post from @{name}’s post' },
 });
 
+const mapStateToProps = (state, { status }) => {
+  const quotedStatusId = status.getIn(['quote', 'quoted_status']);
+  return ({
+    quotedAccountId: quotedStatusId ? state.getIn(['statuses', quotedStatusId, 'account']) : null,
+  });
+};
+
 class ActionBar extends PureComponent {
   static propTypes = {
     identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
+    quotedAccountId: ImmutablePropTypes.string,
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
+    onRevokeQuote: PropTypes.func,
     onEdit: PropTypes.func.isRequired,
     onDirect: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
@@ -100,6 +111,10 @@ class ActionBar extends PureComponent {
     this.props.onDelete(this.props.status);
   };
 
+  handleRevokeQuoteClick = () => {
+    this.props.onRevokeQuote(this.props.status);
+  }
+
   handleRedraftClick = () => {
     this.props.onDelete(this.props.status, true);
   };
@@ -152,7 +167,7 @@ class ActionBar extends PureComponent {
   };
 
   render () {
-    const { status, intl } = this.props;
+    const { status, quotedAccountId, intl } = this.props;
     const { signedIn, permissions } = this.props.identity;
 
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -195,6 +210,11 @@ class ActionBar extends PureComponent {
         menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
         menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
         menu.push(null);
+
+        if (quotedAccountId === me) {
+          menu.push({ text: intl.formatMessage(messages.revokeQuote, { name: status.getIn(['account', 'username']) }), action: this.handleRevokeQuoteClick, dangerous: true });
+        }
+
         menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick, dangerous: true });
         menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick, dangerous: true });
         menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport, dangerous: true });
@@ -231,9 +251,6 @@ class ActionBar extends PureComponent {
 
     let reblogTitle, reblogIconComponent;
 
-    const bookmarkTitle = intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark);
-    const favouriteTitle = intl.formatMessage(status.get('favourited') ? messages.removeFavourite : messages.favourite);
-
     if (status.get('reblogged')) {
       reblogTitle = intl.formatMessage(messages.cancel_reblog_private);
       reblogIconComponent = publicStatus ? RepeatActiveIcon : RepeatPrivateActiveIcon;
@@ -248,6 +265,9 @@ class ActionBar extends PureComponent {
       reblogIconComponent = RepeatDisabledIcon;
     }
 
+    const bookmarkTitle = intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark);
+    const favouriteTitle = intl.formatMessage(status.get('favourited') ? messages.removeFavourite : messages.favourite);
+
     return (
       <div className='detailed-status__action-bar'>
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={replyIcon} iconComponent={replyIconComponent} onClick={this.handleReplyClick} /></div>
@@ -264,4 +284,4 @@ class ActionBar extends PureComponent {
 
 }
 
-export default withIdentity(injectIntl(ActionBar));
+export default connect(mapStateToProps)(withIdentity(injectIntl(ActionBar)));

app/javascript/flavours/glitch/features/status/index.jsx

@@ -289,6 +289,12 @@ class Status extends ImmutablePureComponent {
     }
   };
 
+  handleRevokeQuoteClick = (status) => {
+    const { dispatch } = this.props;
+
+    dispatch(openModal({ modalType: 'CONFIRM_REVOKE_QUOTE', modalProps: { statusId: status.get('id'), quotedStatusId: status.getIn(['quote', 'quoted_status']) }}));
+  };
+
   handleEditClick = (status) => {
     const { dispatch, askReplyConfirmation } = this.props;
 
@@ -668,6 +674,7 @@ class Status extends ImmutablePureComponent {
                   onReblog={this.handleReblogClick}
                   onBookmark={this.handleBookmarkClick}
                   onDelete={this.handleDeleteClick}
+                  onRevokeQuote={this.handleRevokeQuoteClick}
                   onEdit={this.handleEditClick}
                   onDirect={this.handleDirectClick}
                   onMention={this.handleMentionClick}

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts

@@ -10,3 +10,4 @@ export { ConfirmClearNotificationsModal } from './clear_notifications';
 export { ConfirmLogOutModal } from './log_out';
 export { ConfirmFollowToListModal } from './follow_to_list';
 export { ConfirmMissingAltTextModal } from './missing_alt_text';
+export { ConfirmRevokeQuoteModal } from './revoke_quote';

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/revoke_quote.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { revokeQuote } from 'flavours/glitch/actions/interactions_typed';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  revokeQuoteTitle: {
+    id: 'confirmations.revoke_quote.title',
+    defaultMessage: 'Remove post?',
+  },
+  revokeQuoteMessage: {
+    id: 'confirmations.revoke_quote.message',
+    defaultMessage: 'This action cannot be undone.',
+  },
+  revokeQuoteConfirm: {
+    id: 'confirmations.revoke_quote.confirm',
+    defaultMessage: 'Remove post',
+  },
+});
+
+export const ConfirmRevokeQuoteModal: React.FC<
+  {
+    statusId: string;
+    quotedStatusId: string;
+  } & BaseConfirmationModalProps
+> = ({ statusId, quotedStatusId, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    void dispatch(revokeQuote({ quotedStatusId, statusId }));
+  }, [dispatch, statusId, quotedStatusId]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.revokeQuoteTitle)}
+      message={intl.formatMessage(messages.revokeQuoteMessage)}
+      confirm={intl.formatMessage(messages.revokeQuoteConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -38,6 +38,7 @@ import {
   ConfirmLogOutModal,
   ConfirmFollowToListModal,
   ConfirmMissingAltTextModal,
+  ConfirmRevokeQuoteModal,
 } from './confirmation_modals';
 import DeprecatedSettingsModal from './deprecated_settings_modal';
 import DoodleModal from './doodle_modal';
@@ -65,6 +66,7 @@ export const MODAL_COMPONENTS = {
   'CONFIRM_LOG_OUT': () => Promise.resolve({ default: ConfirmLogOutModal }),
   'CONFIRM_FOLLOW_TO_LIST': () => Promise.resolve({ default: ConfirmFollowToListModal }),
   'CONFIRM_MISSING_ALT_TEXT': () => Promise.resolve({ default: ConfirmMissingAltTextModal }),
+  'CONFIRM_REVOKE_QUOTE': () => Promise.resolve({ default: ConfirmRevokeQuoteModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
   'DOMAIN_BLOCK': DomainBlockModal,