From b124705bfd9c7422eff6cbca73cd734f0ab9781a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 15 Jun 2022 15:59:17 -0400
Subject: [PATCH] Refactor polls

---
 app/soapbox/components/poll.tsx              | 290 -------------------
 app/soapbox/components/polls/poll-footer.tsx |  79 +++++
 app/soapbox/components/polls/poll-option.tsx | 157 ++++++++++
 app/soapbox/components/polls/poll.tsx        |  89 ++++++
 app/soapbox/components/status_content.tsx    |   3 +-
 5 files changed, 327 insertions(+), 291 deletions(-)
 delete mode 100644 app/soapbox/components/poll.tsx
 create mode 100644 app/soapbox/components/polls/poll-footer.tsx
 create mode 100644 app/soapbox/components/polls/poll-option.tsx
 create mode 100644 app/soapbox/components/polls/poll.tsx

diff --git a/app/soapbox/components/poll.tsx b/app/soapbox/components/poll.tsx
deleted file mode 100644
index e8742ab5f..000000000
--- a/app/soapbox/components/poll.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-import classNames from 'classnames';
-import React, { useState } from 'react';
-import { defineMessages, useIntl, FormattedMessage } 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 { Text, Button, Icon, 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 as PollOptionEntity } from 'soapbox/types/entities';
-
-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}}' },
-});
-
-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 flex rounded-full border border-solid bg-white p-2 hover:bg-primary-50': true,
-        'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
-        'border-primary-300': !active,
-        'cursor-pointer': !showResults,
-      })}
-      title={showResults ? message : undefined}
-    >
-      <input
-        className='hidden'
-        name='vote-options'
-        type={poll.multiple ? 'checkbox' : 'radio'}
-        value={index}
-        checked={active}
-        onChange={handleOptionChange}
-      />
-
-      <div className='grid items-center w-full'>
-        <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
-          <Text
-            theme='primary'
-            weight='semibold'
-            dangerouslySetInnerHTML={{ __html: option.title_emojified }}
-          />
-        </div>
-
-        <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
-          {showResults ? (
-            <HStack space={2} alignItems='center' className='mr-2.5'>
-              {voted ? (
-                <Icon src={require('@tabler/icons/icons/check.svg')} alt={intl.formatMessage(messages.voted)} />
-              ) : (
-                <div className='svg-icon' />
-              )}
-              <span className='font-bold'>{Math.round(percent)}%</span>
-            </HStack>
-          ) : (
-            <span
-              className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
-                'bg-primary-600 border-primary-600': active,
-                'border-primary-300 bg-white': !active,
-              })}
-              tabIndex={0}
-              role={poll.multiple ? 'checkbox' : 'radio'}
-              onKeyPress={handleOptionKeyPress}
-              aria-checked={active}
-              aria-label={option.title}
-            >
-              {active && (
-                <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
-              )}
-            </span>
-          )}
-        </div>
-      </div>
-    </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' 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='primary' block>
-      <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 weight='medium' timestamp={poll.expires_at} futureDate />;
-
-  return (
-    <Stack space={4}>
-      {!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
-
-      <HStack space={1.5} alignItems='center'>
-        {showResults && (
-          <>
-            <RefreshButton poll={poll} />
-            <Text theme='muted'>&middot;</Text>
-          </>
-        )}
-
-        <Text theme='muted' weight='medium'>
-          <FormattedMessage
-            id='poll.total_votes'
-            defaultMessage='{count, plural, one {# vote} other {# votes}}'
-            values={{ count: poll.votes_count }}
-          />
-        </Text>
-
-        {poll.expires_at && (
-          <>
-            <Text theme='muted'>&middot;</Text>
-            <Text weight='medium' theme='muted'>{timeRemaining}</Text>
-          </>
-        )}
-      </HStack>
-    </Stack>
-  );
-};
-
-type Selected = Record<number, boolean>;
-
-interface IPoll {
-  id: string,
-  status?: string,
-}
-
-const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
-  const dispatch = useDispatch();
-
-  const me = useAppSelector((state) => state.me);
-  const poll = useAppSelector((state) => state.polls.get(id));
-
-  const [selected, setSelected] = useState({} as Selected);
-
-  const openUnauthorizedModal = () => {
-    dispatch(openModal('UNAUTHORIZED', {
-      action: 'POLL_VOTE',
-      ap_id: status,
-    }));
-  };
-
-  const toggleOption = (value: number) => {
-    if (me) {
-      if (poll?.multiple) {
-        const tmp = { ...selected };
-        if (tmp[value]) {
-          delete tmp[value];
-        } else {
-          tmp[value] = true;
-        }
-        setSelected(tmp);
-      } else {
-        const tmp: Selected = {};
-        tmp[value] = true;
-        setSelected(tmp);
-      }
-    } else {
-      openUnauthorizedModal();
-    }
-  };
-
-  if (!poll) return null;
-
-  const showResults = poll.voted || poll.expired;
-
-  return (
-    <div onClick={e => e.stopPropagation()}>
-      <Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
-        <Stack space={2}>
-          {poll.options.map((option, i) => (
-            <PollOption
-              key={i}
-              poll={poll}
-              option={option}
-              index={i}
-              showResults={showResults}
-              active={!!selected[i]}
-              onToggle={toggleOption}
-            />
-          ))}
-        </Stack>
-
-        <PollFooter
-          poll={poll}
-          showResults={showResults}
-          selected={selected}
-        />
-      </Stack>
-    </div>
-  );
-};
-
-export default Poll;
diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx
new file mode 100644
index 000000000..386d25180
--- /dev/null
+++ b/app/soapbox/components/polls/poll-footer.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { fetchPoll, vote } from 'soapbox/actions/polls';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import RelativeTimestamp from '../relative_timestamp';
+import { Button, HStack, Stack, Text } from '../ui';
+
+import type { Selected } from './poll';
+import type { Poll as PollEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  closed: { id: 'poll.closed', defaultMessage: 'Closed' },
+});
+
+interface IPollFooter {
+  poll: PollEntity,
+  showResults: boolean,
+  selected: Selected,
+}
+
+const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
+
+  const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
+    dispatch(fetchPoll(poll.id));
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const timeRemaining = poll.expired ?
+    intl.formatMessage(messages.closed) :
+    <RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
+
+  return (
+    <Stack space={4}>
+      {(!showResults && poll?.multiple) && (
+        <Button onClick={handleVote} theme='primary' block>
+          <FormattedMessage id='poll.vote' defaultMessage='Vote' />
+        </Button>
+      )}
+
+      <HStack space={1.5} alignItems='center'>
+        {showResults && (
+          <>
+            <button className='text-gray-600 underline' onClick={handleRefresh}>
+              <Text theme='muted' weight='medium'>
+                <FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
+              </Text>
+            </button>
+
+            <Text theme='muted'>&middot;</Text>
+          </>
+        )}
+
+        <Text theme='muted' weight='medium'>
+          <FormattedMessage
+            id='poll.total_votes'
+            defaultMessage='{count, plural, one {# vote} other {# votes}}'
+            values={{ count: poll.votes_count }}
+          />
+        </Text>
+
+        {poll.expires_at && (
+          <>
+            <Text theme='muted'>&middot;</Text>
+            <Text weight='medium' theme='muted'>{timeRemaining}</Text>
+          </>
+        )}
+      </HStack>
+    </Stack>
+  );
+};
+
+export default PollFooter;
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
new file mode 100644
index 000000000..6c8523a2d
--- /dev/null
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -0,0 +1,157 @@
+import classNames from 'classnames';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Motion, presets, spring } from 'react-motion';
+
+import { HStack, Icon, Text } from '../ui';
+
+import type {
+  Poll as PollEntity,
+  PollOption as PollOptionEntity,
+} from 'soapbox/types/entities';
+
+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}}' },
+});
+
+const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
+  return (
+    <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
+      {({ width }) => (
+        <span
+          className='absolute inset-0 h-full inline-block bg-primary-100 rounded-l-md'
+          style={{ width: `${width}%` }}
+        />
+      )}
+    </Motion>
+  );
+};
+
+interface IPollOptionText extends IPollOption {
+  percent: number,
+}
+
+const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle }) => {
+  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('flex relative p-2 bg-white cursor-pointer rounded-full border border-solid hover:bg-primary-50', {
+          'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
+          'border-primary-300': !active,
+        })
+      }
+    >
+      <input
+        className='hidden'
+        name='vote-options'
+        type={poll.multiple ? 'checkbox' : 'radio'}
+        value={index}
+        checked={active}
+        onChange={handleOptionChange}
+      />
+
+      <div className='grid items-center w-full'>
+        <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
+          <Text
+            theme='primary'
+            weight='medium'
+            dangerouslySetInnerHTML={{ __html: option.title_emojified }}
+          />
+        </div>
+
+        <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
+          <span
+            className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
+              'bg-primary-600 border-primary-600': active,
+              'border-primary-300 bg-white': !active,
+            })}
+            tabIndex={0}
+            role={poll.multiple ? 'checkbox' : 'radio'}
+            onKeyPress={handleOptionKeyPress}
+            aria-checked={active}
+            aria-label={option.title}
+          >
+            {active && (
+              <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
+            )}
+          </span>
+        </div>
+      </div>
+    </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 { index, poll, option, showResults } = props;
+
+  const intl = useIntl();
+
+  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 voted = poll.own_votes?.includes(index);
+  const message = intl.formatMessage(messages.votes, { votes: option.votes_count });
+
+  return (
+    <div key={option.title}>
+      {showResults ? (
+        <div title={voted ? message : undefined}>
+          <HStack
+            justifyContent='between'
+            alignItems='center'
+            className='relative p-2 w-full bg-white rounded-md overflow-hidden'
+          >
+            <PollPercentageBar percent={percent} leading={leading} />
+
+            <Text
+              theme='primary'
+              weight='medium'
+              dangerouslySetInnerHTML={{ __html: option.title_emojified }}
+              className='relative'
+            />
+
+            <HStack space={2} alignItems='center' className='relative'>
+              {voted ? (
+                <Icon
+                  src={require('@tabler/icons/icons/circle-check.svg')}
+                  alt={intl.formatMessage(messages.voted)}
+                  className='text-primary-600 w-4 h-4'
+                />
+              ) : (
+                <div className='svg-icon' />
+              )}
+
+              <Text weight='medium' theme='primary'>{Math.round(percent)}%</Text>
+            </HStack>
+          </HStack>
+        </div>
+      ) : (
+        <PollOptionText percent={percent} {...props} />
+      )}
+    </div>
+  );
+};
+
+export default PollOption;
diff --git a/app/soapbox/components/polls/poll.tsx b/app/soapbox/components/polls/poll.tsx
new file mode 100644
index 000000000..37a2a591a
--- /dev/null
+++ b/app/soapbox/components/polls/poll.tsx
@@ -0,0 +1,89 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+import { openModal } from 'soapbox/actions/modals';
+import { vote } from 'soapbox/actions/polls';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import { Stack } from '../ui';
+
+import PollFooter from './poll-footer';
+import PollOption from './poll-option';
+
+export type Selected = Record<number, boolean>;
+
+interface IPoll {
+  id: string,
+  status?: string,
+}
+
+const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
+  const dispatch = useAppDispatch();
+
+  const isLoggedIn = useAppSelector((state) => state.me);
+  const poll = useAppSelector((state) => state.polls.get(id));
+
+  const [selected, setSelected] = useState({} as Selected);
+
+  const openUnauthorizedModal = () =>
+    dispatch(openModal('UNAUTHORIZED', {
+      action: 'POLL_VOTE',
+      ap_id: status,
+    }));
+
+  const handleVote = (selectedId: number) => dispatch(vote(id, [selectedId]));
+
+  const toggleOption = (value: number) => {
+    if (isLoggedIn) {
+      if (poll?.multiple) {
+        const tmp = { ...selected };
+        if (tmp[value]) {
+          delete tmp[value];
+        } else {
+          tmp[value] = true;
+        }
+        setSelected(tmp);
+      } else {
+        const tmp: Selected = {};
+        tmp[value] = true;
+        setSelected(tmp);
+        handleVote(value);
+      }
+    } else {
+      openUnauthorizedModal();
+    }
+  };
+
+  if (!poll) return null;
+
+  const showResults = poll.voted || poll.expired;
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onClick={e => e.stopPropagation()}>
+      <Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
+        <Stack space={2}>
+          {poll.options.map((option, i) => (
+            <PollOption
+              key={i}
+              poll={poll}
+              option={option}
+              index={i}
+              showResults={showResults}
+              active={!!selected[i]}
+              onToggle={toggleOption}
+            />
+          ))}
+        </Stack>
+
+        <PollFooter
+          poll={poll}
+          showResults={showResults}
+          selected={selected}
+        />
+      </Stack>
+    </div>
+  );
+};
+
+export default Poll;
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 0420a86c4..40fcf9f56 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -4,13 +4,14 @@ import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
-import Poll from 'soapbox/components/poll';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import { addGreentext } from 'soapbox/utils/greentext';
 import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich_content';
 
 import { isRtl } from '../rtl';
 
+import Poll from './polls/poll';
+
 import type { Status, Mention } from 'soapbox/types/entities';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)