Feat: Implement interaction modal for Polls (#32609)

app/javascript/mastodon/components/poll.jsx

@@ -41,12 +41,14 @@ const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
 class Poll extends ImmutablePureComponent {
   static propTypes = {
     identity: identityContextPropShape,
-    poll: ImmutablePropTypes.map,
+    poll: ImmutablePropTypes.map.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
     lang: PropTypes.string,
     intl: PropTypes.object.isRequired,
     disabled: PropTypes.bool,
     refresh: PropTypes.func,
     onVote: PropTypes.func,
+    onInteractionModal: PropTypes.func,
   };
 
   state = {
@@ -117,7 +119,11 @@ class Poll extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onVote(Object.keys(this.state.selected));
+    if (this.props.identity.signedIn) {
+      this.props.onVote(Object.keys(this.state.selected));
+    } else {
+      this.props.onInteractionModal('vote', this.props.status);
+    }
   };
 
   handleRefresh = () => {
@@ -232,7 +238,7 @@ class Poll extends ImmutablePureComponent {
         </ul>
 
         <div className='poll__footer'>
-          {!showResults && <button className='button button-secondary' disabled={disabled || !this.props.identity.signedIn} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
+          {!showResults && <button className='button button-secondary' disabled={disabled} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
           {!showResults && <><button className='poll__link' onClick={this.handleReveal}><FormattedMessage id='poll.reveal' defaultMessage='See results' /></button> · </>}
           {showResults && !this.props.disabled && <><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </>}
           {votesCount}

app/javascript/mastodon/components/status_content.jsx

@@ -245,7 +245,7 @@ class StatusContent extends PureComponent {
     );
 
     const poll = !!status.get('poll') && (
-      <PollContainer pollId={status.get('poll')} lang={language} />
+      <PollContainer pollId={status.get('poll')} status={status} lang={language} />
     );
 
     if (this.props.onClick) {

app/javascript/mastodon/containers/poll_container.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
+import { openModal } from 'mastodon/actions/modal';
 import { fetchPoll, vote } from 'mastodon/actions/polls';
 import Poll from 'mastodon/components/poll';
 
@@ -17,6 +18,17 @@ const mapDispatchToProps = (dispatch, { pollId }) => ({
   onVote (choices) {
     dispatch(vote(pollId, choices));
   },
+
+  onInteractionModal (type, status) {
+    dispatch(openModal({
+      modalType: 'INTERACTION',
+      modalProps: {
+        type,
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('uri'),
+      },
+    }));
+  }
 });
 
 const mapStateToProps = (state, { pollId }) => ({

app/javascript/mastodon/features/interaction_modal/index.jsx

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 
 import { throttle, escapeRegExp } from 'lodash';
 
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
@@ -340,7 +341,7 @@ class InteractionModal extends React.PureComponent {
   static propTypes = {
     displayNameHtml: PropTypes.string,
     url: PropTypes.string,
-    type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
+    type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow', 'vote']),
     onSignupClick: PropTypes.func.isRequired,
     signupUrl: PropTypes.string.isRequired,
   };
@@ -377,6 +378,11 @@ class InteractionModal extends React.PureComponent {
       title = <FormattedMessage id='interaction_modal.title.follow' defaultMessage='Follow {name}' values={{ name }} />;
       actionDescription = <FormattedMessage id='interaction_modal.description.follow' defaultMessage='With an account on Mastodon, you can follow {name} to receive their posts in your home feed.' values={{ name }} />;
       break;
+    case 'vote':
+      icon = <Icon id='tasks' icon={InsertChartIcon} />;
+      title = <FormattedMessage id='interaction_modal.title.vote' defaultMessage="Vote in {name}'s poll" values={{ name }} />;
+      actionDescription = <FormattedMessage id='interaction_modal.description.vote' defaultMessage='With an account on Mastodon, you can vote in this poll.' />;
+      break;
     }
 
     let signupButton;

app/javascript/mastodon/locales/en.json

@@ -386,6 +386,7 @@
   "interaction_modal.description.follow": "With an account on Mastodon, you can follow {name} to receive their posts in your home feed.",
   "interaction_modal.description.reblog": "With an account on Mastodon, you can boost this post to share it with your own followers.",
   "interaction_modal.description.reply": "With an account on Mastodon, you can respond to this post.",
+  "interaction_modal.description.vote": "With an account on Mastodon, you can vote in this poll.",
   "interaction_modal.login.action": "Take me home",
   "interaction_modal.login.prompt": "Domain of your home server, e.g. mastodon.social",
   "interaction_modal.no_account_yet": "Not on Mastodon?",
@@ -397,6 +398,7 @@
   "interaction_modal.title.follow": "Follow {name}",
   "interaction_modal.title.reblog": "Boost {name}'s post",
   "interaction_modal.title.reply": "Reply to {name}'s post",
+  "interaction_modal.title.vote": "Vote in {name}'s poll",
   "intervals.full.days": "{number, plural, one {# day} other {# days}}",
   "intervals.full.hours": "{number, plural, one {# hour} other {# hours}}",
   "intervals.full.minutes": "{number, plural, one {# minute} other {# minutes}}",