[Glitch] Upgrade react-intl

Port 44cd88adc4 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/62/head
Renaud Chaput 2023-05-31 23:43:39 +02:00 committed by Claire
parent 85722a918d
commit 9e133e2527
111 changed files with 168 additions and 1349 deletions

View File

@ -1,4 +1,4 @@
import IntlMessageFormat from 'intl-messageformat'; import { IntlMessageFormat } from 'intl-messageformat';
import { defineMessages } from 'react-intl'; import { defineMessages } from 'react-intl';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';

View File

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

View File

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

View File

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

View File

@ -1,12 +1,11 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { getLocale } from 'mastodon/locales'; import { getLocale, onProviderError } from 'mastodon/locales';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
export default class AdminComponent extends PureComponent { export default class AdminComponent extends PureComponent {
@ -19,7 +18,7 @@ export default class AdminComponent extends PureComponent {
const { locale, children } = this.props; const { locale, children } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
{children} {children}
</IntlProvider> </IntlProvider>
); );

View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
@ -11,10 +11,9 @@ import Compose from 'flavours/glitch/features/standalone/compose';
import initialState from 'flavours/glitch/initial_state'; import initialState from 'flavours/glitch/initial_state';
import { store } from 'flavours/glitch/store'; import { store } from 'flavours/glitch/store';
import { getLocale } from 'mastodon/locales'; import { getLocale, onProviderError } from 'mastodon/locales';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
if (initialState) { if (initialState) {
store.dispatch(hydrateStore(initialState)); store.dispatch(hydrateStore(initialState));
@ -32,7 +31,7 @@ export default class TimelineContainer extends PureComponent {
const { locale } = this.props; const { locale } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
<Provider store={store}> <Provider store={store}>
<Compose /> <Compose />
</Provider> </Provider>

View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { BrowserRouter, Route } from 'react-router-dom'; import { BrowserRouter, Route } from 'react-router-dom';
@ -18,10 +18,9 @@ import ErrorBoundary from 'flavours/glitch/components/error_boundary';
import UI from 'flavours/glitch/features/ui'; import UI from 'flavours/glitch/features/ui';
import initialState, { title as siteTitle } from 'flavours/glitch/initial_state'; import initialState, { title as siteTitle } from 'flavours/glitch/initial_state';
import { store } from 'flavours/glitch/store'; import { store } from 'flavours/glitch/store';
import { getLocale } from 'locales'; import { getLocale, onProviderError } from 'locales';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`; const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
@ -87,7 +86,7 @@ export default class Mastodon extends PureComponent {
const { locale } = this.props; const { locale } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
<ReduxProvider store={store}> <ReduxProvider store={store}>
<ErrorBoundary> <ErrorBoundary>
<BrowserRouter> <BrowserRouter>

View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { fromJS } from 'immutable'; import { fromJS } from 'immutable';
@ -16,10 +16,9 @@ import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
import Video from 'flavours/glitch/features/video'; import Video from 'flavours/glitch/features/video';
import { getScrollbarWidth } from 'flavours/glitch/utils/scrollbar'; import { getScrollbarWidth } from 'flavours/glitch/utils/scrollbar';
import { getLocale } from 'mastodon/locales'; import { getLocale, onProviderError } from 'mastodon/locales';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio }; const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
@ -85,7 +84,7 @@ export default class MediaContainer extends PureComponent {
} }
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
<> <>
{[].map.call(components, (component, i) => { {[].map.call(components, (component, i) => {
const componentName = component.getAttribute('data-component'); const componentName = component.getAttribute('data-component');

View File

@ -0,0 +1,21 @@
import { setLocale } from 'locales';
export async function loadLocale() {
const locale = document.querySelector('html').lang || 'en';
const upstreamLocaleData = await import(
/* webpackMode: "lazy" */
/* webpackChunkName: "locales/vanilla/[request]" */
/* webpackInclude: /\.json$/ */
/* webpackPreload: true */
`mastodon/locales/${locale}.json`);
const localeData = await import(
/* webpackMode: "lazy" */
/* webpackChunkName: "locales/glitch/[request]" */
/* webpackInclude: /\.json$/ */
/* webpackPreload: true */
`flavours/glitch/locales/${locale}.json`);
setLocale({ messages: {...upstreamLocaleData, ...localeData} });
}

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More