Feat: Implement interaction modal for Polls (#32609)
parent
0426cb78f7
commit
dc0b1948be
|
@ -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}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 }) => ({
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}}",
|
||||
|
|
Loading…
Reference in New Issue