From 9a5dcf0addd358e708e1e147008893e75cd67329 Mon Sep 17 00:00:00 2001
From: Emelia Smith <ThisIsMissEm@users.noreply.github.com>
Date: Mon, 28 Oct 2024 14:27:37 +0100
Subject: [PATCH] [Glitch] Feat: Implement interaction modal for Polls

Port dc0b1948beea5eed657bc32a3a7deaab0d41c693 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/poll.jsx   | 12 +++++++++---
 app/javascript/flavours/glitch/components/status.jsx |  2 +-
 .../flavours/glitch/containers/poll_container.js     | 12 ++++++++++++
 .../glitch/features/interaction_modal/index.jsx      |  8 +++++++-
 .../features/status/components/detailed_status.tsx   |  1 +
 5 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/poll.jsx b/app/javascript/flavours/glitch/components/poll.jsx
index a4fb4b62d1..76fd93f14e 100644
--- a/app/javascript/flavours/glitch/components/poll.jsx
+++ b/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;
     }
 
-    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}
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index db3e8d77ed..bbf947a459 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/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');
     }
 
diff --git a/app/javascript/flavours/glitch/containers/poll_container.js b/app/javascript/flavours/glitch/containers/poll_container.js
index e25dd06148..710bed45c5 100644
--- a/app/javascript/flavours/glitch/containers/poll_container.js
+++ b/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 }) => ({
diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
index 23244f06ca..5f514124bf 100644
--- a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
+++ b/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;
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
index d1d955395f..7a7c98156b 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
+++ b/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')}
       />,
     );