Merge branch 'next-polls' into 'next'

Next: Polls functional components

See merge request soapbox-pub/soapbox-fe!1156

app/soapbox/components/poll.tsx

@@ -1,18 +1,19 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import { defineMessages, injectIntl, FormattedMessage, IntlShape } from 'react-intl';
 import { spring } from 'react-motion';
+import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
 import { vote, fetchPoll } from 'soapbox/actions/polls';
 import Icon from 'soapbox/components/icon';
-import { Text } from 'soapbox/components/ui';
+import { Text, Button, Stack, HStack } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional_motion';
+import { useAppSelector } from 'soapbox/hooks';
 
 import RelativeTimestamp from './relative_timestamp';
 
-import type { Poll as PollEntity, PollOption } from 'soapbox/types/entities';
+import type { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   closed: { id: 'poll.closed', defaultMessage: 'Closed' },
@@ -20,172 +21,239 @@ const messages = defineMessages({
   votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
 });
 
+const PollPercentageBar: React.FC<{percent: number, leading: boolean}> = ({ percent, leading }): JSX.Element => {
+  return (
+    <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
+      {({ width }) =>(
+        <span
+          className={classNames('absolute inset-0 h-full inline-block rounded bg-gray-300 dark:bg-slate-900', {
+            'bg-primary-300 dark:bg-primary-400': leading,
+          })}
+          style={{ width: `${width}%` }}
+        />
+      )}
+    </Motion>
+  );
+};
+
+interface IPollOptionText extends IPollOption {
+  percent: number,
+}
+
+const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, percent, showResults, onToggle }) => {
+  const intl = useIntl();
+  const voted = poll.own_votes?.includes(index);
+  const message = intl.formatMessage(messages.votes, { votes: option.votes_count });
+
+  const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => {
+    onToggle(index);
+  };
+
+  const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      onToggle(index);
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <label
+      className={classNames('relative', { 'cursor-pointer': !showResults })}
+      title={showResults ? message : undefined}
+    >
+      <input
+        className='hidden'
+        name='vote-options'
+        type={poll.multiple ? 'checkbox' : 'radio'}
+        value={index}
+        checked={active}
+        onChange={handleOptionChange}
+      />
+
+      <HStack alignItems='center' className='p-1'>
+        {!showResults && (
+          <span
+            className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
+              'bg-primary-600': active,
+              'rounded': poll.multiple,
+            })}
+            tabIndex={0}
+            role={poll.multiple ? 'checkbox' : 'radio'}
+            onKeyPress={handleOptionKeyPress}
+            aria-checked={active}
+            aria-label={option.title}
+          />
+        )}
+
+        {showResults && (
+          <HStack space={2} alignItems='center' className='mr-2.5'>
+            {voted ? (
+              <Icon src={require('@tabler/icons/icons/check.svg')} title={intl.formatMessage(messages.voted)} />
+            ) : (
+              <div className='svg-icon' />
+            )}
+            <span className='font-bold'>{Math.round(percent)}%</span>
+          </HStack>
+        )}
+
+        <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+      </HStack>
+    </label>
+  );
+};
+
+interface IPollOption {
+  poll: PollEntity,
+  option: PollOptionEntity,
+  index: number,
+  showResults?: boolean,
+  active: boolean,
+  onToggle: (value: number) => void,
+}
+
+const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
+  const { poll, option, showResults } = props;
+  if (!poll) return null;
+
+  const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
+  const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
+
+  return (
+    <div className='relative mb-2.5' key={option.title}>
+      {showResults && (
+        <PollPercentageBar percent={percent} leading={leading} />
+      )}
+
+      <PollOptionText percent={percent} {...props} />
+    </div>
+  );
+};
+
+const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
+  const dispatch = useDispatch();
+
+  const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
+    dispatch(fetchPoll(poll.id));
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <span>
+      <button className='underline' onClick={handleRefresh}>
+        <Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
+      </button>
+    </span>
+  );
+};
+
+const VoteButton: React.FC<{poll: PollEntity, selected: Selected}> = ({ poll, selected }): JSX.Element => {
+  const dispatch = useDispatch();
+  const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
+
+  return (
+    <Button onClick={handleVote} theme='ghost'>
+      <FormattedMessage id='poll.vote' defaultMessage='Vote' />
+    </Button>
+  );
+};
+
+interface IPollFooter {
+  poll: PollEntity,
+  showResults: boolean,
+  selected: Selected,
+}
+
+const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
+  const intl = useIntl();
+  const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
+
+  return (
+    <Stack space={2}>
+      {!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
+      <Text>
+        {showResults && (
+          <><RefreshButton poll={poll} /> · </>
+        )}
+        <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />
+        {poll.expires_at && <span> · {timeRemaining}</span>}
+      </Text>
+    </Stack>
+  );
+};
+
+type Selected = Record<number, boolean>;
+
 interface IPoll {
-  poll?: PollEntity,
+  id: string,
-  intl: IntlShape,
-  dispatch?: Function,
-  disabled?: boolean,
-  me?: string | null | false | undefined,
   status?: string,
 }
 
