app/javascript/mastodon/components/poll.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import ImmutablePureComponent from 'react-immutable-pure-component';
   5 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
   6 import classNames from 'classnames';
   7 import { vote } from 'mastodon/actions/polls';
   8 import Motion from 'mastodon/features/ui/util/optional_motion';
   9 import spring from 'react-motion/lib/spring';
  10 import escapeTextContentForBrowser from 'escape-html';
  11 import emojify from 'mastodon/features/emoji/emoji';
  12 import RelativeTimestamp from './relative_timestamp';
  13 import Icon from 'mastodon/components/icon';
  14
  15 const messages = defineMessages({
  16   closed: { id: 'poll.closed', defaultMessage: 'Closed' },
  17   voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer', description: 'Tooltip of the "voted" checkmark in polls' },
  18 });
  19
  20 const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
  21   obj[`:${emoji.get('shortcode')}:`] = emoji.toJS();
  22   return obj;
  23 }, {});
  24
  25 export default @injectIntl
  26 class Poll extends ImmutablePureComponent {
  27
  28   static propTypes = {
  29     poll: ImmutablePropTypes.map,
  30     intl: PropTypes.object.isRequired,
  31     dispatch: PropTypes.func,
  32     disabled: PropTypes.bool,
  33     refresh: PropTypes.func,
  34   };
  35
  36   state = {
  37     selected: {},
  38     expired: null,
  39   };
  40
  41   static getDerivedStateFromProps (props, state) {
  42     const { poll, intl } = props;
  43     const expires_at = poll.get('expires_at');
  44     const expired = poll.get('expired') || expires_at !== null && (new Date(expires_at)).getTime() < intl.now();
  45     return (expired === state.expired) ? null : { expired };
  46   }
  47
  48   componentDidMount () {
  49     this._setupTimer();
  50   }
  51
  52   componentDidUpdate () {
  53     this._setupTimer();
  54   }
  55
  56   componentWillUnmount () {
  57     clearTimeout(this._timer);
  58   }
  59
  60   _setupTimer () {
  61     const { poll, intl } = this.props;
  62     clearTimeout(this._timer);
  63     if (!this.state.expired) {
  64       const delay = (new Date(poll.get('expires_at'))).getTime() - intl.now();
  65       this._timer = setTimeout(() => {
  66         this.setState({ expired: true });
  67       }, delay);
  68     }
  69   }
  70
  71   _toggleOption = value => {
  72     if (this.props.poll.get('multiple')) {
  73       const tmp = { ...this.state.selected };
  74       if (tmp[value]) {
  75         delete tmp[value];
  76       } else {
  77         tmp[value] = true;
  78       }
  79       this.setState({ selected: tmp });
  80     } else {
  81       const tmp = {};
  82       tmp[value] = true;
  83       this.setState({ selected: tmp });
  84     }
  85   }
  86
  87   handleOptionChange = ({ target: { value } }) => {
  88     this._toggleOption(value);
  89   };
  90
  91   handleOptionKeyPress = (e) => {
  92     if (e.key === 'Enter' || e.key === ' ') {
  93       this._toggleOption(e.target.getAttribute('data-index'));
  94       e.stopPropagation();
  95       e.preventDefault();
  96     }
  97   }
  98
  99   handleVote = () => {
 100     if (this.props.disabled) {
 101       return;
 102     }
 103
 104     this.props.dispatch(vote(this.props.poll.get('id'), Object.keys(this.state.selected)));
 105   };
 106
 107   handleRefresh = () => {
 108     if (this.props.disabled) {
 109       return;
 110     }
 111
 112     this.props.refresh();
 113   };
 114
 115   renderOption (option, optionIndex, showResults) {
 116     const { poll, disabled, intl } = this.props;
 117     const pollVotesCount  = poll.get('voters_count') || poll.get('votes_count');
 118     const percent         = pollVotesCount === 0 ? 0 : (option.get('votes_count') / pollVotesCount) * 100;
 119     const leading         = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') >= other.get('votes_count'));
 120     const active          = !!this.state.selected[`${optionIndex}`];
 121     const voted           = option.get('voted') || (poll.get('own_votes') && poll.get('own_votes').includes(optionIndex));
 122
 123     let titleEmojified = option.get('title_emojified');
 124     if (!titleEmojified) {
 125       const emojiMap = makeEmojiMap(poll);
 126       titleEmojified = emojify(escapeTextContentForBrowser(option.get('title')), emojiMap);
 127     }
 128
 129     return (
 130       <li key={option.get('title')}>
 131         <label className={classNames('poll__option', { selectable: !showResults })}>
 132           <input
 133             name='vote-options'
 134             type={poll.get('multiple') ? 'checkbox' : 'radio'}
 135             value={optionIndex}
 136             checked={active}
 137             onChange={this.handleOptionChange}
 138             disabled={disabled}
 139           />
 140
 141           {!showResults && (
 142             <span
 143               className={classNames('poll__input', { checkbox: poll.get('multiple'), active })}
 144               tabIndex='0'
 145               role={poll.get('multiple') ? 'checkbox' : 'radio'}
 146               onKeyPress={this.handleOptionKeyPress}
 147               aria-checked={active}
 148               aria-label={option.get('title')}
 149               data-index={optionIndex}
 150             />
 151           )}
 152           {showResults && <span className='poll__number'>
 153             {Math.round(percent)}%
 154           </span>}
 155
 156           <span
 157             className='poll__option__text'
 158             dangerouslySetInnerHTML={{ __html: titleEmojified }}
 159           />
 160
 161           {!!voted && <span className='poll__voted'>
 162             <Icon id='check' className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
 163           </span>}
 164         </label>
 165
 166         {showResults && (
 167           <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
 168             {({ width }) =>
 169               <span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} />
 170             }
 171           </Motion>
 172         )}
 173       </li>
 174     );
 175   }
 176
 177   render () {
 178     const { poll, intl } = this.props;
 179     const { expired } = this.state;
 180
 181     if (!poll) {
 182       return null;
 183     }
 184
 185     const timeRemaining = expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.get('expires_at')} futureDate />;
 186     const showResults   = poll.get('voted') || expired;
 187     const disabled      = this.props.disabled || Object.entries(this.state.selected).every(item => !item);
 188
 189     let votesCount = null;
 190
 191     if (poll.get('voters_count') !== null && poll.get('voters_count') !== undefined) {
 192       votesCount = <FormattedMessage id='poll.total_people' defaultMessage='{count, plural, one {# person} other {# people}}' values={{ count: poll.get('voters_count') }} />;
 193     } else {
 194       votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.get('votes_count') }} />;
 195     }
 196
 197     return (
 198       <div className='poll'>
 199         <ul>
 200           {poll.get('options').map((option, i) => this.renderOption(option, i, showResults))}
 201         </ul>
 202
 203         <div className='poll__footer'>
 204           {!showResults && <button className='button button-secondary' disabled={disabled} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
 205           {showResults && !this.props.disabled && <span><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </span>}
 206           {votesCount}
 207           {poll.get('expires_at') && <span> · {timeRemaining}</span>}
 208         </div>
 209       </div>
 210     );
 211   }
 212
 213 }