ReplyMentions component to ts

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

app/soapbox/components/media_gallery.js

@@ -602,7 +602,7 @@ class MediaGallery extends React.PureComponent {
               />
             ) : (
               <button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'>
-                <div className='p-4 rounded-xl shadow-xl backdrop-blur-sm bg-white/75 text-center inline-block space-y-4 max-w-[280px]'>
+                <div className='p-4 rounded-xl shadow-xl backdrop-blur-sm bg-white/75 dark:bg-slate-800/75 text-center inline-block space-y-4 max-w-[280px]'>
                   <div className='space-y-1'>
                     <Text weight='semibold'>{warning}</Text>
                     <Text size='sm'>

app/soapbox/components/status.tsx

@@ -429,7 +429,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                 defaultMessage='{name} reposted'
                 values={{
                   name: <bdi>
-                    <strong className='text-gray-800' dangerouslySetInnerHTML={displayNameHtml} />
+                    <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
                   </bdi>,
                 }}
               />

app/soapbox/features/compose/components/reply_mentions.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 { FormattedMessage, injectIntl } from 'react-intl';
-
-export default @injectIntl
-class ReplyMentions extends ImmutablePureComponent {
-
-  static propTypes = {
-    onOpenMentionsModal: PropTypes.func.isRequired,
-    explicitAddressing: PropTypes.bool,
-    to: ImmutablePropTypes.orderedSet,
-    parentTo: ImmutablePropTypes.orderedSet,
-    isReply: PropTypes.bool,
-  };
-
-  handleClick = e => {
-    e.preventDefault();
-
-    this.props.onOpenMentionsModal();
-  }
-
-  render() {
-    const { explicitAddressing, to, parentTo, isReply } = this.props;
-
-    if (!explicitAddressing || !isReply || !to || (parentTo.size === 0)) {
-      return null;
-    }
-
-    if (to.size === 0) {
-      return (
-        <a href='#' className='reply-mentions' onClick={this.handleClick}>
-          <FormattedMessage
-            id='reply_mentions.reply_empty'
-            defaultMessage='Replying to post'
-          />
-        </a>
-      );
-    }
-
-    return (
-      <a href='#' className='reply-mentions' onClick={this.handleClick}>
-        <FormattedMessage
-          id='reply_mentions.reply'
-          defaultMessage='Replying to {accounts}{more}'
-          values={{
-            accounts: to.slice(0, 2).map(acct => <><span className='reply-mentions__account'>@{acct.split('@')[0]}</span>{' '}</>),
-            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
-          }}
-        />
-      </a>
-    );
-  }
-
-}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { openModal } from 'soapbox/actions/modals';
+import { useAppSelector } from 'soapbox/hooks';
+import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
+import { makeGetStatus } from 'soapbox/selectors';
+import { getFeatures } from 'soapbox/utils/features';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+const ReplyMentions: React.FC = () => {
+  const dispatch = useDispatch();
+  const instance = useAppSelector((state) => state.instance);
+  const status = useAppSelector<StatusEntity | null>(state => makeGetStatus()(state, { id: state.compose.get('in_reply_to') }));
+
+  const to = useAppSelector((state) => state.compose.get('to'));
+  const account = useAppSelector((state) => state.accounts.get(state.me));
+
+  const { explicitAddressing } = getFeatures(instance);
+
+  if (!explicitAddressing || !status || !to) {
+    return null;
+  }
+
+  const parentTo = status && statusToMentionsAccountIdsArray(status, account);
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+
+    dispatch(openModal('REPLY_MENTIONS'));
+  };
+
+  if (!parentTo || (parentTo.size === 0)) {
+    return null;
+  }
+
+  if (to.size === 0) {
+    return (
+      <a href='#' className='reply-mentions' onClick={handleClick}>
+        <FormattedMessage
+          id='reply_mentions.reply_empty'
+          defaultMessage='Replying to post'
+        />
+      </a>
+    );
+  }
+
+  return (
+    <a href='#' className='reply-mentions' onClick={handleClick}>
+      <FormattedMessage
+        id='reply_mentions.reply'
+        defaultMessage='Replying to {accounts}{more}'
+        values={{
+          accounts: to.slice(0, 2).map((acct: string) => <><span className='reply-mentions__account'>@{acct.split('@')[0]}</span>{' '}</>),
+          more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+        }}
+      />
+    </a>
+  );
+};
+
+export default ReplyMentions;