[Glitch] Feat: Implement interaction modal for Polls

Port dc0b1948be to glitch-soc

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

app/javascript/flavours/glitch/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;
     }
 
+    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/flavours/glitch/components/status.jsx

@@ -742,7 +742,7 @@ class Status extends ImmutablePureComponent {
 
     if (status.get('poll')) {
       const language = status.getIn(['translation', 'language']) || status.get('language');
-      contentMedia.push(<PollContainer pollId={status.get('poll')} lang={language} />);
+      contentMedia.push(<PollContainer pollId={status.get('poll')} status={status} lang={language} />);
       contentMediaIcons.push('tasks');
     }
 

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

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
+import { openModal } from 'flavours/glitch/actions/modal';
 import { fetchPoll, vote } from 'flavours/glitch/actions/polls';
 import Poll from 'flavours/glitch/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/flavours/glitch/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/flavours/glitch/features/status/components/detailed_status.tsx

@@ -289,6 +289,7 @@ export const DetailedStatus: React.FC<{
       <PollContainer
         pollId={status.get('poll')}
         // @ts-expect-error -- Poll/PollContainer is not typed yet
+        status={status}
         lang={status.get('language')}
       />,
     );