Refactor: Update FormatJS (#38388)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

app/javascript/mastodon/components/admin/ReportReasonSelector.jsx

@@ -1,12 +1,14 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { injectIntl, defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
 import api from 'mastodon/api';
 
+import { injectIntl } from '../intl';
+
 const messages = defineMessages({
   legal: { id: 'report.categories.legal', defaultMessage: 'Legal' },
   other: { id: 'report.categories.other', defaultMessage: 'Other' },

app/javascript/mastodon/components/intl.tsx

@@ -0,0 +1,26 @@
+import type { ComponentClass } from 'react';
+
+import { useIntl } from 'react-intl';
+
+interface IntlHocProps<TProps extends Record<string, unknown>> {
+  component: ComponentClass<TProps>;
+  props: TProps;
+}
+
+export const IntlHoc = <TProps extends Record<string, unknown>>({
+  component: Component,
+  props,
+}: IntlHocProps<TProps>) => {
+  const intl = useIntl();
+  return <Component {...props} intl={intl} />;
+};
+
+export const injectIntl = <TProps extends Record<string, unknown>>(
+  Component: ComponentClass<TProps>,
+) => {
+  const WrappedComponent = (props: Omit<TProps, 'intl'>) => (
+    <IntlHoc component={Component} props={props as TProps} />
+  );
+  WrappedComponent.displayName = `injectIntl(${(Component.displayName ?? Component.name) || 'Component'})`;
+  return WrappedComponent;
+};

app/javascript/mastodon/components/server_banner.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
@@ -14,6 +14,8 @@ import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
 import { domain } from 'mastodon/initial_state';
 
+import { injectIntl } from './intl';
+
 const messages = defineMessages({
   aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
 });

app/javascript/mastodon/components/status.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
@@ -24,6 +24,7 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components
 import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
 import { displayMedia } from '../initial_state';
 
+import { injectIntl } from './intl';
 import { StatusHeader } from './status/header'
 import { LinkedDisplayName } from './display_name';
 import { getHashtagBarForStatus } from './hashtag_bar';

app/javascript/mastodon/components/status_action_bar/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';
 
 import { withRouter } from 'react-router-dom';
 
@@ -23,10 +23,12 @@ import { Dropdown } from 'mastodon/components/dropdown_menu';
 import { me, quickBoosting } from '../../initial_state';
 
 import { IconButton } from '../icon_button';
+import { injectIntl } from '../intl';
 import { BoostButton } from '../status/boost_button';
 import { RemoveQuoteHint } from './remove_quote_hint';
 import { quoteItemState, selectStatusState } from '../status/boost_button_utils';
 
+
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
   redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },

app/javascript/mastodon/components/status_content.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import classnames from 'classnames';
 import { withRouter } from 'react-router-dom';
@@ -16,6 +16,7 @@ import { identityContextPropShape, withIdentity } from 'mastodon/identity_contex
 import { languages as preloadedLanguages } from 'mastodon/initial_state';
 
 import { EmojiHTML } from './emoji/html';
+import { injectIntl } from './intl';
 import { HandledLink } from './status/handled_link';
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)

app/javascript/mastodon/components/status_quoted.tsx

@@ -335,7 +335,6 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
 
   return (
     <div className='status__quote'>
-      {/* @ts-expect-error Status is not yet typed */}
       <StatusContainer
         isQuotedPost
         id={quotedStatusId}