mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-22 10:38:07 +01:00
[Glitch] Feat: Implement interaction modal for Polls
Port dc0b1948be
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
f624ef2778
commit
9a5dcf0add
5 changed files with 30 additions and 5 deletions
|
@ -41,12 +41,14 @@ const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
|
||||||
class Poll extends ImmutablePureComponent {
|
class Poll extends ImmutablePureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
identity: identityContextPropShape,
|
identity: identityContextPropShape,
|
||||||
poll: ImmutablePropTypes.map,
|
poll: ImmutablePropTypes.map.isRequired,
|
||||||
|
status: ImmutablePropTypes.map.isRequired,
|
||||||
lang: PropTypes.string,
|
lang: PropTypes.string,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
refresh: PropTypes.func,
|
refresh: PropTypes.func,
|
||||||
onVote: PropTypes.func,
|
onVote: PropTypes.func,
|
||||||
|
onInteractionModal: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -117,7 +119,11 @@ class Poll extends ImmutablePureComponent {
|
||||||
return;
|
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 = () => {
|
handleRefresh = () => {
|
||||||
|
@ -232,7 +238,7 @@ class Poll extends ImmutablePureComponent {
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div className='poll__footer'>
|
<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 && <><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> · </>}
|
{showResults && !this.props.disabled && <><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </>}
|
||||||
{votesCount}
|
{votesCount}
|
||||||
|
|
|
@ -742,7 +742,7 @@ class Status extends ImmutablePureComponent {
|
||||||
|
|
||||||
if (status.get('poll')) {
|
if (status.get('poll')) {
|
||||||
const language = status.getIn(['translation', 'language']) || status.get('language');
|
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');
|
contentMediaIcons.push('tasks');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
|
import { openModal } from 'flavours/glitch/actions/modal';
|
||||||
import { fetchPoll, vote } from 'flavours/glitch/actions/polls';
|
import { fetchPoll, vote } from 'flavours/glitch/actions/polls';
|
||||||
import Poll from 'flavours/glitch/components/poll';
|
import Poll from 'flavours/glitch/components/poll';
|
||||||
|
|
||||||
|
@ -17,6 +18,17 @@ const mapDispatchToProps = (dispatch, { pollId }) => ({
|
||||||
onVote (choices) {
|
onVote (choices) {
|
||||||
dispatch(vote(pollId, 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 }) => ({
|
const mapStateToProps = (state, { pollId }) => ({
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { throttle, escapeRegExp } from 'lodash';
|
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 PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
|
||||||
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
|
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
|
||||||
import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
|
import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
|
||||||
|
@ -340,7 +341,7 @@ class InteractionModal extends React.PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
displayNameHtml: PropTypes.string,
|
displayNameHtml: PropTypes.string,
|
||||||
url: PropTypes.string,
|
url: PropTypes.string,
|
||||||
type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
|
type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow', 'vote']),
|
||||||
onSignupClick: PropTypes.func.isRequired,
|
onSignupClick: PropTypes.func.isRequired,
|
||||||
signupUrl: PropTypes.string.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 }} />;
|
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 }} />;
|
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;
|
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;
|
let signupButton;
|
||||||
|
|
|
@ -289,6 +289,7 @@ export const DetailedStatus: React.FC<{
|
||||||
<PollContainer
|
<PollContainer
|
||||||
pollId={status.get('poll')}
|
pollId={status.get('poll')}
|
||||||
// @ts-expect-error -- Poll/PollContainer is not typed yet
|
// @ts-expect-error -- Poll/PollContainer is not typed yet
|
||||||
|
status={status}
|
||||||
lang={status.get('language')}
|
lang={status.get('language')}
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue