TypeScript, React.FC

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/ui/modal/modal.tsx

@@ -27,7 +27,7 @@ interface IModal {
   /** Callback when the modal is cancelled. */
   cancelAction?: () => void,
   /** Cancel button text. */
-  cancelText?: string,
+  cancelText?: React.ReactNode,
   /** URL to an SVG icon for the close button. */
   closeIcon?: string,
   /** Position of the close button. */

app/soapbox/features/compose/components/reply_indicator.tsx

@@ -9,13 +9,13 @@ import type { Status } from 'soapbox/types/entities';
 
 interface IReplyIndicator {
   status?: Status,
-  onCancel: () => void,
+  onCancel?: () => void,
   hideActions: boolean,
 }
 
 const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCancel }) => {
   const handleClick = () => {
-    onCancel();
+    onCancel!();
   };
 
   if (!status) {
@@ -23,7 +23,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
   }
 
   let actions = {};
-  if (!hideActions) {
+  if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
       actionIcon: require('@tabler/icons/icons/x.svg'),

app/soapbox/features/crypto_donate/components/crypto_address.tsx

@@ -10,7 +10,7 @@ import { getTitle } from '../utils/coin_db';
 
 import CryptoIcon from './crypto_icon';
 
-interface ICryptoAddress {
+export interface ICryptoAddress {
   address: string,
   ticker: string,
   note?: string,

app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx

@@ -13,7 +13,7 @@ import { buildStatus } from '../builder';
 
 import ScheduledStatusActionBar from './scheduled_status_action_bar';
 
-import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Poll as PollEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IScheduledStatus {
   statusId: string,
@@ -55,7 +55,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
           />
         )}
 
-        {status.poll && <PollPreview poll={status.poll} />}
+        {status.poll && <PollPreview poll={status.poll as PollEntity} />}
 
         <ScheduledStatusActionBar status={status} {...other} />
       </div>

app/soapbox/features/ui/components/boost_modal.js

@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { withRouter } from 'react-router-dom';
-
-import Icon from 'soapbox/components/icon';
-import { Modal, Stack, Text } from 'soapbox/components/ui';
-import ReplyIndicator from 'soapbox/features/compose/components/reply_indicator';
-
-const messages = defineMessages({
-  cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
-  reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
-});
-
-export default @injectIntl @withRouter
-class BoostModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record.isRequired,
-    onReblog: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    history: PropTypes.object,
-  };
-
-  handleReblog = () => {
-    this.props.onReblog(this.props.status);
-    this.props.onClose();
-  }
-
-  handleAccountClick = (e) => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.props.onClose();
-      this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
-    }
-  }
-
-  handleStatusClick = (e) => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.props.onClose();
-      this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('url')}`);
-    }
-  }
-
-  render() {
-    const { status, intl } = this.props;
-    const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog;
-
-    return (
-      <Modal
-        title='Repost?'
-        confirmationAction={this.handleReblog}
-        confirmationText={intl.formatMessage(buttonText)}
-      >
-        <Stack space={4}>
-          <ReplyIndicator status={status} hideActions />
-
-          <Text>
-            <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} />
-          </Text>
-        </Stack>
-      </Modal>
-    );
-  }
-
-}

app/soapbox/features/ui/components/boost_modal.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import Icon from 'soapbox/components/icon';
+import { Modal, Stack, Text } from 'soapbox/components/ui';
+import ReplyIndicator from 'soapbox/features/compose/components/reply_indicator';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
+  reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
+});
+
+interface IBoostModal {
+  status: StatusEntity,
+  onReblog: (status: StatusEntity) => void,
+  onClose: () => void,
+}
+
+const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
+  const intl = useIntl();
+
+  const handleReblog = () => {
+    onReblog(status);
+    onClose();
+  };
+
+  const buttonText = status.reblogged ? messages.cancel_reblog : messages.reblog;
+
+  return (
+    <Modal
+      title='Repost?'
+      confirmationAction={handleReblog}
+      confirmationText={intl.formatMessage(buttonText)}
+    >
+      <Stack space={4}>
+        <ReplyIndicator status={status} hideActions />
+
+        <Text>
+          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} />
+        </Text>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default BoostModal;

app/soapbox/features/ui/components/confirmation_modal.js

@@ -1,84 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
-
-import { Modal } from 'soapbox/components/ui';
-import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
-
-export default @injectIntl
-class ConfirmationModal extends React.PureComponent {
-
-  static propTypes = {
-    heading: PropTypes.node,
-    icon: PropTypes.node,
-    message: PropTypes.node.isRequired,
-    confirm: PropTypes.node.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    secondary: PropTypes.string,
-    onSecondary: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-    onCancel: PropTypes.func,
-    checkbox: PropTypes.node,
-  };
-
-  state = {
-    checked: false,
-  }
-
-  handleClick = () => {
-    this.props.onClose('CONFIRM');
-    this.props.onConfirm();
-  }
-
-  handleSecondary = () => {
-    this.props.onClose('CONFIRM');
-    this.props.onSecondary();
-  }
-
-  handleCancel = () => {
-    const { onClose, onCancel } = this.props;
-    onClose('CONFIRM');
-    if (onCancel) onCancel();
-  }
-
-  handleCheckboxChange = e => {
-    this.setState({ checked: e.target.checked });
-  }
-
-  render() {
-    const { heading, message, confirm, secondary, checkbox } = this.props;
-    const { checked } = this.state;
-
-    return (
-      <Modal
-        title={heading}
-        confirmationAction={this.handleClick}
-        confirmationText={confirm}
-        confirmationDisabled={checkbox && !checked}
-        confirmationTheme='danger'
-        cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
-        cancelAction={this.handleCancel}
-        secondaryText={secondary}
-        secondaryAction={this.props.onSecondary && this.handleSecondary}
-      >
-        <p className='text-gray-600 dark:text-gray-300'>{message}</p>
-
-        <div className='mt-2'>
-          {checkbox && <div className='confirmation-modal__checkbox'>
-            <SimpleForm>
-              <FieldsGroup>
-                <Checkbox
-                  onChange={this.handleCheckboxChange}
-                  label={checkbox}
-                  checked={checked}
-                />
-              </FieldsGroup>
-            </SimpleForm>
-          </div>}
-        </div>
-      </Modal>
-    );
-  }
-
-}

app/soapbox/features/ui/components/confirmation_modal.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Modal } from 'soapbox/components/ui';
+import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
+
+interface IConfirmationModal {
+  heading: React.ReactNode,
+  message: React.ReactNode,
+  confirm: React.ReactNode,
+  onClose: (type: string) => void,
+  onConfirm: () => void,
+  secondary: React.ReactNode,
+  onSecondary?: () => void,
+  onCancel: () => void,
+  checkbox?: JSX.Element,
+}
+
+const ConfirmationModal: React.FC<IConfirmationModal> = ({
+  heading,
+  message,
+  confirm,
+  onClose,
+  onConfirm,
+  secondary,
+  onSecondary,
+  onCancel,
+  checkbox,
+}) => {
+  const [checked, setChecked] = useState(false);
+
+  const handleClick = () => {
+    onClose('CONFIRM');
+    onConfirm();
+  };
+
+  const handleSecondary = () => {
+    onClose('CONFIRM');
+    onSecondary!();
+  };
+
+  const handleCancel = () => {
+    onClose('CONFIRM');
+    if (onCancel) onCancel();
+  };
+
+  const handleCheckboxChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    setChecked(e.target.checked);
+  };
+
+  return (
+    <Modal
+      title={heading}
+      confirmationAction={handleClick}
+      confirmationText={confirm}
+      confirmationDisabled={checkbox && !checked}
+      confirmationTheme='danger'
+      cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
+      cancelAction={handleCancel}
+      secondaryText={secondary}
+      secondaryAction={onSecondary && handleSecondary}
+    >
+      <p className='text-gray-600 dark:text-gray-300'>{message}</p>
+
+      <div className='mt-2'>
+        {checkbox && <div className='confirmation-modal__checkbox'>
+          <SimpleForm>
+            <FieldsGroup>
+              <Checkbox
+                onChange={handleCheckboxChange}
+                label={checkbox}
+                checked={checked}
+              />
+            </FieldsGroup>
+          </SimpleForm>
+        </div>}
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;

app/soapbox/features/ui/components/crypto_donate_modal.js

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import DetailedCryptoAddress from 'soapbox/features/crypto_donate/components/detailed_crypto_address';
-
-export default class CryptoDonateModal extends React.PureComponent {
-
-  static propTypes = {
-    address: PropTypes.string.isRequired,
-    ticker: PropTypes.string.isRequired,
-    note: PropTypes.string,
-  };
-
-  render() {
-    return (
-      <div className='modal-root__modal crypto-donate-modal'>
-        <DetailedCryptoAddress {...this.props} />
-      </div>
-    );
-  }
-
-}

app/soapbox/features/ui/components/crypto_donate_modal.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import DetailedCryptoAddress from 'soapbox/features/crypto_donate/components/detailed_crypto_address';
+
+import type { ICryptoAddress } from '../../crypto_donate/components/crypto_address';
+
+const CryptoDonateModal: React.FC<ICryptoAddress> = (props) => {
+  return (
+    <div className='modal-root__modal crypto-donate-modal'>
+      <DetailedCryptoAddress {...props} />
+    </div>
+  );
+
+};
+
+export default CryptoDonateModal;

app/soapbox/features/ui/components/list_panel.js

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-import { createSelector } from 'reselect';
-
-import { fetchLists } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
-
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))).take(4);
-});
-
-const mapStateToProps = state => ({
-  lists: getOrderedLists(state),
-});
-
-export default @withRouter
-@connect(mapStateToProps)
-class ListPanel extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    lists: ImmutablePropTypes.list,
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(fetchLists());
-  }
-
-  render() {
-    const { lists } = this.props;
-
-    if (!lists || lists.isEmpty()) {
-      return null;
-    }
-
-    return (
-      <div>
-        <hr />
-
-        {lists.map(list => (
-          <NavLink key={list.get('id')} className='column-link column-link--transparent' strict to={`/list/${list.get('id')}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.get('title')}</NavLink>
-        ))}
-      </div>
-    );
-  }
-
-}

app/soapbox/features/ui/components/list_panel.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import { createSelector } from 'reselect';
+
+import { fetchLists } from 'soapbox/actions/lists';
+import Icon from 'soapbox/components/icon';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import type { List as ImmutableList } from 'immutable';
+import type { RootState } from 'soapbox/store';
+import type { List as ListEntity } from 'soapbox/types/entities';
+
+const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
+  if (!lists) {
+    return lists;
+  }
+
+  return lists.toList().filter(item => !!item).sort((a, b) => (a as ListEntity).title.localeCompare((b as ListEntity).title)).take(4) as ImmutableList<ListEntity>;;
+});
+
+const ListPanel = () => {
+  const dispatch = useAppDispatch();
+
+  const lists = useAppSelector((state) => getOrderedLists(state));
+
+  useEffect(() => {
+    dispatch(fetchLists());
+  }, []);
+
+  if (!lists || lists.isEmpty()) {
+    return null;
+  }
+
+  return (
+    <div>
+      <hr />
+
+      {lists.map(list => (
+        <NavLink key={list.id} className='column-link column-link--transparent' strict to={`/list/${list.id}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.title}</NavLink>
+      ))}
+    </div>
+  );
+};
+
+export default ListPanel;

app/soapbox/features/ui/components/mute_modal.js

@@ -1,108 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import Toggle from 'react-toggle';
-
-import { muteAccount } from 'soapbox/actions/accounts';
-import { closeModal } from 'soapbox/actions/modals';
-import { toggleHideNotifications } from 'soapbox/actions/mutes';
-import { Modal, HStack, Stack, Text } from 'soapbox/components/ui';
-
-const mapStateToProps = state => {
-  return {
-    isSubmitting: state.reports.new.isSubmitting,
-    account: state.getIn(['mutes', 'new', 'account']),
-    notifications: state.getIn(['mutes', 'new', 'notifications']),
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account, notifications) {
-      dispatch(muteAccount(account.get('id'), notifications));
-    },
-
-    onClose() {
-      dispatch(closeModal());
-    },
-
-    onToggleNotifications() {
-      dispatch(toggleHideNotifications());
-    },
-  };
-};
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class MuteModal extends React.PureComponent {
-
-  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    notifications: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    onToggleNotifications: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account, this.props.notifications);
-  }
-
-  handleCancel = () => {
-    this.props.onClose();
-  }
-
-  toggleNotifications = () => {
-    this.props.onToggleNotifications();
-  }
-
-  render() {
-    const { account, notifications } = this.props;
-
-    return (
-      <Modal
-        title={
-          <FormattedMessage
-            id='confirmations.mute.heading'
-            defaultMessage='Mute @{name}'
-            values={{ name: account.get('acct') }}
-          />
-        }
-        onClose={this.handleCancel}
-        confirmationAction={this.handleClick}
-        confirmationText={<FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />}
-        cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
-        cancelAction={this.handleCancel}
-      >
-        <Stack space={4}>
-          <Text>
-            <FormattedMessage
-              id='confirmations.mute.message'
-              defaultMessage='Are you sure you want to mute {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
-          </Text>
-
-          <label>
-            <HStack alignItems='center' space={2}>
-              <Text tag='span'>
-                <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
-              </Text>
-
-              <Toggle
-                checked={notifications}
-                onChange={this.toggleNotifications}
-                icons={false}
-              />
-            </HStack>
-          </label>
-        </Stack>
-      </Modal>
-    );
-  }
-
-}

app/soapbox/features/ui/components/mute_modal.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Toggle from 'react-toggle';
+
+import { muteAccount } from 'soapbox/actions/accounts';
+import { closeModal } from 'soapbox/actions/modals';
+import { toggleHideNotifications } from 'soapbox/actions/mutes';
+import { Modal, HStack, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const getAccount = makeGetAccount();
+
+const MuteModal = () => {
+  const dispatch = useAppDispatch();
+
+  const account = useAppSelector((state) => getAccount(state, state.mutes.new.accountId!));
+  const notifications = useAppSelector((state) => state.mutes.new.notifications);
+
+  if (!account) return null;
+
+  const handleClick = () => {
+    dispatch(closeModal());
+    dispatch(muteAccount(account.id, notifications));
+  };
+
+  const handleCancel = () => {
+    dispatch(closeModal());
+  };
+
+  const toggleNotifications = () => {
+    dispatch(toggleHideNotifications());
+  };
+
+  return (
+    <Modal
+      title={
+        <FormattedMessage
+          id='confirmations.mute.heading'
+          defaultMessage='Mute @{name}'
+          values={{ name: account.acct }}
+        />
+      }
+      onClose={handleCancel}
+      confirmationAction={handleClick}
+      confirmationText={<FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />}
+      cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
+      cancelAction={handleCancel}
+    >
+      <Stack space={4}>
+        <Text>
+          <FormattedMessage
+            id='confirmations.mute.message'
+            defaultMessage='Are you sure you want to mute {name}?'
+            values={{ name: <strong>@{account.acct}</strong> }}
+          />
+        </Text>
+
+        <label>
+          <HStack alignItems='center' space={2}>
+            <Text tag='span'>
+              <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
+            </Text>
+
+            <Toggle
+              checked={notifications}
+              onChange={toggleNotifications}
+              icons={false}
+            />
+          </HStack>
+        </label>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default MuteModal;

app/soapbox/features/ui/components/pending_status.tsx

@@ -14,7 +14,7 @@ import { buildStatus } from '../util/pending_status_builder';
 
 import PollPreview from './poll_preview';
 
-import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Poll as PollEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 const shouldHaveCard = (pendingStatus: StatusEntity) => {
   return Boolean(pendingStatus.content.match(/https?:\/\/\S*/));
@@ -81,7 +81,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
             <PendingStatusMedia status={status} />
 
-            {status.poll && <PollPreview poll={status.poll} />}
+            {status.poll && <PollPreview poll={status.poll as PollEntity} />}
 
             {status.quote && <QuotedStatus statusId={status.quote as string} />}
           </div>

app/soapbox/features/ui/components/poll_preview.js

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-export default class PollPreview extends ImmutablePureComponent {
-
-  static propTypes = {
-    poll: ImmutablePropTypes.map,
-  };
-
-  renderOption(option) {
-    const { poll } = this.props;
-    const showResults = poll.get('voted') || poll.get('expired');
-
-    return (
-      <li key={option}>
-        <label className={classNames('poll__text', { selectable: !showResults })}>
-          <input
-            name='vote-options'
-            type={poll.get('multiple') ? 'checkbox' : 'radio'}
-            onChange={this.handleOptionChange}
-            disabled
-          />
-
-          <span className={classNames('poll__input', { checkbox: poll.get('multiple') })} />
-
-          <span dangerouslySetInnerHTML={{ __html: option }} />
-        </label>
-      </li>
-    );
-  }
-
-  render() {
-    const { poll } = this.props;
-
-    if (!poll) {
-      return null;
-    }
-
-    return (
-      <div className='poll'>
-        <ul>
-          {poll.get('options').map((option, i) => this.renderOption(option, i))}
-        </ul>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/ui/components/poll_preview.tsx

@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
+
+interface IPollPreview {
+  poll: PollEntity,
+}
+
+const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
+  const renderOption = (option: PollOptionEntity, index: number) => {
+    const showResults = poll.voted || poll.expired;
+
+    return (
+      <li key={index}>
+        <label className={classNames('poll__text', { selectable: !showResults })}>
+          <input
+            name='vote-options'
+            type={poll.multiple ? 'checkbox' : 'radio'}
+            disabled
+          />
+
+          <span className={classNames('poll__input', { checkbox: poll.multiple })} />
+
+          <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+        </label>
+      </li>
+    );
+  };
+
+  if (!poll) {
+    return null;
+  }
+
+  return (
+    <div className='poll'>
+      <ul>
+        {poll.options.map((option, i) => renderOption(option, i))}
+      </ul>
+    </div>
+  );
+};
+
+export default PollPreview;

app/soapbox/reducers/mutes.ts

@@ -1,24 +1,30 @@
-import { Map as ImmutableMap } from 'immutable';
+import { Record as ImmutableRecord } from 'immutable';
 
 import {
   MUTES_INIT_MODAL,
   MUTES_TOGGLE_HIDE_NOTIFICATIONS,
 } from '../actions/mutes';
 
-const initialState = ImmutableMap({
+import type { AnyAction } from 'redux';
-  new: ImmutableMap({
+
-    isSubmitting: false,
+const NewMuteRecord = ImmutableRecord({
-    account: null,
+  isSubmitting: false,
-    notifications: true,
+  accountId: null,
-  }),
+  notifications: true,
 });
 
-export default function mutes(state = initialState, action) {
+const ReducerRecord = ImmutableRecord({
+  new: NewMuteRecord(),
+});
+
+type State = ReturnType<typeof ReducerRecord>;
+
+export default function mutes(state: State = ReducerRecord(), action: AnyAction) {
   switch (action.type) {
     case MUTES_INIT_MODAL:
       return state.withMutations((state) => {
         state.setIn(['new', 'isSubmitting'], false);
-        state.setIn(['new', 'account'], action.account);
+        state.setIn(['new', 'accountId'], action.account.id);
         state.setIn(['new', 'notifications'], true);
       });
     case MUTES_TOGGLE_HIDE_NOTIFICATIONS: