OpenSource/mastodon
OpenSource/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-22 17:35:40 +01:00
Code Issues Projects Releases Packages Wiki Activity

Convert <Poll> to Typescript

Browse source
This commit is contained in:
Renaud Chaput 2024-04-02 16:18:14 +02:00
parent f721e76d13
commit e79f016d33
No known key found for this signature in database
GPG key ID: BCFC859D49B46990
5 changed files with 336 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/mastodon/api_types/polls.ts
View file

@ -13,7 +13,7 @@ export interface ApiPollJSON {
expired: boolean;
multiple: boolean;
votes_count: number;
voters_count: number;
voters_count: null | number;
options: ApiPollOptionJSON[];
emojis: ApiCustomEmojiJSON[];

248
app/javascript/mastodon/components/poll.jsx
View file

@ -1,248 +0,0 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import escapeTextContentForBrowser from 'escape-html';
import spring from 'react-motion/lib/spring';
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
import { Icon } from 'mastodon/components/icon';
import emojify from 'mastodon/features/emoji/emoji';
import Motion from 'mastodon/features/ui/util/optional_motion';
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
import { RelativeTimestamp } from './relative_timestamp';
const messages = defineMessages({
closed: {
id: 'poll.closed',
defaultMessage: 'Closed',
},
voted: {
id: 'poll.voted',
defaultMessage: 'You voted for this answer',
},
votes: {
id: 'poll.votes',
defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
},
});
class Poll extends ImmutablePureComponent {
static propTypes = {
identity: identityContextPropShape,
poll: ImmutablePropTypes.record.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 = {
selected: {},
expired: null,
};
static getDerivedStateFromProps (props, state) {
const { poll } = props;
const expires_at = poll.get('expires_at');
const expired = poll.get('expired') || expires_at !== null && (new Date(expires_at)).getTime() < Date.now();
return (expired === state.expired) ? null : { expired };
}
componentDidMount () {
this._setupTimer();
}
componentDidUpdate () {
this._setupTimer();
}
componentWillUnmount () {
clearTimeout(this._timer);
}
_setupTimer () {
const { poll } = this.props;
clearTimeout(this._timer);
if (!this.state.expired) {
const delay = (new Date(poll.get('expires_at'))).getTime() - Date.now();
this._timer = setTimeout(() => {
this.setState({ expired: true });
}, delay);
}
}
_toggleOption = value => {
if (this.props.poll.get('multiple')) {
const tmp = { ...this.state.selected };
if (tmp[value]) {
delete tmp[value];
} else {
tmp[value] = true;
}
this.setState({ selected: tmp });
} else {
const tmp = {};
tmp[value] = true;
this.setState({ selected: tmp });
}
};
handleOptionChange = ({ target: { value } }) => {
this._toggleOption(value);
};
handleOptionKeyPress = (e) => {
if (e.key === 'Enter' || e.key === ' ') {
this._toggleOption(e.target.getAttribute('data-index'));
e.stopPropagation();
e.preventDefault();
}
};
handleVote = () => {
if (this.props.disabled) {
return;
}
if (this.props.identity.signedIn) {
this.props.onVote(Object.keys(this.state.selected));
} else {
this.props.onInteractionModal('vote', this.props.status);
}
};
handleRefresh = () => {
if (this.props.disabled) {
return;
}
this.props.refresh();
};
handleReveal = () => {
this.setState({ revealed: true });
};
renderOption (option, optionIndex, showResults) {
const { poll, lang, disabled, intl } = this.props;
const pollVotesCount = poll.get('voters_count') || poll.get('votes_count');
const percent = pollVotesCount === 0 ? 0 : (option.get('votes_count') / pollVotesCount) * 100;
const leading = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') >= other.get('votes_count'));
const active = !!this.state.selected[`${optionIndex}`];
const voted = option.get('voted') || (poll.get('own_votes') && poll.get('own_votes').includes(optionIndex));
const title = option.getIn(['translation', 'title']) || option.get('title');
let titleHtml = option.getIn(['translation', 'titleHtml']) || option.get('titleHtml');
if (!titleHtml) {
const emojiMap = emojiMap(poll);
titleHtml = emojify(escapeTextContentForBrowser(title), emojiMap);
}
return (
<li key={option.get('title')}>
<label className={classNames('poll__option', { selectable: !showResults })}>
<input
name='vote-options'
type={poll.get('multiple') ? 'checkbox' : 'radio'}
value={optionIndex}
checked={active}
onChange={this.handleOptionChange}
disabled={disabled}
/>
{!showResults && (
<span
className={classNames('poll__input', { checkbox: poll.get('multiple'), active })}
tabIndex={0}
role={poll.get('multiple') ? 'checkbox' : 'radio'}
onKeyPress={this.handleOptionKeyPress}
aria-checked={active}
aria-label={title}
lang={lang}
data-index={optionIndex}
/>
)}
{showResults && (
<span
className='poll__number'
title={intl.formatMessage(messages.votes, {
votes: option.get('votes_count'),
})}
>
{Math.round(percent)}%
</span>
)}
<span
className='poll__option__text translate'
lang={lang}
dangerouslySetInnerHTML={{ __html: titleHtml }}
/>
{!!voted && <span className='poll__voted'>
<Icon id='check' icon={CheckIcon} className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
</span>}
</label>
{showResults && (
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
{({ width }) =>
<span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} />
}
</Motion>
)}
</li>
);
}
render () {
const { poll, intl } = this.props;
const { revealed, expired } = this.state;
if (!poll) {
return null;
}
const timeRemaining = expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.get('expires_at')} futureDate />;
const showResults = poll.get('voted') || revealed || expired;
const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item);
let votesCount = null;
if (poll.get('voters_count') !== null && poll.get('voters_count') !== undefined) {
votesCount = <FormattedMessage id='poll.total_people' defaultMessage='{count, plural, one {# person} other {# people}}' values={{ count: poll.get('voters_count') }} />;
} else {
votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.get('votes_count') }} />;
}
return (
<div className='poll'>
<ul>
{poll.get('options').map((option, i) => this.renderOption(option, i, showResults))}
</ul>
<div className='poll__footer'>
{!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}
{poll.get('expires_at') && <> · {timeRemaining}</>}
</div>
</div>
);
}
}
export default injectIntl(withIdentity(Poll));

333
app/javascript/mastodon/components/poll.tsx Normal file
View file

@ -0,0 +1,333 @@
import { useCallback, useEffect, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import { spring } from 'react-motion';
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
import { Icon } from 'mastodon/components/icon';
import Motion from 'mastodon/features/ui/util/optional_motion';
import { useIdentity } from 'mastodon/identity_context';
import type {
Poll as PollModel,
PollOption as PollOptionModel,
} from 'mastodon/models/poll';
import type { Status } from 'mastodon/models/status';
import { RelativeTimestamp } from './relative_timestamp';
const messages = defineMessages({
closed: {
id: 'poll.closed',
defaultMessage: 'Closed',
},
voted: {
id: 'poll.voted',
defaultMessage: 'You voted for this answer',
},
votes: {
id: 'poll.votes',
defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
},
});
export const PollOption: React.FC<{
option: PollOptionModel;
optionIndex: number;
showResults: boolean;
percent: number;
voted: boolean;
leading: boolean;
multiple: boolean;
lang: string;
disabled: boolean;
active: boolean;
toggleOption: () => void;
}> = ({
option,
optionIndex,
percent,
leading,
voted,
multiple,
showResults,
lang,
disabled,
active,
toggleOption,
}) => {
const intl = useIntl();
const title = option.translation?.title ?? option.title;
const titleHtml = option.translation?.titleHtml ?? option.titleHtml;
const handleOptionKeyPress = useCallback<
React.KeyboardEventHandler<HTMLElement>
>(
(e) => {
if (e.key === 'Enter' || e.key === ' ') {
toggleOption();
e.stopPropagation();
e.preventDefault();
}
},
[toggleOption],
);
return (
<li key={option.title}>
<label
className={classNames('poll__option', { selectable: !showResults })}
>
<input
name='vote-options'
type={multiple ? 'checkbox' : 'radio'}
value={optionIndex}
checked={active}
onChange={toggleOption}
disabled={disabled}
/>
{showResults ? (
<span
className='poll__number'
title={intl.formatMessage(messages.votes, {
votes: option.votes_count,
})}
>
{Math.round(percent)}%
</span>
) : (
<span
className={classNames('poll__input', {
checkbox: multiple,
active,
})}
tabIndex={0}
role={multiple ? 'checkbox' : 'radio'}
onKeyPress={handleOptionKeyPress}
aria-checked={active}
aria-label={title}
lang={lang}
/>
)}
<span
className='poll__option__text translate'
lang={lang}
dangerouslySetInnerHTML={{ __html: titleHtml }}
/>
{!!voted && (
<span className='poll__voted'>
<Icon
id='check'
icon={CheckIcon}
className='poll__voted__mark'
title={intl.formatMessage(messages.voted)}
/>
</span>
)}
</label>
{showResults && (
<Motion
defaultStyle={{ width: 0 }}
style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}
>
{({ width }) => (
<span
className={classNames('poll__chart', { leading })}
style={{ width: `${width}%` }}
/>
)}
</Motion>
)}
</li>
);
};
export const Poll: React.FC<{
poll: PollModel;
status: Status;
lang: string;
disabled?: boolean;
refresh?: () => void;
onVote: (votes: string[]) => void;
onInteractionModal: (interactionType: string, status: Status) => void;
}> = ({
poll,
lang,
disabled,
refresh,
onVote,
onInteractionModal,
status,
}) => {
const intl = useIntl();
const expires_at = poll.expires_at;
const [expired, setExpired] = useState(
poll.expired ||
(!!expires_at && new Date(expires_at).getTime() < Date.now()),
);
const [revealed, setRevealed] = useState(false);
const handleReveal = useCallback(() => {
setRevealed(true);
}, []);
const [selected, setSelected] = useState<Set<string>>(new Set());
const toggleOption = useCallback(
(option: string) => {
setSelected((prev) => {
const next = new Set(prev);
if (poll.multiple) {
if (next.has(option)) next.delete(option);
else next.add(option);
} else {
next.add(option);
}
return next;
});
},
[poll.multiple],
);
const makeToggleOption = (option: string) => () => {
toggleOption(option);
};
const { signedIn } = useIdentity();
const handleRefresh = useCallback(() => {
if (disabled) {
return;
}
refresh?.();
}, [refresh, disabled]);
const handleVote = useCallback(() => {
if (disabled) {
return;
}
if (signedIn) {
onVote(Array.from(selected));
} else {
onInteractionModal('vote', status);
}
onVote(Array.from(selected));
}, [disabled, onVote, selected, signedIn, onInteractionModal, status]);
useEffect(() => {
if (expired || !expires_at) return () => undefined;
const delay = new Date(expires_at).getTime() - Date.now();
const timer = setTimeout(() => {
setExpired(true);
}, delay);
return () => {
clearTimeout(timer);
};
}, [expired, expires_at]);
const timeRemaining =
expired || !expires_at ? (
intl.formatMessage(messages.closed)
) : (
<RelativeTimestamp timestamp={expires_at} futureDate />
);
const showResults = poll.voted || revealed || expired;
let votesCount = null;
if (poll.voters_count) {
votesCount = (
<FormattedMessage
id='poll.total_people'
defaultMessage='{count, plural, one {# person} other {# people}}'
values={{ count: poll.voters_count }}
/>
);
} else {
votesCount = (
<FormattedMessage
id='poll.total_votes'
defaultMessage='{count, plural, one {# vote} other {# votes}}'
values={{ count: poll.votes_count }}
/>
);
}
return (
<div className='poll'>
<ul>
{poll.options.map((option, i) => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want `votes_count` if `voters_count` is 0
const pollVotesCount = poll.voters_count || poll.votes_count;
const percent =
pollVotesCount === 0
? 0
: (option.votes_count / pollVotesCount) * 100;
return (
<PollOption
option={option}
optionIndex={i}
key={option.title}
active={selected.has(option.title)}
showResults={showResults}
lang={lang}
toggleOption={makeToggleOption(option.title)}
multiple={poll.multiple}
voted={option.voted || poll.own_votes?.includes(i) || false}
leading={poll.options
.filterNot((other) => other.title === option.title)
.every((other) => option.votes_count >= other.votes_count)}
percent={percent}
disabled={disabled || selected.size === 0}
/>
);
})}
</ul>
<div className='poll__footer'>
{!showResults && (
<button
className='button button-secondary'
disabled={disabled}
onClick={handleVote}
>
<FormattedMessage id='poll.vote' defaultMessage='Vote' />
</button>
)}
{!showResults && (
<>
<button className='poll__link' onClick={handleReveal}>
<FormattedMessage id='poll.reveal' defaultMessage='See results' />
</button>{' '}
·{' '}
</>
)}
{showResults && !disabled && (
<>
<button className='poll__link' onClick={handleRefresh}>
<FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
</button>{' '}
·{' '}
</>
)}
{votesCount}
{poll.expires_at && <> · {timeRemaining}</>}
</div>
</div>
);
};

2
app/javascript/mastodon/features/ui/util/optional_motion.js
View file

@ -1,4 +1,4 @@
import Motion from 'react-motion/lib/Motion';
import { Motion } from 'react-motion';
import { reduceMotion } from '../../../initial_state';

2
app/javascript/mastodon/features/ui/util/reduced_motion.jsx
View file

@ -3,7 +3,7 @@
import PropTypes from 'prop-types';
import { Component } from 'react';
import Motion from 'react-motion/lib/Motion';
import { Motion } from 'react-motion';
const stylesToKeep = ['opacity', 'backgroundOpacity'];