-interface IPollState {
+const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
-  selected: Record<string, boolean>,
+  const dispatch = useDispatch();
-}
 
-class Poll extends ImmutablePureComponent<IPoll, IPollState> {
+  const me = useAppSelector((state) => state.me);
+  const poll = useAppSelector((state) => state.polls.get(id));
 
-  state = {
+  const [selected, setSelected] = useState({} as Selected);
-    selected: {} as Record<string, boolean>,
+
+  const openUnauthorizedModal = () => {
+    dispatch(openModal('UNAUTHORIZED', {
+      action: 'POLL_VOTE',
+      ap_id: status,
+    }));
   };
 
-  _toggleOption = (value: string) => {
+  const toggleOption = (value: number) => {
-    const { me, poll } = this.props;
-
     if (me) {
       if (poll?.multiple) {
-        const tmp = { ...this.state.selected };
+        const tmp = { ...selected };
         if (tmp[value]) {
           delete tmp[value];
         } else {
           tmp[value] = true;
         }
-        this.setState({ selected: tmp });
+        setSelected(tmp);
       } else {
-        const tmp: Record<string, boolean> = {};
+        const tmp: Selected = {};
         tmp[value] = true;
-        this.setState({ selected: tmp });
+        setSelected(tmp);
       }
     } else {
-      this.openUnauthorizedModal();
+      openUnauthorizedModal();
     }
-  }
-
-  handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    this._toggleOption(e.currentTarget.value);
   };
 
-  handleOptionKeyPress = (e: React.KeyboardEvent): void => {
+  if (!poll) return null;
-    if (e.key === 'Enter' || e.key === ' ') {
-      const dataIndex = e.currentTarget.getAttribute('data-index');
 
-      if (dataIndex) {
+  const showResults = poll.voted || poll.expired;
-        this._toggleOption(dataIndex);
-      }
 
-      e.stopPropagation();
+  return (
-      e.preventDefault();
+    <div onClick={e => e.stopPropagation()}>
-    }
+      <Stack className={classNames('my-2', { voted: poll.voted })}>
-  }
+        <Stack>
-
+          {poll.options.map((option, i) => (
-  handleVote = () => {
+            <PollOption
-    const { disabled, dispatch, poll } = this.props;
+              key={i}
-    if (disabled || !dispatch || !poll) return;
+              poll={poll}
-    dispatch(vote(poll.id, Object.keys(this.state.selected)));
+              option={option}
-  };
+              index={i}
-
+              showResults={showResults}
-  openUnauthorizedModal = () => {
+              active={!!selected[i]}
-    const { dispatch, status } = this.props;
+              onToggle={toggleOption}
-    if (!dispatch) return;
-    dispatch(openModal('UNAUTHORIZED', {
-      action: 'POLL_VOTE',
-      ap_id: status,
-    }));
-  }
-
-  handleRefresh = () => {
-    const { disabled, dispatch, poll } = this.props;
-    if (disabled || !poll || !dispatch) return;
-    dispatch(fetchPoll(poll.id));
-  };
-
-  renderOption(option: PollOption, optionIndex: number, showResults: boolean): JSX.Element | null {
-    const { poll, disabled, intl } = this.props;
-    if (!poll) return null;
-
-    const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
-    const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
-    const active  = !!this.state.selected[`${optionIndex}`];
-    const voted   = poll.own_votes?.includes(optionIndex);
-    const titleEmojified = option.title_emojified;
-
-    return (
-      <li key={option.get('title')}>
-        {showResults && (
-          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
-            {({ width }) =>
-              <span className={classNames('poll__chart bg-gray-300 dark:bg-slate-900', { 'bg-primary-300 dark:bg-primary-400': leading })} style={{ width: `${width}%` }} />
-            }
-          </Motion>
-        )}
-
-        <label className={classNames('poll__text', { selectable: !showResults })}>
-          <input
-            name='vote-options'
-            type={poll.multiple ? 'checkbox' : 'radio'}
-            value={optionIndex}
-            checked={active}
-            onChange={this.handleOptionChange}
-            disabled={disabled}
-          />
-
-          {!showResults && (
-            <span
-              className={classNames('poll__input', { checkbox: poll.multiple, active })}
-              tabIndex={0}
-              role={poll.multiple ? 'checkbox' : 'radio'}
-              onKeyPress={this.handleOptionKeyPress}
-              aria-checked={active}
-              aria-label={option.title}
-              data-index={optionIndex}
             />
-          )}
+          ))}
-          {showResults && (
+        </Stack>
-            <span className='poll__number' title={intl.formatMessage(messages.votes, { votes: option.votes_count })}>
-              {!!voted && <Icon src={require('@tabler/icons/icons/check.svg')} className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
-              {Math.round(percent)}%
-            </span>
-          )}
 
-          <span dangerouslySetInnerHTML={{ __html: titleEmojified }} />
+        <PollFooter
-        </label>
+          poll={poll}
-      </li>
+          showResults={showResults}
-    );
+          selected={selected}
-  }
+        />
+      </Stack>
+    </div>
+  );
+};
 
-  render() {
+export default Poll;
-    const { poll, intl } = this.props;
-
-    if (!poll) {
-      return null;
-    }
-
-    const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
-    const showResults   = poll.voted || poll.expired;
-    const disabled      = this.props.disabled || Object.entries(this.state.selected).every(item => !item);
-
-    return (
-      <div className={classNames('poll', { voted: poll.voted })}>
-        <ul>
-          {poll.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>}
-          <Text>
-            {showResults && !this.props.disabled && (
-              <span><button className='poll__link' onClick={this.handleRefresh}>
-                <Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
-              </button> · </span>
-            )}
-            <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />
-            {poll.expires_at && <span> · {timeRemaining}</span>}
-          </Text>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(Poll);

app/soapbox/components/status_content.js

@@ -8,7 +8,7 @@ import { withRouter } from 'react-router-dom';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import Icon from 'soapbox/components/icon';
-import PollContainer from 'soapbox/containers/poll_container';
+import Poll from 'soapbox/components/poll';
 import { addGreentext } from 'soapbox/utils/greentext';
 import { onlyEmoji } from 'soapbox/utils/rich_content';
 
@@ -244,7 +244,7 @@ class StatusContent extends React.PureComponent {
 
           <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} lang={status.get('language')} />
 
-          {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} status={status.get('url')} />}
+          {!hidden && !!status.get('poll') && <Poll id={status.get('poll')} status={status.get('url')} />}
         </div>
       );
     } else if (this.props.onClick) {
@@ -267,7 +267,7 @@ class StatusContent extends React.PureComponent {
       }
 
       if (status.get('poll')) {
-        output.push(<PollContainer pollId={status.get('poll')} key='poll' status={status.get('url')} />);
+        output.push(<Poll id={status.get('poll')} key='poll' status={status.get('url')} />);
       }
 
       return output;
@@ -287,7 +287,7 @@ class StatusContent extends React.PureComponent {
       ];
 
       if (status.get('poll')) {
-        output.push(<PollContainer pollId={status.get('poll')} key='poll' status={status.get('url')} />);
+        output.push(<Poll id={status.get('poll')} key='poll' status={status.get('url')} />);
       }
 
       return output;

app/soapbox/containers/poll_container.ts

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-
-import Poll from 'soapbox/components/poll';
-
-import type { RootState } from 'soapbox/store';
-
-interface IPollContainer {
-  pollId: string,
-}
-
-const mapStateToProps = (state: RootState, { pollId }: IPollContainer) => ({
-  poll: state.polls.get(pollId),
-  me: state.me,
-});
-
-
-export default connect(mapStateToProps)(Poll);

app/styles/application.scss

@@ -19,7 +19,6 @@
 @import 'boost';
 @import 'loading';
 @import 'ui';
-@import 'polls';
 // @import 'introduction';
 @import 'emoji_picker';
 @import 'about';

app/styles/polls.scss

@@ -1,254 +0,0 @@
-.poll {
-  margin-top: 16px;
-  font-size: 14px;
-
-  li {
-    margin-bottom: 10px;
-    position: relative;
-  }
-
-  &__chart {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    display: inline-block;
-    border-radius: 4px;
-    background: hsla(var(--primary-text-color_hsl), 0.1);
-    &.leading { background: hsla(var(--primary-text-color_hsl), 0.15); }
-  }
-
-  &__text {
-    position: relative;
-    display: flex;
-    padding: 6px 0;
-    line-height: 18px;
-    cursor: default;
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    color: var(--primary-text-color--faint);
-
-    input[type=radio],
-    input[type=checkbox] {
-      display: none;
-    }
-
-    > span:last-child {
-      flex: 1;
-    }
-
-    .autossugest-input {
-      flex: 1 1 auto;
-    }
-
-    input[type=text] {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: 14px;
-      color: var(--primary-text-color);
-      outline: 0;
-      font-family: inherit;
-      background: var(--foreground-color);
-      border: 1px solid var(--foreground-color);
-      border-radius: 4px;
-      padding: 6px 10px;
-
-      &:focus {
-        border-color: var(--highlight-text-color);
-      }
-    }
-
-    &.selectable {
-      cursor: pointer;
-    }
-
-    &.editable {
-      display: flex;
-      align-items: center;
-      overflow: visible;
-
-      .autosuggest-input {
-        width: 100%;
-      }
-    }
-  }
-
-  &__input {
-    display: inline-block;
-    position: relative;
-    border: 1px solid var(--brand-color);
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    flex: 0 0 auto;
-    margin-right: 10px;
-    top: -1px;
-    border-radius: 50%;
-    vertical-align: middle;
-
-    &.checkbox {
-      border-radius: 4px;
-    }
-
-    &.active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
-    }
-
-    &:active,
-    &:focus,
-    &:hover {
-      border-width: 4px;
-      background: none;
-    }
-
-    &::-moz-focus-inner {
-      outline: 0 !important;
-      border: 0;
-    }
-
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-  }
-
-  &__number {
-    display: inline-block;
-    width: 36px;
-    font-weight: 700;
-    padding: 0 10px;
-    text-align: right;
-  }
-
-  &.voted &__number {
-    width: 52px;
-    padding-left: 8px;
-    flex: 0 0 52px;
-  }
-
-  &__vote__mark {
-    float: left;
-    color: var(--highlight-text-color);
-    line-height: 18px;
-  }
-
-  &__footer {
-    padding-top: 6px;
-    padding-bottom: 5px;
-    color: var(--primary-text-color);
-  }
-
-  &__link {
-    display: inline;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    color: var(--primary-text-color);
-    text-decoration: underline;
-    font-size: inherit;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:active,
-    &:focus {
-      background-color: hsla(var(--primary-text-color_hsl), 0.1);
-    }
-  }
-
-  .button {
-    height: 36px;
-    padding: 0 16px;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-
-  &__cancel {
-    height: 20px;
-
-    .svg-icon {
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
-
-.compose-form__poll-wrapper {
-  border-top: 1px solid var(--foreground-color);
-
-  ul {
-    padding: 10px;
-  }
-
-  .poll__footer {
-    border-top: 1px solid var(--foreground-color);
-    padding: 10px;
-    margin: -5px 0 0 -5px;
-
-    button,
-    select {
-      flex: 1 1 50%;
-      margin: 5px 0 0 5px;
-    }
-  }
-
-  .button.button-secondary {
-    font-size: 14px;
-    font-weight: 400;
-    padding: 6px 10px;
-    height: auto;
-    line-height: inherit;
-    color: var(--brand-color);
-    border-color: var(--brand-color);
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    .poll__text {
-      flex: 0 0 auto;
-      width: calc(100% - (23px + 6px));
-      margin-right: 6px;
-    }
-  }
-
-  select {
-    box-sizing: border-box;
-    font-size: 14px;
-    color: var(--brand-color);
-    display: inline-block;
-    width: auto;
-    outline: 0;
-    font-family: inherit;
-    background-color: var(--foreground-color);
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: auto 16px;
-    border: 1px solid var(--brand-color);
-    border-radius: 4px;
-    padding: 6px 10px;
-    padding-right: 30px;
-  }
-
-  .icon-button.disabled {
-    color: var(--brand-color);
-  }
-}
-
-.muted .poll {
-  color: var(--primary-text-color);
-
-  &__chart {
-    background: hsla(var(--brand-color_hsl), 0.2);
-
-    &.leading {
-      background: hsla(var(--brand-color_hsl), 0.2);
-    }
-  }
-}