tarrien/Mastodon
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge commit '0004ed4c8021ebd400d32eb32a5e479ebd7bcf91' into glitch-soc/merge-upstream

Browse Source
This commit is contained in:
Claire committed 2025-11-30 16:40:18 +01:00
2 parents 2e543ff246 0004ed4c80
commit 44e6abe48b
52 files changed
+806 -623
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/javascript/mastodon/features/blocks/index.jsx
+1 -1
View File
@@ -38,7 +38,7 @@ class Blocks extends ImmutablePureComponent {
multiColumn: PropTypes.bool,
};
UNSAFE_componentWillMount () {
componentDidMount () {
this.props.dispatch(fetchBlocks());
}
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
+8 -2
View File
@@ -61,8 +61,14 @@ class ModifierPickerMenu extends PureComponent {
this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
};
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.active) {
componentDidMount() {
if (this.props.active) {
this.attachListeners();
}
}
componentDidUpdate() {
if (this.props.active) {
this.attachListeners();
} else {
this.removeListeners();
app/javascript/mastodon/features/favourites/index.jsx
+1 -1
View File
@@ -41,7 +41,7 @@ class Favourites extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
};
UNSAFE_componentWillMount () {
componentDidMount () {
if (!this.props.accountIds) {
this.props.dispatch(fetchFavourites(this.props.params.statusId));
}
app/javascript/mastodon/features/follow_requests/index.jsx
+1 -1
View File
@@ -45,7 +45,7 @@ class FollowRequests extends ImmutablePureComponent {
multiColumn: PropTypes.bool,
};
UNSAFE_componentWillMount () {
componentDidMount () {
this.props.dispatch(fetchFollowRequests());
}
app/javascript/mastodon/features/list_timeline/index.jsx
+3 -4
View File
@@ -73,11 +73,10 @@ class ListTimeline extends PureComponent {
this.disconnect = dispatch(connectListStream(id));
}
UNSAFE_componentWillReceiveProps (nextProps) {
const { dispatch } = this.props;
const { id } = nextProps.params;
componentDidUpdate (prevProps) {
const { dispatch, params: {id} } = this.props;
if (id !== this.props.params.id) {
if (id !== prevProps.params.id) {
if (this.disconnect) {
this.disconnect();
this.disconnect = null;
app/javascript/mastodon/features/mutes/index.jsx
+1 -1
View File
@@ -40,7 +40,7 @@ class Mutes extends ImmutablePureComponent {
multiColumn: PropTypes.bool,
};
UNSAFE_componentWillMount () {
componentDidMount () {
this.props.dispatch(fetchMutes());
}
app/javascript/mastodon/features/pinned_statuses/index.jsx
+1 -1
View File
@@ -34,7 +34,7 @@ class PinnedStatuses extends ImmutablePureComponent {
multiColumn: PropTypes.bool,
};
UNSAFE_componentWillMount () {
componentDidMount () {
this.props.dispatch(fetchPinnedStatuses());
}
app/javascript/mastodon/features/reblogs/index.jsx
+1 -1
View File
@@ -42,7 +42,7 @@ class Reblogs extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
};
UNSAFE_componentWillMount () {
componentDidMount () {
if (!this.props.accountIds) {
this.props.dispatch(fetchReblogs(this.props.params.statusId));
}
app/javascript/mastodon/features/status/components/card.jsx
-254
View File
@@ -1,254 +0,0 @@
import punycode from 'punycode';
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { is } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react';
import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon';
import { MoreFromAuthor } from 'mastodon/components/more_from_author';
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
import { useBlurhash } from 'mastodon/initial_state';
const IDNA_PREFIX = 'xn--';
const decodeIDNA = domain => {
return domain
.split('.')
.map(part => part.indexOf(IDNA_PREFIX) === 0 ? punycode.decode(part.slice(IDNA_PREFIX.length)) : part)
.join('.');
};
const getHostname = url => {
const parser = document.createElement('a');
parser.href = url;
return parser.hostname;
};
const domParser = new DOMParser();
const handleIframeUrl = (html, url, providerName) => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
const startTime = new URL(url).searchParams.get('t')
if (iframe) {
const iframeUrl = new URL(iframe.src)
iframeUrl.searchParams.set('autoplay', 1)
iframeUrl.searchParams.set('auto_play', 1)
if (startTime && providerName === "YouTube") iframeUrl.searchParams.set('start', startTime)
iframe.src = iframeUrl.href
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return document.querySelector('body').innerHTML;
}
return html;
};
export default class Card extends PureComponent {
static propTypes = {
card: ImmutablePropTypes.map,
onOpenMedia: PropTypes.func.isRequired,
sensitive: PropTypes.bool,
};
state = {
previewLoaded: false,
embedded: false,
revealed: !this.props.sensitive,
};
UNSAFE_componentWillReceiveProps (nextProps) {
if (!is(this.props.card, nextProps.card)) {
this.setState({ embedded: false, previewLoaded: false });
}
if (this.props.sensitive !== nextProps.sensitive) {
this.setState({ revealed: !nextProps.sensitive });
}
}
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
}
handleEmbedClick = () => {
this.setState({ embedded: true });
};
handleExternalLinkClick = (e) => {
e.stopPropagation();
};
setRef = c => {
this.node = c;
};
handleImageLoad = () => {
this.setState({ previewLoaded: true });
};
handleReveal = e => {
e.preventDefault();
e.stopPropagation();
this.setState({ revealed: true });
};
renderVideo () {
const { card } = this.props;
const content = { __html: handleIframeUrl(card.get('html'), card.get('url'), card.get('provider_name')) };
return (
<div
ref={this.setRef}
className='status-card__image status-card-video'
dangerouslySetInnerHTML={content}
style={{ aspectRatio: '16 / 9' }}
/>
);
}
render () {
const { card } = this.props;
const { embedded, revealed } = this.state;
if (card === null) {
return null;
}
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const interactive = card.get('type') === 'video';
const language = card.get('language') || '';
const largeImage = (card.get('image')?.length > 0 && card.get('width') > card.get('height')) || interactive;
const showAuthor = !!card.getIn(['authors', 0, 'accountId']);
const description = (
<div className='status-card__content' dir='auto'>
<span className='status-card__host'>
<span lang={language}>{provider}</span>
{card.get('published_at') && <> · <RelativeTimestamp timestamp={card.get('published_at')} /></>}
</span>
<strong className='status-card__title' title={card.get('title')} lang={language}>{card.get('title')}</strong>
{!showAuthor && (card.get('author_name').length > 0 ? <span className='status-card__author'><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{card.get('author_name')}</strong> }} /></span> : <span className='status-card__description' lang={language}>{card.get('description')}</span>)}
</div>
);
const thumbnailStyle = {
visibility: revealed ? null : 'hidden',
};
if (largeImage && card.get('type') === 'video') {
thumbnailStyle.aspectRatio = `16 / 9`;
} else if (largeImage) {
thumbnailStyle.aspectRatio = '1.91 / 1';
} else {
thumbnailStyle.aspectRatio = 1;
}
let embed;
let canvas = (
<Blurhash
className={classNames('status-card__image-preview', {
'status-card__image-preview--hidden': revealed && this.state.previewLoaded,
})}
hash={card.get('blurhash')}
dummy={!useBlurhash}
/>
);
const thumbnailDescription = card.get('image_description');
const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>
<FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button>
);
spoilerButton = (
<div className={classNames('spoiler-button', { 'spoiler-button--minified': revealed })}>
{spoilerButton}
</div>
);
if (interactive) {
if (embedded) {
embed = this.renderVideo();
} else {
embed = (
<div className='status-card__image'>
{canvas}
{thumbnail}
{revealed ? (
<div className='status-card__actions' onClick={this.handleEmbedClick} role='none'>
<div>
<button type='button' onClick={this.handleEmbedClick}><Icon id='play' icon={PlayArrowIcon} /></button>
<a href={card.get('url')} onClick={this.handleExternalLinkClick} target='_blank' rel='noopener'><Icon id='external-link' icon={OpenInNewIcon} /></a>
</div>
</div>
) : spoilerButton}
</div>
);
}
return (
<div className={classNames('status-card', { expanded: largeImage })} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
{embed}
<a href={card.get('url')} target='_blank' rel='noopener'>{description}</a>
</div>
);
} else if (card.get('image')) {
embed = (
<div className='status-card__image'>
{canvas}
{thumbnail}
</div>
);
} else {
embed = (
<div className='status-card__image'>
<Icon id='file-text' icon={DescriptionIcon} />
</div>
);
}
return (
<>
<a href={card.get('url')} className={classNames('status-card', { expanded: largeImage, bottomless: showAuthor })} target='_blank' rel='noopener' ref={this.setRef}>
{embed}
{description}
</a>
{showAuthor && <MoreFromAuthor accountId={card.getIn(['authors', 0, 'accountId'])} />}
</>
);
}
}
app/javascript/mastodon/features/status/components/card.tsx
+316
View File
@@ -0,0 +1,316 @@
import punycode from 'node:punycode';
import { useCallback, useId, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react';
import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon';
import { MoreFromAuthor } from 'mastodon/components/more_from_author';
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
import { useBlurhash } from 'mastodon/initial_state';
import type { Card as CardType } from 'mastodon/models/status';
const IDNA_PREFIX = 'xn--';
const decodeIDNA = (domain: string) => {
return domain
.split('.')
.map((part) =>
part.startsWith(IDNA_PREFIX)
? punycode.decode(part.slice(IDNA_PREFIX.length))
: part,
)
.join('.');
};
const getHostname = (url: string) => {
const parser = document.createElement('a');
parser.href = url;
return parser.hostname;
};
const domParser = new DOMParser();
const handleIframeUrl = (html: string, url: string, providerName: string) => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
const startTime = new URL(url).searchParams.get('t');
if (iframe) {
const iframeUrl = new URL(iframe.src);
iframeUrl.searchParams.set('autoplay', '1');
iframeUrl.searchParams.set('auto_play', '1');
if (startTime && providerName === 'YouTube')
iframeUrl.searchParams.set('start', startTime);
iframe.src = iframeUrl.href;
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return document.querySelector('body')?.innerHTML ?? '';
}
return html;
};
interface CardProps {
card: CardType | null;
sensitive?: boolean;
}
const CardVideo: React.FC<Pick<CardProps, 'card'>> = ({ card }) => (
<div
className='status-card__image status-card-video'
dangerouslySetInnerHTML={{
__html: card
? handleIframeUrl(
card.get('html'),
card.get('url'),
card.get('provider_name'),
)
: '',
}}
style={{ aspectRatio: '16 / 9' }}
/>
);
const Card: React.FC<CardProps> = ({ card, sensitive }) => {
const [previewLoaded, setPreviewLoaded] = useState(false);
const [embedded, setEmbedded] = useState(false);
const [revealed, setRevealed] = useState(!sensitive);
const handleEmbedClick = useCallback(() => {
setEmbedded(true);
}, []);
const handleExternalLinkClick = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
}, []);
const handleImageLoad = useCallback(() => {
setPreviewLoaded(true);
}, []);
const handleReveal = useCallback((e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
setRevealed(true);
}, []);
const spoilerButtonId = useId();
if (card === null) {
return null;
}
const provider =
card.get('provider_name').length === 0
? decodeIDNA(getHostname(card.get('url')))
: card.get('provider_name');
const interactive = card.get('type') === 'video';
const language = card.get('language') || '';
const hasImage = (card.get('image')?.length ?? 0) > 0;
const largeImage =
(hasImage && card.get('width') > card.get('height')) || interactive;
const showAuthor = !!card.getIn(['authors', 0, 'accountId']);
const description = (
<div className='status-card__content' dir='auto'>
<span className='status-card__host'>
<span lang={language}>{provider}</span>
{card.get('published_at') && (
<>
{' '}
· <RelativeTimestamp timestamp={card.get('published_at')} />
</>
)}
</span>
<strong
className='status-card__title'
title={card.get('title')}
lang={language}
>
{card.get('title')}
</strong>
{!showAuthor &&
(card.get('author_name').length > 0 ? (
<span className='status-card__author'>
<FormattedMessage
id='link_preview.author'
defaultMessage='By {name}'
values={{ name: <strong>{card.get('author_name')}</strong> }}
/>
</span>
) : (
<span className='status-card__description' lang={language}>
{card.get('description')}
</span>
))}
</div>
);
const thumbnailStyle: React.CSSProperties = {
visibility: revealed ? undefined : 'hidden',
aspectRatio: '1',
};
if (largeImage && card.get('type') === 'video') {
thumbnailStyle.aspectRatio = `16 / 9`;
} else if (largeImage) {
thumbnailStyle.aspectRatio = '1.91 / 1';
}
let embed;
const canvas = (
<Blurhash
className={classNames('status-card__image-preview', {
'status-card__image-preview--hidden': revealed && previewLoaded,
})}
hash={card.get('blurhash')}
dummy={!useBlurhash}
/>
);
const thumbnailDescription = card.get('image_description');
const thumbnail = (
<img
src={card.get('image') ?? undefined}
alt={thumbnailDescription}
title={thumbnailDescription}
lang={language}
style={thumbnailStyle}
onLoad={handleImageLoad}
className='status-card__image-image'
/>
);
const spoilerButton = (
<div
className={classNames('spoiler-button', {
'spoiler-button--minified': revealed,
})}
id={spoilerButtonId}
>
<button
type='button'
onClick={handleReveal}
className='spoiler-button__overlay'
>
<span className='spoiler-button__overlay__label'>
<FormattedMessage
id='status.sensitive_warning'
defaultMessage='Sensitive content'
/>
<span className='spoiler-button__overlay__action'>
<FormattedMessage
id='status.media.show'
defaultMessage='Click to show'
/>
</span>
</span>
</button>
</div>
);
if (interactive) {
if (embedded) {
embed = <CardVideo card={card} />;
} else {
embed = (
<div className='status-card__image'>
{canvas}
{thumbnail}
{revealed ? (
<div
className='status-card__actions'
onClick={handleEmbedClick}
role='none'
>
<div>
<button type='button' onClick={handleEmbedClick}>
<Icon id='play' icon={PlayArrowIcon} />
</button>
<a
href={card.get('url')}
onClick={handleExternalLinkClick}
target='_blank'
rel='noopener'
>
<Icon id='external-link' icon={OpenInNewIcon} />
</a>
</div>
</div>
) : (
spoilerButton
)}
</div>
);
}
return (
<div className={classNames('status-card', { expanded: largeImage })}>
{embed}
<a
href={card.get('url')}
target='_blank'
rel='noopener'
onClick={revealed ? undefined : handleReveal}
aria-describedby={revealed ? undefined : spoilerButtonId}
>
{description}
</a>
</div>
);
} else if (card.get('image')) {
embed = (
<div className='status-card__image'>
{canvas}
{thumbnail}
</div>
);
} else {
embed = (
<div className='status-card__image'>
<Icon id='file-text' icon={DescriptionIcon} />
</div>
);
}
return (
<>
<a
href={card.get('url')}
className={classNames('status-card', {
expanded: largeImage,
bottomless: showAuthor,
})}
target='_blank'
rel='noopener'
>
{embed}
{description}
</a>
{showAuthor && (
<MoreFromAuthor
accountId={card.getIn(['authors', 0, 'accountId']) as string}
/>
)}
</>
);
};
// eslint-disable-next-line import/no-default-export
export default Card;
app/javascript/mastodon/features/status/components/detailed_status.tsx
+1 -1
View File
@@ -262,8 +262,8 @@ export const DetailedStatus: React.FC<{
} else if (status.get('card') && !status.get('quote')) {
media = (
<Card
key={`${status.get('id')}-${status.get('edited_at')}`}
sensitive={status.get('sensitive')}
onOpenMedia={onOpenMedia}
card={status.get('card')}
/>
);
app/javascript/mastodon/features/ui/components/bundle.jsx
+5 -17
View File
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import { PureComponent } from 'react';
const emptyComponent = () => null;
const noop = () => { };
class Bundle extends PureComponent {
@@ -12,18 +11,12 @@ class Bundle extends PureComponent {
error: PropTypes.func,
children: PropTypes.func.isRequired,
renderDelay: PropTypes.number,
onFetch: PropTypes.func,
onFetchSuccess: PropTypes.func,
onFetchFail: PropTypes.func,
};
static defaultProps = {
loading: emptyComponent,
error: emptyComponent,
renderDelay: 0,
onFetch: noop,
onFetchSuccess: noop,
onFetchFail: noop,
};
static cache = new Map;
@@ -33,13 +26,13 @@ class Bundle extends PureComponent {
forceRender: false,
};
UNSAFE_componentWillMount() {
componentDidMount() {
this.load(this.props);
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.fetchComponent !== this.props.fetchComponent) {
this.load(nextProps);
componentDidUpdate(prevProps) {
if (prevProps.fetchComponent !== this.props.fetchComponent) {
this.load(this.props);
}
}
@@ -50,7 +43,7 @@ class Bundle extends PureComponent {
}
load = (props) => {
const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
const { fetchComponent, renderDelay } = props || this.props;
const cachedMod = Bundle.cache.get(fetchComponent);
if (fetchComponent === undefined) {
@@ -58,11 +51,8 @@ class Bundle extends PureComponent {
return Promise.resolve();
}
onFetch();
if (cachedMod) {
this.setState({ mod: cachedMod.default });
onFetchSuccess();
return Promise.resolve();
}
@@ -77,11 +67,9 @@ class Bundle extends PureComponent {
.then((mod) => {
Bundle.cache.set(fetchComponent, mod);
this.setState({ mod: mod.default });
onFetchSuccess();
})
.catch((error) => {
this.setState({ mod: null });
onFetchFail(error);
});
};
app/javascript/mastodon/features/ui/components/columns_area.jsx
+3 -3
View File
@@ -5,7 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { scrollRight } from '../../../scroll';
import BundleContainer from '../containers/bundle_container';
import {
Compose,
Notifications,
@@ -21,6 +20,7 @@ import {
} from '../util/async-components';
import { useColumnsContext } from '../util/columns_context';
import Bundle from './bundle';
import BundleColumnError from './bundle_column_error';
import { ColumnLoading } from './column_loading';
import { ComposePanel, RedirectToMobileComposeIfNeeded } from './compose_panel';
@@ -145,9 +145,9 @@ export default class ColumnsArea extends ImmutablePureComponent {
const other = params && params.other ? params.other : {};
return (
<BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
<Bundle key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
{SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn {...other} />}
</BundleContainer>
</Bundle>
);
})}
app/javascript/mastodon/features/ui/components/modal_root.jsx
+3 -4
View File
@@ -21,11 +21,10 @@ import {
AnnualReportModal,
} from 'mastodon/features/ui/util/async-components';
import BundleContainer from '../containers/bundle_container';
import { ActionsModal } from './actions_modal';
import AudioModal from './audio_modal';
import { BoostModal } from './boost_modal';
import Bundle from './bundle';
import {
ConfirmationModal,
ConfirmDeleteStatusModal,
@@ -136,11 +135,11 @@ export default class ModalRoot extends PureComponent {
<Base backgroundColor={backgroundColor} onClose={this.handleClose} ignoreFocus={ignoreFocus}>
{visible && (
<>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
<Bundle key={type} fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => {
return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />;
}}
</BundleContainer>
</Bundle>
<Helmet>
<meta name='robots' content='noindex' />
app/javascript/mastodon/features/ui/containers/bundle_container.js
-18
View File
@@ -1,18 +0,0 @@
import { connect } from 'react-redux';
import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
import Bundle from '../components/bundle';
const mapDispatchToProps = dispatch => ({
onFetch () {
dispatch(fetchBundleRequest());
},
onFetchSuccess () {
dispatch(fetchBundleSuccess());
},
onFetchFail (error) {
dispatch(fetchBundleFail(error));
},
});
export default connect(null, mapDispatchToProps)(Bundle);
app/javascript/mastodon/features/ui/index.jsx
+1 -1
View File
@@ -108,7 +108,7 @@ class SwitchingColumnsArea extends PureComponent {
forceOnboarding: PropTypes.bool,
};
UNSAFE_componentWillMount () {
componentDidMount () {
document.body.classList.toggle('layout-single-column', this.props.singleColumn);
document.body.classList.toggle('layout-multiple-columns', !this.props.singleColumn);
}
app/javascript/mastodon/features/ui/util/react_router_helpers.jsx
+3 -3
View File
@@ -5,9 +5,9 @@ import { Switch, Route, useLocation } from 'react-router-dom';
import StackTrace from 'stacktrace-js';
import Bundle from '../components/bundle';
import BundleColumnError from '../components/bundle_column_error';
import { ColumnLoading } from '../components/column_loading';
import BundleContainer from '../containers/bundle_container';
// Small wrapper to pass multiColumn to the route components
export const WrappedSwitch = ({ multiColumn, children }) => {
@@ -80,9 +80,9 @@ export class WrappedRoute extends Component {
}
return (
<BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
<Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
{Component => <Component params={match.params} multiColumn={multiColumn} {...componentParams}>{content}</Component>}
</BundleContainer>
</Bundle>
);
};