Polls: break out PollOptionText into a React.FC

app/soapbox/components/poll.tsx

@@ -40,31 +40,12 @@ const PollPercentageBar: React.FC<IPollPercentageBar> = ({ percent, leading }):
   );
 };
 
-interface IPollOption {
+interface IPollOptionText extends IPollOption {
-  poll: PollEntity,
+  percent: number,
-  option: PollOptionEntity,
-  index: number,
-  showResults?: boolean,
-  disabled?: boolean,
-  active: boolean,
-  onToggle: (value: number) => void,
 }
 
-const PollOption: React.FC<IPollOption> = ({
+const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, disabled, percent, showResults, onToggle }) => {
-  poll,
-  option,
-  index,
-  showResults,
-  disabled,
-  active,
-  onToggle,
-}): JSX.Element | null => {
   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 handleOptionChange = (): void => {
@@ -80,11 +61,6 @@ const PollOption: React.FC<IPollOption> = ({
   };
 
   return (
-    <li key={option.title}>
-      {showResults && (
-        <PollPercentageBar percent={percent} leading={leading} />
-      )}
-
     <label className={classNames('poll__text', { selectable: !showResults })}>
       <input
         name='vote-options'
@@ -116,6 +92,33 @@ const PollOption: React.FC<IPollOption> = ({
 
       <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
     </label>
+  );
+};
+
+interface IPollOption {
+  poll: PollEntity,
+  option: PollOptionEntity,
+  index: number,
+  showResults?: boolean,
+  disabled?: 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 (
+    <li key={option.title}>
+      {showResults && (
+        <PollPercentageBar percent={percent} leading={leading} />
+      )}
+
+      <PollOptionText percent={percent} {...props} />
     </li>
   );
 };