diff --git a/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx b/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx index 92669fcadc..9ca16a0f32 100644 --- a/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/api'; +import { injectIntl } from '../intl'; + const messages = defineMessages({ legal: { id: 'report.categories.legal', defaultMessage: 'Legal' }, other: { id: 'report.categories.other', defaultMessage: 'Other' }, diff --git a/app/javascript/flavours/glitch/components/intl.tsx b/app/javascript/flavours/glitch/components/intl.tsx new file mode 100644 index 0000000000..2d8b0ef840 --- /dev/null +++ b/app/javascript/flavours/glitch/components/intl.tsx @@ -0,0 +1,26 @@ +import type { ComponentClass } from 'react'; + +import { useIntl } from 'react-intl'; + +interface IntlHocProps> { + component: ComponentClass; + props: TProps; +} + +export const IntlHoc = >({ + component: Component, + props, +}: IntlHocProps) => { + const intl = useIntl(); + return ; +}; + +export const injectIntl = >( + Component: ComponentClass, +) => { + const WrappedComponent = (props: Omit) => ( + + ); + WrappedComponent.displayName = `injectIntl(${(Component.displayName ?? Component.name) || 'Component'})`; + return WrappedComponent; +}; diff --git a/app/javascript/flavours/glitch/components/server_banner.jsx b/app/javascript/flavours/glitch/components/server_banner.jsx index b3f4311479..520030e8be 100644 --- a/app/javascript/flavours/glitch/components/server_banner.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/short_number'; import { Skeleton } from 'flavours/glitch/components/skeleton'; import { domain } from 'flavours/glitch/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)' }, }); diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 78bd3e9ccd..db26e5f012 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/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'; @@ -21,6 +21,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 AttachmentList from './attachment_list'; import { StatusHeader } from './status/header' import { getHashtagBarForStatus } from './hashtag_bar'; diff --git a/app/javascript/flavours/glitch/components/status_action_bar/index.jsx b/app/javascript/flavours/glitch/components/status_action_bar/index.jsx index 7f402eb645..0484f9f8b5 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar/index.jsx +++ b/app/javascript/flavours/glitch/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'; @@ -25,11 +25,13 @@ import { Dropdown } from 'flavours/glitch/components/dropdown_menu'; import { me, quickBoosting } from '../../initial_state'; import { IconButton } from '../icon_button'; +import { injectIntl } from '../intl'; import { RelativeTimestamp } from '../relative_timestamp'; 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' }, diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index dd2d9c3f6b..40a1d26ccd 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/identity import { languages as preloadedLanguages } from 'flavours/glitch/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) diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx index 63f443952e..1641dedf81 100644 --- a/app/javascript/flavours/glitch/components/status_icons.jsx +++ b/app/javascript/flavours/glitch/components/status_icons.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import { PureComponent } from 'react'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; @@ -11,6 +11,7 @@ import HomeIcon from '@/material-icons/400-24px/home.svg?react'; import { Icon } from 'flavours/glitch/components/icon'; import { MediaIcon } from 'flavours/glitch/components/media_icon'; import { languages } from 'flavours/glitch/initial_state'; +import { injectIntl } from '@/flavours/glitch/components/intl'; import { VisibilityIcon } from './visibility_icon'; diff --git a/app/javascript/flavours/glitch/components/status_quoted.tsx b/app/javascript/flavours/glitch/components/status_quoted.tsx index 42287b315e..e53c99f978 100644 --- a/app/javascript/flavours/glitch/components/status_quoted.tsx +++ b/app/javascript/flavours/glitch/components/status_quoted.tsx @@ -336,7 +336,6 @@ export const QuotedStatus: React.FC = ({ return (
- {/* @ts-expect-error Status is not yet typed */}
    {chunks}
, li: (chunks) =>
  • {chunks}
  • , diff --git a/app/javascript/flavours/glitch/features/alt_text_modal/components/info_button.tsx b/app/javascript/flavours/glitch/features/alt_text_modal/components/info_button.tsx index 891702d563..074a19c45a 100644 --- a/app/javascript/flavours/glitch/features/alt_text_modal/components/info_button.tsx +++ b/app/javascript/flavours/glitch/features/alt_text_modal/components/info_button.tsx @@ -59,6 +59,7 @@ export const InfoButton: React.FC = () => { >