Upgrade react-intl (#24906)

app/javascript/mastodon/components/domain.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 
-import type { InjectedIntl } from 'react-intl';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { IconButton } from './icon_button';
 
@@ -15,9 +14,11 @@ const messages = defineMessages({
 interface Props {
   domain: string;
   onUnblockDomain: (domain: string) => void;
-  intl: InjectedIntl;
 }
-const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
+
+export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
+  const intl = useIntl();
+
   const handleDomainUnblock = useCallback(() => {
     onUnblockDomain(domain);
   }, [domain, onUnblockDomain]);
@@ -41,5 +42,3 @@ const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
     </div>
   );
 };
-
-export const Domain = injectIntl(_Domain);

app/javascript/mastodon/components/load_gap.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 
-import type { InjectedIntl } from 'react-intl';
-import { injectIntl, defineMessages } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
 import { Icon } from 'mastodon/components/icon';
 
@@ -13,10 +12,11 @@ interface Props {
   disabled: boolean;
   maxId: string;
   onClick: (maxId: string) => void;
-  intl: InjectedIntl;
 }
 
-const _LoadGap: React.FC<Props> = ({ disabled, maxId, onClick, intl }) => {
+export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
+  const intl = useIntl();
+
   const handleClick = useCallback(() => {
     onClick(maxId);
   }, [maxId, onClick]);
@@ -32,5 +32,3 @@ const _LoadGap: React.FC<Props> = ({ disabled, maxId, onClick, intl }) => {
     </button>
   );
 };
-
-export const LoadGap = injectIntl(_LoadGap);

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 
-import type { InjectedIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { injectIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
@@ -103,7 +103,7 @@ const getUnitDelay = (units: string) => {
 };
 
 export const timeAgoString = (
-  intl: InjectedIntl,
+  intl: IntlShape,
   date: Date,
   now: number,
   year: number,
@@ -155,7 +155,7 @@ export const timeAgoString = (
 };
 
 const timeRemainingString = (
-  intl: InjectedIntl,
+  intl: IntlShape,
   date: Date,
   now: number,
   timeGiven = true
@@ -190,7 +190,7 @@ const timeRemainingString = (
 };
 
 interface Props {
-  intl: InjectedIntl;
+  intl: IntlShape;
   timestamp: string;
   year: number;
   futureDate?: boolean;
@@ -201,7 +201,7 @@ interface States {
 }
 class RelativeTimestamp extends Component<Props, States> {
   state = {
-    now: this.props.intl.now(),
+    now: Date.now(),
   };
 
   static defaultProps = {
@@ -223,7 +223,7 @@ class RelativeTimestamp extends Component<Props, States> {
 
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.props.timestamp !== nextProps.timestamp) {
-      this.setState({ now: this.props.intl.now() });
+      this.setState({ now: Date.now() });
     }
   }
 
@@ -253,7 +253,7 @@ class RelativeTimestamp extends Component<Props, States> {
         : Math.max(updateInterval, unitRemainder);
 
     this._timer = window.setTimeout(() => {
-      this.setState({ now: this.props.intl.now() });
+      this.setState({ now: Date.now() });
     }, delay);
   }