From 1f0341aa2b3eeeba69f5a9afc6b49f213cf5585b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 17 Mar 2022 20:17:28 -0500 Subject: [PATCH 1/2] Upgrade react-router-dom to v5.3 --- app/soapbox/components/column_back_button.js | 13 ++-- app/soapbox/components/column_header.js | 13 ++-- app/soapbox/components/dropdown_menu.js | 19 +++-- app/soapbox/components/filter_bar.js | 13 ++-- app/soapbox/components/modal_root.js | 9 ++- app/soapbox/components/permalink.js | 13 ++-- app/soapbox/components/primary_navigation.js | 4 -- app/soapbox/components/scrollable_list.js | 9 ++- app/soapbox/components/status.js | 25 +++---- app/soapbox/components/status_action_bar.js | 27 ++++--- app/soapbox/components/status_content.js | 17 +++-- app/soapbox/components/sub_navigation.js | 11 ++- .../account_timeline/components/header.js | 15 ++-- .../account_timeline/components/moved_note.js | 5 -- .../components/registration_form.js | 13 ++-- app/soapbox/features/bookmarks/index.js | 4 -- .../features/chats/components/chat_panes.js | 9 ++- app/soapbox/features/chats/index.js | 11 ++- .../features/community_timeline/index.js | 4 -- .../compose/components/compose_form.js | 11 ++- .../compose/components/reply_indicator.js | 4 -- .../features/compose/components/search.js | 12 ++-- .../features/compose/components/upload.js | 10 ++- .../conversations/components/conversation.js | 14 ++-- .../features/developers/developers_menu.js | 10 ++- .../features/follow_recommendations/index.js | 12 ++-- app/soapbox/features/groups/create/index.js | 9 ++- app/soapbox/features/groups/edit/index.js | 11 ++- .../groups/timeline/components/header.js | 4 -- app/soapbox/features/groups/timeline/index.js | 4 -- app/soapbox/features/list_timeline/index.js | 9 ++- .../notifications/components/notification.js | 13 ++-- .../public_layout/components/header.js | 4 -- app/soapbox/features/public_timeline/index.js | 4 -- .../components/pinned_hosts_picker.js | 4 -- app/soapbox/features/remote_timeline/index.js | 9 ++- .../components/scheduled_status_action_bar.js | 4 -- .../features/scheduled_statuses/index.js | 4 -- app/soapbox/features/security/index.js | 8 +-- app/soapbox/features/security/mfa_form.js | 33 ++++----- .../features/status/components/action_bar.js | 19 +++-- .../status/components/detailed_status.js | 4 -- .../status/components/quoted_status.js | 13 ++-- app/soapbox/features/status/index.js | 21 +++--- .../features/ui/components/birthdays_modal.js | 9 ++- .../features/ui/components/boost_modal.js | 12 ++-- .../features/ui/components/media_modal.js | 10 ++- .../features/ui/components/reblogs_modal.js | 9 ++- .../features/ui/components/tabs_bar.js | 7 +- .../features/ui/components/video_modal.js | 7 +- app/soapbox/features/ui/index.js | 31 ++++---- package.json | 2 +- yarn.lock | 70 +++++++++++-------- 53 files changed, 269 insertions(+), 372 deletions(-) diff --git a/app/soapbox/components/column_back_button.js b/app/soapbox/components/column_back_button.js index 40840f8ad..75d526992 100644 --- a/app/soapbox/components/column_back_button.js +++ b/app/soapbox/components/column_back_button.js @@ -1,26 +1,25 @@ import PropTypes from 'prop-types'; import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { withRouter } from 'react-router-dom'; import Icon from 'soapbox/components/icon'; -export default class ColumnBackButton extends React.PureComponent { +export default @withRouter +class ColumnBackButton extends React.PureComponent { static propTypes = { to: PropTypes.string, - }; - - static contextTypes = { - router: PropTypes.object, + history: PropTypes.object, }; handleClick = () => { const { to } = this.props; if (window.history?.length === 1) { - this.context.router.history.push(to ? to : '/'); + this.props.history.push(to ? to : '/'); } else { - this.context.router.history.goBack(); + this.props.history.goBack(); } } diff --git a/app/soapbox/components/column_header.js b/app/soapbox/components/column_header.js index c13113db7..c5fa73e5d 100644 --- a/app/soapbox/components/column_header.js +++ b/app/soapbox/components/column_header.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { withRouter } from 'react-router-dom'; // import classNames from 'classnames'; // import { injectIntl, defineMessages } from 'react-intl'; @@ -13,11 +14,8 @@ import SubNavigation from 'soapbox/components/sub_navigation'; // hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, // }); -export default class ColumnHeader extends React.PureComponent { - - static contextTypes = { - router: PropTypes.object, - }; +export default @withRouter +class ColumnHeader extends React.PureComponent { static propTypes = { // intl: PropTypes.object.isRequired, @@ -26,6 +24,7 @@ export default class ColumnHeader extends React.PureComponent { active: PropTypes.bool, extraButton: PropTypes.node, children: PropTypes.node, + history: PropTypes.object, }; state = { @@ -35,9 +34,9 @@ export default class ColumnHeader extends React.PureComponent { historyBack = () => { if (window.history?.length === 1) { - this.context.router.history.push('/'); + this.props.history.push('/'); } else { - this.context.router.history.goBack(); + this.props.history.goBack(); } } diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js index 486aa0d58..685eff717 100644 --- a/app/soapbox/components/dropdown_menu.js +++ b/app/soapbox/components/dropdown_menu.js @@ -5,6 +5,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import spring from 'react-motion/lib/spring'; import Overlay from 'react-overlays/lib/Overlay'; +import { withRouter } from 'react-router-dom'; import Icon from 'soapbox/components/icon'; @@ -15,12 +16,9 @@ import IconButton from './icon_button'; const listenerOptions = supportsPassiveEvents ? { passive: true } : false; let id = 0; +@withRouter class DropdownMenu extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { items: PropTypes.array.isRequired, onClose: PropTypes.func.isRequired, @@ -29,6 +27,7 @@ class DropdownMenu extends React.PureComponent { arrowOffsetLeft: PropTypes.string, arrowOffsetTop: PropTypes.string, openedViaKeyboard: PropTypes.bool, + history: PropTypes.object, }; static defaultProps = { @@ -124,7 +123,7 @@ class DropdownMenu extends React.PureComponent { action(e); } else if (to) { e.preventDefault(); - this.context.router.history.push(to); + this.props.history.push(to); } } @@ -196,11 +195,8 @@ class DropdownMenu extends React.PureComponent { } -export default class Dropdown extends React.PureComponent { - - static contextTypes = { - router: PropTypes.object, - }; +export default @withRouter +class Dropdown extends React.PureComponent { static propTypes = { icon: PropTypes.string, @@ -221,6 +217,7 @@ export default class Dropdown extends React.PureComponent { openedViaKeyboard: PropTypes.bool, text: PropTypes.string, onShiftClick: PropTypes.func, + history: PropTypes.object, }; static defaultProps = { @@ -292,7 +289,7 @@ export default class Dropdown extends React.PureComponent { action(); } else if (to) { e.preventDefault(); - this.context.router.history.push(to); + this.props.history.push(to); } } diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js index 172bbf420..49fdb58ca 100644 --- a/app/soapbox/components/filter_bar.js +++ b/app/soapbox/components/filter_bar.js @@ -2,17 +2,16 @@ import classNames from 'classnames'; import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; +import { withRouter } from 'react-router-dom'; -export default class FilterBar extends React.PureComponent { - - static contextTypes = { - router: PropTypes.object, - }; +export default @withRouter +class FilterBar extends React.PureComponent { static propTypes = { items: PropTypes.array.isRequired, active: PropTypes.string, className: PropTypes.string, + history: PropTypes.object, }; state = { @@ -88,7 +87,7 @@ export default class FilterBar extends React.PureComponent { action(e); } else if (to) { e.preventDefault(); - this.context.router.history.push(to); + this.props.history.push(to); } } @@ -153,4 +152,4 @@ export default class FilterBar extends React.PureComponent { ); } -} \ No newline at end of file +} diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js index 599d090f6..921a763a1 100644 --- a/app/soapbox/components/modal_root.js +++ b/app/soapbox/components/modal_root.js @@ -4,6 +4,7 @@ import React from 'react'; import 'wicg-inert'; import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { cancelReplyCompose } from '../actions/compose'; import { openModal, closeModal } from '../actions/modals'; @@ -40,6 +41,7 @@ const mapDispatchToProps = (dispatch) => ({ }, }); +@withRouter class ModalRoot extends React.PureComponent { static propTypes = { @@ -52,10 +54,7 @@ class ModalRoot extends React.PureComponent { hasComposeContent: PropTypes.bool, type: PropTypes.string, onCancel: PropTypes.func, - }; - - static contextTypes = { - router: PropTypes.object, + history: PropTypes.object, }; state = { @@ -115,7 +114,7 @@ class ModalRoot extends React.PureComponent { componentDidMount() { window.addEventListener('keyup', this.handleKeyUp, false); window.addEventListener('keydown', this.handleKeyDown, false); - this.history = this.context.router ? this.context.router.history : createBrowserHistory(); + this.history = this.props.history || createBrowserHistory(); } componentDidUpdate(prevProps) { diff --git a/app/soapbox/components/permalink.js b/app/soapbox/components/permalink.js index fffbd5471..5bae087ac 100644 --- a/app/soapbox/components/permalink.js +++ b/app/soapbox/components/permalink.js @@ -1,11 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { withRouter } from 'react-router-dom'; -export default class Permalink extends React.PureComponent { - - static contextTypes = { - router: PropTypes.object, - }; +export default @withRouter +class Permalink extends React.PureComponent { static propTypes = { className: PropTypes.string, @@ -13,6 +11,7 @@ export default class Permalink extends React.PureComponent { to: PropTypes.string.isRequired, children: PropTypes.node, onInterceptClick: PropTypes.func, + history: PropTypes.object, }; handleClick = e => { @@ -21,9 +20,9 @@ export default class Permalink extends React.PureComponent { return; } - if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) { + if (this.props.history && e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); - this.context.router.history.push(this.props.to); + this.props.history.push(this.props.to); } } diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js index 924c914aa..5f33c96e9 100644 --- a/app/soapbox/components/primary_navigation.js +++ b/app/soapbox/components/primary_navigation.js @@ -38,10 +38,6 @@ const mapStateToProps = state => { export default @withRouter @connect(mapStateToProps) class PrimaryNavigation extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, logo: PropTypes.string, diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js index 6b406c706..86a44f597 100644 --- a/app/soapbox/components/scrollable_list.js +++ b/app/soapbox/components/scrollable_list.js @@ -4,6 +4,7 @@ import { throttle } from 'lodash'; import PropTypes from 'prop-types'; import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { getSettings } from 'soapbox/actions/settings'; import PullToRefresh from 'soapbox/components/pull_to_refresh'; @@ -26,12 +27,9 @@ const mapStateToProps = state => { }; export default @connect(mapStateToProps, null, null, { forwardRef: true }) +@withRouter class ScrollableList extends PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { scrollKey: PropTypes.string.isRequired, onLoadMore: PropTypes.func, @@ -50,6 +48,7 @@ class ScrollableList extends PureComponent { autoload: PropTypes.bool, onRefresh: PropTypes.func, className: PropTypes.string, + location: PropTypes.object, }; state = { @@ -304,7 +303,7 @@ class ScrollableList extends PureComponent { index={index} listLength={childrenCount} intersectionObserverWrapper={this.intersectionObserverWrapper} - saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null} + saveHeightKey={trackScroll ? `${this.props.location.key}:${scrollKey}` : null} > {React.cloneElement(child, { getScrollPosition: this.getScrollPosition, diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index b1cfee657..bd57fcd2d 100644 --- a/app/soapbox/components/status.js +++ b/app/soapbox/components/status.js @@ -5,7 +5,7 @@ import { HotKeys } from 'react-hotkeys'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { injectIntl, FormattedMessage } from 'react-intl'; -import { Link, NavLink } from 'react-router-dom'; +import { Link, NavLink, withRouter } from 'react-router-dom'; import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper'; import Icon from 'soapbox/components/icon'; @@ -56,13 +56,9 @@ export const defaultMediaVisibility = (status, displayMedia) => { return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all'); }; -export default @injectIntl +export default @injectIntl @withRouter class Status extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, @@ -98,6 +94,7 @@ class Status extends ImmutablePureComponent { displayMedia: PropTypes.string, allowedEmoji: ImmutablePropTypes.list, focusable: PropTypes.bool, + history: PropTypes.object, }; static defaultProps = { @@ -181,20 +178,20 @@ class Status extends ImmutablePureComponent { return; } - if (!this.context.router) { + if (!this.props.history) { return; } - this.context.router.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`); + this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`); } handleExpandClick = (e) => { if (e.button === 0) { - if (!this.context.router) { + if (!this.props.history) { return; } - this.context.router.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`); + this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`); } } @@ -239,7 +236,7 @@ class Status extends ImmutablePureComponent { handleHotkeyReply = e => { e.preventDefault(); - this.props.onReply(this._properStatus(), this.context.router.history); + this.props.onReply(this._properStatus(), this.props.history); } handleHotkeyFavourite = () => { @@ -252,15 +249,15 @@ class Status extends ImmutablePureComponent { handleHotkeyMention = e => { e.preventDefault(); - this.props.onMention(this._properStatus().get('account'), this.context.router.history); + this.props.onMention(this._properStatus().get('account'), this.props.history); } handleHotkeyOpen = () => { - this.context.router.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`); + this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`); } handleHotkeyOpenProfile = () => { - this.context.router.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}`); + this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}`); } handleHotkeyMoveUp = e => { diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js index 1770d7cc2..c7567b642 100644 --- a/app/soapbox/components/status_action_bar.js +++ b/app/soapbox/components/status_action_bar.js @@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts'; import EmojiSelector from 'soapbox/components/emoji_selector'; @@ -67,10 +67,6 @@ const messages = defineMessages({ class StatusActionBar extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map.isRequired, onOpenUnauthorizedModal: PropTypes.func.isRequired, @@ -104,6 +100,7 @@ class StatusActionBar extends ImmutablePureComponent { emojiSelectorFocused: PropTypes.bool, handleEmojiSelectorUnfocus: PropTypes.func.isRequired, features: PropTypes.object.isRequired, + history: PropTypes.object, }; static defaultProps = { @@ -125,7 +122,7 @@ class StatusActionBar extends ImmutablePureComponent { handleReplyClick = () => { const { me, onReply, onOpenUnauthorizedModal, status } = this.props; if (me) { - onReply(status, this.context.router.history); + onReply(status, this.props.history); } else { onOpenUnauthorizedModal('REPLY'); } @@ -208,18 +205,18 @@ class StatusActionBar extends ImmutablePureComponent { handleQuoteClick = () => { const { me, onQuote, onOpenUnauthorizedModal, status } = this.props; if (me) { - onQuote(status, this.context.router.history); + onQuote(status, this.props.history); } else { onOpenUnauthorizedModal('REBLOG'); } } handleDeleteClick = () => { - this.props.onDelete(this.props.status, this.context.router.history); + this.props.onDelete(this.props.status, this.props.history); } handleRedraftClick = () => { - this.props.onDelete(this.props.status, this.context.router.history, true); + this.props.onDelete(this.props.status, this.props.history, true); } handlePinClick = () => { @@ -227,15 +224,15 @@ class StatusActionBar extends ImmutablePureComponent { } handleMentionClick = () => { - this.props.onMention(this.props.status.get('account'), this.context.router.history); + this.props.onMention(this.props.status.get('account'), this.props.history); } handleDirectClick = () => { - this.props.onDirect(this.props.status.get('account'), this.context.router.history); + this.props.onDirect(this.props.status.get('account'), this.props.history); } handleChatClick = () => { - this.props.onChat(this.props.status.get('account'), this.context.router.history); + this.props.onChat(this.props.status.get('account'), this.props.history); } handleMuteClick = () => { @@ -247,7 +244,7 @@ class StatusActionBar extends ImmutablePureComponent { } handleOpen = () => { - this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`); + this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`); } handleEmbed = () => { @@ -679,6 +676,6 @@ const mapDispatchToProps = (dispatch, { status }) => ({ }, }); -export default injectIntl( +export default withRouter(injectIntl( connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }, - )(StatusActionBar)); + )(StatusActionBar))); diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index 717071a5c..be07ed28d 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -4,6 +4,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import Icon from 'soapbox/components/icon'; @@ -23,12 +24,9 @@ const mapStateToProps = state => ({ }); export default @connect(mapStateToProps) +@withRouter class StatusContent extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map.isRequired, reblogContent: PropTypes.string, @@ -37,6 +35,7 @@ class StatusContent extends React.PureComponent { onClick: PropTypes.func, collapsable: PropTypes.bool, greentext: PropTypes.bool, + history: PropTypes.object, }; state = { @@ -118,18 +117,18 @@ class StatusContent extends React.PureComponent { } onMentionClick = (mention, e) => { - if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) { + if (this.props.history && e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); - this.context.router.history.push(`/@${mention.get('acct')}`); + this.props.history.push(`/@${mention.get('acct')}`); } } onHashtagClick = (hashtag, e) => { hashtag = hashtag.replace(/^#/, '').toLowerCase(); - if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) { + if (this.props.history && e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); - this.context.router.history.push(`/tags/${hashtag}`); + this.props.history.push(`/tags/${hashtag}`); } } @@ -202,7 +201,7 @@ class StatusContent extends React.PureComponent { const spoilerContent = { __html: status.get('spoilerHtml') }; const directionStyle = { direction: 'ltr' }; const classNames = classnames('status__content', { - 'status__content--with-action': this.props.onClick && this.context.router, + 'status__content--with-action': this.props.onClick && this.props.history, 'status__content--with-spoiler': status.get('spoiler_text').length > 0, 'status__content--collapsed': this.state.collapsed === true, 'status__content--big': onlyEmoji, diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js index 0f9092760..879776419 100644 --- a/app/soapbox/components/sub_navigation.js +++ b/app/soapbox/components/sub_navigation.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { injectIntl, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { openModal } from 'soapbox/actions/modals'; import Helmet from 'soapbox/components/helmet'; @@ -25,6 +26,7 @@ const mapDispatchToProps = (dispatch, { settings: Settings }) => { export default @connect(undefined, mapDispatchToProps) @injectIntl +@withRouter class SubNavigation extends React.PureComponent { static propTypes = { @@ -32,10 +34,7 @@ class SubNavigation extends React.PureComponent { message: PropTypes.string, settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), onOpenSettings: PropTypes.func.isRequired, - } - - static contextTypes = { - router: PropTypes.object.isRequired, + history: PropTypes.object, } state = { @@ -44,9 +43,9 @@ class SubNavigation extends React.PureComponent { handleBackClick = () => { if (window.history && window.history.length === 1) { - this.context.router.history.push('/'); + this.props.history.push('/'); } else { - this.context.router.history.goBack(); + this.props.history.goBack(); } } diff --git a/app/soapbox/features/account_timeline/components/header.js b/app/soapbox/features/account_timeline/components/header.js index 588697943..a86c7f788 100644 --- a/app/soapbox/features/account_timeline/components/header.js +++ b/app/soapbox/features/account_timeline/components/header.js @@ -2,12 +2,14 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { withRouter } from 'react-router-dom'; import InnerHeader from '../../account/components/header'; import MovedNote from './moved_note'; -export default class Header extends ImmutablePureComponent { +export default @withRouter +class Header extends ImmutablePureComponent { static propTypes = { account: ImmutablePropTypes.map, @@ -25,10 +27,7 @@ export default class Header extends ImmutablePureComponent { onEndorseToggle: PropTypes.func.isRequired, onAddToList: PropTypes.func.isRequired, username: PropTypes.string, - }; - - static contextTypes = { - router: PropTypes.object, + history: PropTypes.object, }; handleFollow = () => { @@ -40,11 +39,11 @@ export default class Header extends ImmutablePureComponent { } handleMention = () => { - this.props.onMention(this.props.account, this.context.router.history); + this.props.onMention(this.props.account, this.props.history); } handleDirect = () => { - this.props.onDirect(this.props.account, this.context.router.history); + this.props.onDirect(this.props.account, this.props.history); } handleReport = () => { @@ -84,7 +83,7 @@ export default class Header extends ImmutablePureComponent { } handleChat = () => { - this.props.onChat(this.props.account, this.context.router.history); + this.props.onChat(this.props.account, this.props.history); } handleEndorseToggle = () => { diff --git a/app/soapbox/features/account_timeline/components/moved_note.js b/app/soapbox/features/account_timeline/components/moved_note.js index 5963dbeea..fb2f000e8 100644 --- a/app/soapbox/features/account_timeline/components/moved_note.js +++ b/app/soapbox/features/account_timeline/components/moved_note.js @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -12,10 +11,6 @@ import DisplayName from '../../../components/display_name'; export default class MovedNote extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { from: ImmutablePropTypes.map.isRequired, to: ImmutablePropTypes.map.isRequired, diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index 8a6f7353f..87de069c7 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/app/soapbox/features/auth_login/components/registration_form.js @@ -7,7 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { v4 as uuidv4 } from 'uuid'; import { accountLookup } from 'soapbox/actions/accounts'; @@ -52,6 +52,7 @@ const mapStateToProps = (state, props) => ({ export default @connect(mapStateToProps) @injectIntl +@withRouter class RegistrationForm extends ImmutablePureComponent { static propTypes = { @@ -64,12 +65,9 @@ class RegistrationForm extends ImmutablePureComponent { supportsAccountLookup: PropTypes.bool, inviteToken: PropTypes.string, birthdayRequired: PropTypes.bool, + history: PropTypes.object, } - static contextTypes = { - router: PropTypes.object, - }; - state = { captchaLoading: true, submissionLoading: false, @@ -168,14 +166,13 @@ class RegistrationForm extends ImmutablePureComponent { } postRegisterAction = ({ access_token }) => { - const { dispatch, needsConfirmation, needsApproval } = this.props; - const { router } = this.context; + const { dispatch, needsConfirmation, needsApproval, history } = this.props; if (needsConfirmation || needsApproval) { return this.launchModal(); } else { return dispatch(verifyCredentials(access_token)).then(() => { - router.history.push('/'); + history.push('/'); }); } } diff --git a/app/soapbox/features/bookmarks/index.js b/app/soapbox/features/bookmarks/index.js index 0d25bb2aa..f97d0554a 100644 --- a/app/soapbox/features/bookmarks/index.js +++ b/app/soapbox/features/bookmarks/index.js @@ -26,10 +26,6 @@ export default @connect(mapStateToProps) @injectIntl class Bookmarks extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, shouldUpdateScroll: PropTypes.func, diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js index f70e71dc6..900873e64 100644 --- a/app/soapbox/features/chats/components/chat_panes.js +++ b/app/soapbox/features/chats/components/chat_panes.js @@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { createSelector } from 'reselect'; import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats'; @@ -52,17 +53,15 @@ const makeMapStateToProps = () => { export default @connect(makeMapStateToProps) @injectIntl +@withRouter class ChatPanes extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, mainWindowState: PropTypes.string, panes: ImmutablePropTypes.list, + history: PropTypes.object, } handleClickChat = (chat) => { @@ -70,7 +69,7 @@ class ChatPanes extends ImmutablePureComponent { } handleSuggestion = accountId => { - this.props.dispatch(launchChat(accountId, this.context.router.history)); + this.props.dispatch(launchChat(accountId, this.props.history)); } handleMainWindowToggle = () => { diff --git a/app/soapbox/features/chats/index.js b/app/soapbox/features/chats/index.js index 06b7f9802..5a23d3194 100644 --- a/app/soapbox/features/chats/index.js +++ b/app/soapbox/features/chats/index.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { fetchChats, launchChat } from 'soapbox/actions/chats'; import AccountSearch from 'soapbox/components/account_search'; @@ -19,23 +20,21 @@ const messages = defineMessages({ export default @connect() @injectIntl +@withRouter class ChatIndex extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, + history: PropTypes.object, }; handleSuggestion = accountId => { - this.props.dispatch(launchChat(accountId, this.context.router.history, true)); + this.props.dispatch(launchChat(accountId, this.props.history, true)); } handleClickChat = (chat) => { - this.context.router.history.push(`/chats/${chat.get('id')}`); + this.props.history.push(`/chats/${chat.get('id')}`); } handleRefresh = () => { diff --git a/app/soapbox/features/community_timeline/index.js b/app/soapbox/features/community_timeline/index.js index 46e75aa6e..dfc74ebb4 100644 --- a/app/soapbox/features/community_timeline/index.js +++ b/app/soapbox/features/community_timeline/index.js @@ -33,10 +33,6 @@ export default @connect(mapStateToProps) @injectIntl class CommunityTimeline extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index d6a743122..7317d0382 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -6,7 +6,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, FormattedMessage } from 'react-intl'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { length } from 'stringz'; import Icon from 'soapbox/components/icon'; @@ -45,16 +45,13 @@ const messages = defineMessages({ schedule: { id: 'compose_form.schedule', defaultMessage: 'Schedule' }, }); -export default class ComposeForm extends ImmutablePureComponent { +export default @withRouter +class ComposeForm extends ImmutablePureComponent { state = { composeFocused: false, } - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, text: PropTypes.string.isRequired, @@ -155,7 +152,7 @@ export default class ComposeForm extends ImmutablePureComponent { return; } - this.props.onSubmit(this.context.router ? this.context.router.history : null, this.props.group); + this.props.onSubmit(this.props.history ? this.props.history : null, this.props.group); } onSuggestionsClearRequested = () => { diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js index 3ea96f6b3..920398416 100644 --- a/app/soapbox/features/compose/components/reply_indicator.js +++ b/app/soapbox/features/compose/components/reply_indicator.js @@ -19,10 +19,6 @@ const messages = defineMessages({ export default @injectIntl class ReplyIndicator extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map, onCancel: PropTypes.func.isRequired, diff --git a/app/soapbox/features/compose/components/search.js b/app/soapbox/features/compose/components/search.js index 6389d0785..b605277d7 100644 --- a/app/soapbox/features/compose/components/search.js +++ b/app/soapbox/features/compose/components/search.js @@ -2,6 +2,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { defineMessages, injectIntl } from 'react-intl'; +import { withRouter } from 'react-router-dom'; import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input'; import Icon from 'soapbox/components/icon'; @@ -11,13 +12,9 @@ const messages = defineMessages({ action: { id: 'search.action', defaultMessage: 'Search for “{query}”' }, }); -export default @injectIntl +export default @injectIntl @withRouter class Search extends React.PureComponent { - static contextTypes = { - router: PropTypes.object.isRequired, - }; - static propTypes = { value: PropTypes.string.isRequired, submitted: PropTypes.bool, @@ -30,6 +27,7 @@ class Search extends React.PureComponent { autoFocus: PropTypes.bool, autosuggest: PropTypes.bool, intl: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, }; static defaultProps = { @@ -57,7 +55,7 @@ class Search extends React.PureComponent { this.props.onSubmit(); if (this.props.openInRoute) { - this.context.router.history.push('/search'); + this.props.history.push('/search'); } } @@ -83,7 +81,7 @@ class Search extends React.PureComponent { const { onSelected } = this.props; if (onSelected) { - onSelected(accountId, this.context.router.history); + onSelected(accountId, this.props.history); } } diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js index 062ea9262..6c3ef5638 100644 --- a/app/soapbox/features/compose/components/upload.js +++ b/app/soapbox/features/compose/components/upload.js @@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import spring from 'react-motion/lib/spring'; +import { withRouter } from 'react-router-dom'; import Blurhash from 'soapbox/components/blurhash'; import Icon from 'soapbox/components/icon'; @@ -51,13 +52,9 @@ const messages = defineMessages({ delete: { id: 'upload_form.undo', defaultMessage: 'Delete' }, }); -export default @injectIntl +export default @injectIntl @withRouter class Upload extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { media: ImmutablePropTypes.map.isRequired, intl: PropTypes.object.isRequired, @@ -65,6 +62,7 @@ class Upload extends ImmutablePureComponent { onDescriptionChange: PropTypes.func.isRequired, onOpenFocalPoint: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, }; state = { @@ -81,7 +79,7 @@ class Upload extends ImmutablePureComponent { handleSubmit = () => { this.handleInputBlur(); - this.props.onSubmit(this.context.router.history); + this.props.onSubmit(this.props.history); } handleUndoClick = e => { diff --git a/app/soapbox/features/conversations/components/conversation.js b/app/soapbox/features/conversations/components/conversation.js index 2c8782e8b..717949968 100644 --- a/app/soapbox/features/conversations/components/conversation.js +++ b/app/soapbox/features/conversations/components/conversation.js @@ -2,14 +2,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { withRouter } from 'react-router-dom'; import StatusContainer from '../../../containers/status_container'; -export default class Conversation extends ImmutablePureComponent { - - static contextTypes = { - router: PropTypes.object, - }; +export default @withRouter +class Conversation extends ImmutablePureComponent { static propTypes = { conversationId: PropTypes.string.isRequired, @@ -19,10 +17,11 @@ export default class Conversation extends ImmutablePureComponent { onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, markRead: PropTypes.func.isRequired, + history: PropTypes.object, }; handleClick = () => { - if (!this.context.router) { + if (!this.props.history) { return; } @@ -32,8 +31,7 @@ export default class Conversation extends ImmutablePureComponent { markRead(); } - // : TODO : - this.context.router.history.push(`/statuses/${lastStatusId}`); + this.props.history.push(`/statuses/${lastStatusId}`); } handleHotkeyMoveUp = () => { diff --git a/app/soapbox/features/developers/developers_menu.js b/app/soapbox/features/developers/developers_menu.js index a0031497e..afec34260 100644 --- a/app/soapbox/features/developers/developers_menu.js +++ b/app/soapbox/features/developers/developers_menu.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { changeSettingImmediate } from 'soapbox/actions/settings'; import snackbar from 'soapbox/actions/snackbar'; @@ -17,15 +17,13 @@ const messages = defineMessages({ export default @connect() @injectIntl +@withRouter class DevelopersMenu extends React.Component { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, + history: PropTypes.object, } leaveDevelopers = e => { @@ -34,7 +32,7 @@ class DevelopersMenu extends React.Component { dispatch(changeSettingImmediate(['isDeveloper'], false)); dispatch(snackbar.success(intl.formatMessage(messages.leave))); - this.context.router.history.push('/'); + this.props.history.push('/'); e.preventDefault(); } diff --git a/app/soapbox/features/follow_recommendations/index.js b/app/soapbox/features/follow_recommendations/index.js index 5941f1f97..2e9e3bcc3 100644 --- a/app/soapbox/features/follow_recommendations/index.js +++ b/app/soapbox/features/follow_recommendations/index.js @@ -1,20 +1,20 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { withRouter } from 'react-router-dom'; import Column from 'soapbox/features/ui/components/column'; import FollowRecommendationsContainer from './components/follow_recommendations_container'; -export default class FollowRecommendations extends React.Component { +export default @withRouter +class FollowRecommendations extends React.Component { - static contextTypes = { - router: PropTypes.object.isRequired, + static propTypes = { + history: PropTypes.object.isRequired, }; onDone = () => { - const { router } = this.context; - - router.history.push('/'); + this.props.history.push('/'); } render() { diff --git a/app/soapbox/features/groups/create/index.js b/app/soapbox/features/groups/create/index.js index 271ac8402..7da3e4c6a 100644 --- a/app/soapbox/features/groups/create/index.js +++ b/app/soapbox/features/groups/create/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { changeValue, submit, reset } from '../../../actions/group_editor'; @@ -31,12 +32,9 @@ const mapDispatchToProps = dispatch => ({ export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl +@withRouter class Create extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - } - static propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, @@ -48,6 +46,7 @@ class Create extends React.PureComponent { reset: PropTypes.func.isRequired, onDescriptionChange: PropTypes.func.isRequired, onCoverImageChange: PropTypes.func.isRequired, + history: PropTypes.object, }; constructor(props) { @@ -69,7 +68,7 @@ class Create extends React.PureComponent { handleSubmit = e => { e.preventDefault(); - this.props.onSubmit(this.context.router.history); + this.props.onSubmit(this.props.history); } render() { diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js index 16a691bd6..8b8dc2976 100644 --- a/app/soapbox/features/groups/edit/index.js +++ b/app/soapbox/features/groups/edit/index.js @@ -4,6 +4,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import MissingIndicator from 'soapbox/components/missing_indicator'; @@ -37,12 +38,9 @@ const mapDispatchToProps = dispatch => ({ export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl +@withRouter class Edit extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - } - static propTypes = { group: ImmutablePropTypes.map, title: PropTypes.string.isRequired, @@ -55,6 +53,7 @@ class Edit extends React.PureComponent { onDescriptionChange: PropTypes.func.isRequired, onCoverImageChange: PropTypes.func.isRequired, setUp: PropTypes.func.isRequired, + history: PropTypes.object, }; constructor(props) { @@ -82,11 +81,11 @@ class Edit extends React.PureComponent { handleSubmit = e => { e.preventDefault(); - this.props.onSubmit(this.context.router.history); + this.props.onSubmit(this.props.history); } handleClick = () => { - this.props.onSubmit(this.context.router.history); + this.props.onSubmit(this.props.history); } render() { diff --git a/app/soapbox/features/groups/timeline/components/header.js b/app/soapbox/features/groups/timeline/components/header.js index 1b1faa08f..ff0327c3e 100644 --- a/app/soapbox/features/groups/timeline/components/header.js +++ b/app/soapbox/features/groups/timeline/components/header.js @@ -25,10 +25,6 @@ class Header extends ImmutablePureComponent { toggleMembership: PropTypes.func.isRequired, }; - static contextTypes = { - router: PropTypes.object, - }; - toggle = () => { const { group, relationships, toggleMembership } = this.props; toggleMembership(group, relationships); diff --git a/app/soapbox/features/groups/timeline/index.js b/app/soapbox/features/groups/timeline/index.js index be58f51cd..e959adcab 100644 --- a/app/soapbox/features/groups/timeline/index.js +++ b/app/soapbox/features/groups/timeline/index.js @@ -28,10 +28,6 @@ export default @connect(mapStateToProps) @injectIntl class GroupTimeline extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, diff --git a/app/soapbox/features/list_timeline/index.js b/app/soapbox/features/list_timeline/index.js index 584b11d45..90ca0b901 100644 --- a/app/soapbox/features/list_timeline/index.js +++ b/app/soapbox/features/list_timeline/index.js @@ -3,6 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import Button from 'soapbox/components/button'; import Column from 'soapbox/features/ui/components/column'; @@ -28,18 +29,16 @@ const mapStateToProps = (state, props) => ({ export default @connect(mapStateToProps) @injectIntl +@withRouter class ListTimeline extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, // hasUnread: PropTypes.bool, list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]), intl: PropTypes.object.isRequired, + history: PropTypes.object, }; componentDidMount() { @@ -93,7 +92,7 @@ class ListTimeline extends React.PureComponent { confirm: intl.formatMessage(messages.deleteConfirm), onConfirm: () => { dispatch(deleteList(id)); - this.context.router.history.push('/lists'); + this.props.history.push('/lists'); }, })); } diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js index 9f1598e24..b3475e1b8 100644 --- a/app/soapbox/features/notifications/components/notification.js +++ b/app/soapbox/features/notifications/components/notification.js @@ -5,6 +5,7 @@ import { HotKeys } from 'react-hotkeys'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { injectIntl, FormattedMessage } from 'react-intl'; +import { withRouter } from 'react-router-dom'; import Icon from 'soapbox/components/icon'; import emojify from 'soapbox/features/emoji/emoji'; @@ -22,13 +23,9 @@ const notificationForScreenReader = (intl, message, timestamp) => { return output.join(', '); }; -export default @injectIntl +export default @injectIntl @withRouter class Notification extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { notification: ImmutablePropTypes.map.isRequired, hidden: PropTypes.bool, @@ -59,7 +56,7 @@ class Notification extends ImmutablePureComponent { const { notification } = this.props; if (notification.get('status')) { - this.context.router.history.push(`/@${notification.getIn(['account', 'acct'])}/posts/${notification.getIn(['status', 'id'])}`); + this.props.history.push(`/@${notification.getIn(['account', 'acct'])}/posts/${notification.getIn(['status', 'id'])}`); } else { this.handleOpenProfile(); } @@ -67,14 +64,14 @@ class Notification extends ImmutablePureComponent { handleOpenProfile = () => { const { notification } = this.props; - this.context.router.history.push(`/@${notification.getIn(['account', 'acct'])}`); + this.props.history.push(`/@${notification.getIn(['account', 'acct'])}`); } handleMention = e => { e.preventDefault(); const { notification, onMention } = this.props; - onMention(notification.get('account'), this.context.router.history); + onMention(notification.get('account'), this.props.history); } handleHotkeyFavourite = () => { diff --git a/app/soapbox/features/public_layout/components/header.js b/app/soapbox/features/public_layout/components/header.js index 2cb003b84..a5e7ee612 100644 --- a/app/soapbox/features/public_layout/components/header.js +++ b/app/soapbox/features/public_layout/components/header.js @@ -50,10 +50,6 @@ class Header extends ImmutablePureComponent { ); } - static contextTypes = { - router: PropTypes.object, - }; - handleSubmit = (event) => { const { dispatch, intl } = this.props; const { username, password } = this.getFormData(event.target); diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js index 224151b17..142862c59 100644 --- a/app/soapbox/features/public_timeline/index.js +++ b/app/soapbox/features/public_timeline/index.js @@ -41,10 +41,6 @@ export default @connect(mapStateToProps) @injectIntl class CommunityTimeline extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js index a5858de9e..f9cc609a2 100644 --- a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js +++ b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js @@ -19,10 +19,6 @@ const mapStateToProps = state => { class PinnedHostsPicker extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, pinnedHosts: ImmutablePropTypes.orderedSet, diff --git a/app/soapbox/features/remote_timeline/index.js b/app/soapbox/features/remote_timeline/index.js index d6b6ab2ef..75103c69b 100644 --- a/app/soapbox/features/remote_timeline/index.js +++ b/app/soapbox/features/remote_timeline/index.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { getSettings } from 'soapbox/actions/settings'; import IconButton from 'soapbox/components/icon_button'; @@ -35,12 +36,9 @@ const mapStateToProps = (state, props) => { export default @connect(mapStateToProps) @injectIntl +@withRouter class RemoteTimeline extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -49,6 +47,7 @@ class RemoteTimeline extends React.PureComponent { timelineId: PropTypes.string, instance: PropTypes.string.isRequired, pinned: PropTypes.bool, + history: PropTypes.object, }; componentDidMount() { @@ -75,7 +74,7 @@ class RemoteTimeline extends React.PureComponent { } handleCloseClick = e => { - this.context.router.history.push('/timeline/fediverse'); + this.props.history.push('/timeline/fediverse'); } handleLoadMore = maxId => { diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js index 2579cc338..0e1773901 100644 --- a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js +++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js @@ -47,10 +47,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ class ScheduledStatusActionBar extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map.isRequired, intl: PropTypes.object.isRequired, diff --git a/app/soapbox/features/scheduled_statuses/index.js b/app/soapbox/features/scheduled_statuses/index.js index 8b2fe3a56..314663f57 100644 --- a/app/soapbox/features/scheduled_statuses/index.js +++ b/app/soapbox/features/scheduled_statuses/index.js @@ -27,10 +27,6 @@ export default @connect(mapStateToProps) @injectIntl class ScheduledStatuses extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, statusIds: ImmutablePropTypes.orderedSet.isRequired, diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js index 887c16242..a65cc4b2d 100644 --- a/app/soapbox/features/security/index.js +++ b/app/soapbox/features/security/index.js @@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedDate } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { changeEmail, @@ -243,19 +244,16 @@ class ChangePasswordForm extends ImmutablePureComponent { @connect(mapStateToProps) @injectIntl +@withRouter class SetUpMfa extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, mfa: ImmutablePropTypes.map.isRequired, }; handleMfaClick = e => { - this.context.router.history.push('../auth/mfa'); + this.props.history.push('../auth/mfa'); } componentDidMount() { diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js index 072703b1a..0990874fa 100644 --- a/app/soapbox/features/security/mfa_form.js +++ b/app/soapbox/features/security/mfa_form.js @@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import snackbar from 'soapbox/actions/snackbar'; import Button from 'soapbox/components/button'; @@ -58,16 +59,14 @@ const mapStateToProps = state => ({ export default @connect(mapStateToProps) @injectIntl +@withRouter class MfaForm extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, mfa: ImmutablePropTypes.map.isRequired, + history: PropTypes.object, }; state = { @@ -107,15 +106,13 @@ class MfaForm extends ImmutablePureComponent { @connect() @injectIntl +@withRouter class DisableOtpForm extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, + history: PropTypes.object, }; state = { @@ -135,7 +132,7 @@ class DisableOtpForm extends ImmutablePureComponent { dispatch(disableMfa('totp', password)).then(() => { dispatch(snackbar.success(intl.formatMessage(messages.mfaDisableSuccess))); - this.context.router.history.push('../auth/edit'); + this.props.history.push('../auth/edit'); }).catch(error => { dispatch(snackbar.error(intl.formatMessage(messages.disableFail))); this.setState({ isLoading: false }); @@ -184,15 +181,13 @@ class DisableOtpForm extends ImmutablePureComponent { @connect() @injectIntl +@withRouter class EnableOtpForm extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, + history: PropTypes.object, }; state = { @@ -210,7 +205,7 @@ class EnableOtpForm extends ImmutablePureComponent { } handleCancelClick = e => { - this.context.router.history.push('../auth/edit'); + this.props.history.push('../auth/edit'); e.preventDefault(); } @@ -264,14 +259,12 @@ class EnableOtpForm extends ImmutablePureComponent { @connect() @injectIntl +@withRouter class OtpConfirmForm extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { intl: PropTypes.object.isRequired, + history: PropTypes.object, }; state = { @@ -297,7 +290,7 @@ class OtpConfirmForm extends ImmutablePureComponent { } handleCancelClick = e => { - this.context.router.history.push('../auth/edit'); + this.props.history.push('../auth/edit'); e.preventDefault(); } @@ -309,7 +302,7 @@ class OtpConfirmForm extends ImmutablePureComponent { dispatch(confirmMfa('totp', code, password)).then(() => { dispatch(snackbar.success(intl.formatMessage(messages.mfaConfirmSuccess))); - this.context.router.history.push('../auth/edit'); + this.props.history.push('../auth/edit'); }).catch(error => { dispatch(snackbar.error(intl.formatMessage(messages.confirmFail))); this.setState({ isLoading: false }); diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js index fecb664c2..c64494082 100644 --- a/app/soapbox/features/status/components/action_bar.js +++ b/app/soapbox/features/status/components/action_bar.js @@ -3,6 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import EmojiSelector from 'soapbox/components/emoji_selector'; import { isUserTouching } from 'soapbox/is_mobile'; @@ -78,12 +79,9 @@ const mapDispatchToProps = (dispatch, { status }) => ({ }, }); +@withRouter class ActionBar extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map.isRequired, onReply: PropTypes.func.isRequired, @@ -116,6 +114,7 @@ class ActionBar extends React.PureComponent { handleEmojiSelectorExpand: PropTypes.func.isRequired, handleEmojiSelectorUnfocus: PropTypes.func.isRequired, features: PropTypes.object.isRequired, + history: PropTypes.object, }; static defaultProps = { @@ -148,7 +147,7 @@ class ActionBar extends React.PureComponent { handleQuoteClick = () => { const { me, onQuote, onOpenUnauthorizedModal, status } = this.props; if (me) { - onQuote(status, this.context.router.history); + onQuote(status, this.props.history); } else { onOpenUnauthorizedModal('REBLOG'); } @@ -217,23 +216,23 @@ class ActionBar extends React.PureComponent { } handleDeleteClick = () => { - this.props.onDelete(this.props.status, this.context.router.history); + this.props.onDelete(this.props.status, this.props.history); } handleRedraftClick = () => { - this.props.onDelete(this.props.status, this.context.router.history, true); + this.props.onDelete(this.props.status, this.props.history, true); } handleDirectClick = () => { - this.props.onDirect(this.props.status.get('account'), this.context.router.history); + this.props.onDirect(this.props.status.get('account'), this.props.history); } handleChatClick = () => { - this.props.onChat(this.props.status.get('account'), this.context.router.history); + this.props.onChat(this.props.status.get('account'), this.props.history); } handleMentionClick = () => { - this.props.onMention(this.props.status.get('account'), this.context.router.history); + this.props.onMention(this.props.status.get('account'), this.props.history); } handleMuteClick = () => { diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js index b0e1b6a6c..ed6641487 100644 --- a/app/soapbox/features/status/components/detailed_status.js +++ b/app/soapbox/features/status/components/detailed_status.js @@ -27,10 +27,6 @@ import StatusInteractionBar from './status_interaction_bar'; export default @injectIntl class DetailedStatus extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map, onOpenMedia: PropTypes.func.isRequired, diff --git a/app/soapbox/features/status/components/quoted_status.js b/app/soapbox/features/status/components/quoted_status.js index 56dc47029..c3af169ce 100644 --- a/app/soapbox/features/status/components/quoted_status.js +++ b/app/soapbox/features/status/components/quoted_status.js @@ -3,7 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { NavLink } from 'react-router-dom'; +import { NavLink, withRouter } from 'react-router-dom'; import AttachmentThumbs from 'soapbox/components/attachment_thumbs'; import Avatar from 'soapbox/components/avatar'; @@ -16,29 +16,26 @@ const messages = defineMessages({ cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' }, }); -export default @injectIntl +export default @injectIntl @withRouter class QuotedStatus extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map, onCancel: PropTypes.func, intl: PropTypes.object.isRequired, compose: PropTypes.bool, + history: PropTypes.object, }; handleExpandClick = e => { const { compose, status } = this.props; if (!compose && e.button === 0) { - if (!this.context.router) { + if (!this.props.history) { return; } - this.context.router.history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`); + this.props.history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`); e.preventDefault(); } diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index 9c63ccc78..ba11376fb 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { createSelector } from 'reselect'; import { launchChat } from 'soapbox/actions/chats'; @@ -156,14 +157,11 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -export default @injectIntl -@connect(makeMapStateToProps) +export default @connect(makeMapStateToProps) +@injectIntl +@withRouter class Status extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, @@ -174,6 +172,7 @@ class Status extends ImmutablePureComponent { askReplyConfirmation: PropTypes.bool, domain: PropTypes.string, displayMedia: PropTypes.string, + history: PropTypes.object, }; state = { @@ -233,10 +232,10 @@ class Status extends ImmutablePureComponent { dispatch(openModal('CONFIRM', { message: intl.formatMessage(messages.replyMessage), confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(replyCompose(status, this.context.router.history)), + onConfirm: () => dispatch(replyCompose(status, this.props.history)), })); } else { - dispatch(replyCompose(status, this.context.router.history)); + dispatch(replyCompose(status, this.props.history)); } } @@ -265,10 +264,10 @@ class Status extends ImmutablePureComponent { dispatch(openModal('CONFIRM', { message: intl.formatMessage(messages.replyMessage), confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(quoteCompose(status, this.context.router.history)), + onConfirm: () => dispatch(quoteCompose(status, this.props.history)), })); } else { - dispatch(quoteCompose(status, this.context.router.history)); + dispatch(quoteCompose(status, this.props.history)); } } @@ -430,7 +429,7 @@ class Status extends ImmutablePureComponent { } handleHotkeyOpenProfile = () => { - this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`); + this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`); } handleHotkeyToggleHidden = () => { diff --git a/app/soapbox/features/ui/components/birthdays_modal.js b/app/soapbox/features/ui/components/birthdays_modal.js index 9a0744ba7..46b609f30 100644 --- a/app/soapbox/features/ui/components/birthdays_modal.js +++ b/app/soapbox/features/ui/components/birthdays_modal.js @@ -3,6 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import IconButton from 'soapbox/components/icon_button'; import LoadingIndicator from 'soapbox/components/loading_indicator'; @@ -23,20 +24,18 @@ const mapStateToProps = (state) => { export default @connect(mapStateToProps) @injectIntl +@withRouter class BirthdaysModal extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, accountIds: ImmutablePropTypes.orderedSet, + history: PropTypes.object, }; componentDidMount() { - this.unlistenHistory = this.context.router.history.listen((_, action) => { + this.unlistenHistory = this.props.history.listen((_, action) => { if (action === 'PUSH') { this.onClickClose(null, true); } diff --git a/app/soapbox/features/ui/components/boost_modal.js b/app/soapbox/features/ui/components/boost_modal.js index c148edc2e..c518ea172 100644 --- a/app/soapbox/features/ui/components/boost_modal.js +++ b/app/soapbox/features/ui/components/boost_modal.js @@ -3,6 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { withRouter } from 'react-router-dom'; import AttachmentThumbs from 'soapbox/components/attachment_thumbs'; import Icon from 'soapbox/components/icon'; @@ -18,18 +19,15 @@ const messages = defineMessages({ reblog: { id: 'status.reblog', defaultMessage: 'Repost' }, }); -export default @injectIntl +export default @injectIntl @withRouter class BoostModal extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { status: ImmutablePropTypes.map.isRequired, onReblog: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + history: PropTypes.object, }; componentDidMount() { @@ -45,7 +43,7 @@ class BoostModal extends ImmutablePureComponent { if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); this.props.onClose(); - this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`); + this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`); } } @@ -53,7 +51,7 @@ class BoostModal extends ImmutablePureComponent { if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); this.props.onClose(); - this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('url')}`); + this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('url')}`); } } diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js index 786433ec3..8e8053549 100644 --- a/app/soapbox/features/ui/components/media_modal.js +++ b/app/soapbox/features/ui/components/media_modal.js @@ -4,6 +4,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { withRouter } from 'react-router-dom'; import ReactSwipeableViews from 'react-swipeable-views'; import ExtendedVideoPlayer from 'soapbox/components/extended_video_player'; @@ -20,7 +21,7 @@ const messages = defineMessages({ next: { id: 'lightbox.next', defaultMessage: 'Next' }, }); -export default @injectIntl +export default @injectIntl @withRouter class MediaModal extends ImmutablePureComponent { static propTypes = { @@ -30,12 +31,9 @@ class MediaModal extends ImmutablePureComponent { index: PropTypes.number.isRequired, onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + history: PropTypes.object, }; - static contextTypes = { - router: PropTypes.object, - } - state = { index: null, navigationHidden: false, @@ -97,7 +95,7 @@ class MediaModal extends ImmutablePureComponent { const { status, account } = this.props; const acct = account.get('acct'); const statusId = status.get('id'); - this.context.router.history.push(`/@${acct}/posts/${statusId}`); + this.props.history.push(`/@${acct}/posts/${statusId}`); this.props.onClose(null, true); } } diff --git a/app/soapbox/features/ui/components/reblogs_modal.js b/app/soapbox/features/ui/components/reblogs_modal.js index 662ec48c7..60da89ded 100644 --- a/app/soapbox/features/ui/components/reblogs_modal.js +++ b/app/soapbox/features/ui/components/reblogs_modal.js @@ -3,6 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; import { fetchReblogs } from 'soapbox/actions/interactions'; import { fetchStatus } from 'soapbox/actions/statuses'; @@ -23,12 +24,9 @@ const mapStateToProps = (state, props) => { export default @connect(mapStateToProps) @injectIntl +@withRouter class ReblogsModal extends React.PureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -36,6 +34,7 @@ class ReblogsModal extends React.PureComponent { username: PropTypes.string.isRequired, dispatch: PropTypes.func.isRequired, accountIds: ImmutablePropTypes.orderedSet, + history: PropTypes.object, }; fetchData = () => { @@ -47,7 +46,7 @@ class ReblogsModal extends React.PureComponent { componentDidMount() { this.fetchData(); - this.unlistenHistory = this.context.router.history.listen((_, action) => { + this.unlistenHistory = this.props.history.listen((_, action) => { if (action === 'PUSH') { this.onClickClose(null, true); } diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js index 26731c95f..052b91623 100644 --- a/app/soapbox/features/ui/components/tabs_bar.js +++ b/app/soapbox/features/ui/components/tabs_bar.js @@ -39,16 +39,13 @@ class TabsBar extends React.PureComponent { notificationCount: PropTypes.number, chatsCount: PropTypes.number, singleUserMode: PropTypes.bool, + location: PropTypes.object, } state = { collapsed: false, } - static contextTypes = { - router: PropTypes.object, - } - setRef = ref => { this.node = ref; } @@ -60,7 +57,7 @@ class TabsBar extends React.PureComponent { shouldShowLinks = () => { try { - const { pathname } = this.context.router.route.location; + const { pathname } = this.props.location; return (pathname.startsWith('/@') && !pathname.includes('/posts/')) || pathname.startsWith('/admin'); } catch { return false; diff --git a/app/soapbox/features/ui/components/video_modal.js b/app/soapbox/features/ui/components/video_modal.js index 1291d32b1..a42cc76d2 100644 --- a/app/soapbox/features/ui/components/video_modal.js +++ b/app/soapbox/features/ui/components/video_modal.js @@ -3,10 +3,12 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; +import { withRouter } from 'react-router-dom'; import Video from 'soapbox/features/video'; -export default class VideoModal extends ImmutablePureComponent { +export default @withRouter +class VideoModal extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.map.isRequired, @@ -14,13 +16,14 @@ export default class VideoModal extends ImmutablePureComponent { account: ImmutablePropTypes.map, time: PropTypes.number, onClose: PropTypes.func.isRequired, + history: PropTypes.object, }; handleStatusClick = e => { const { status, account } = this.props; if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); - this.context.router.history.push(`/@${account.get('acct')}/posts/${status.get('id')}`); + this.props.history.push(`/@${account.get('acct')}/posts/${status.get('id')}`); } } diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index ca9c94e18..f5cfd9f5a 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -349,14 +349,11 @@ export default @connect(mapStateToProps) @withRouter class UI extends React.PureComponent { - static contextTypes = { - router: PropTypes.object.isRequired, - }; - static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, location: PropTypes.object, + history: PropTypes.object, intl: PropTypes.object.isRequired, dropdownMenuIsOpen: PropTypes.bool, me: SoapboxPropTypes.me, @@ -445,7 +442,7 @@ class UI extends React.PureComponent { handleServiceWorkerPostMessage = ({ data }) => { if (data.type === 'navigate') { - this.context.router.history.push(data.path); + this.props.history.push(data.path); } else { console.warn('Unknown message type:', data.type); } @@ -596,9 +593,9 @@ class UI extends React.PureComponent { handleHotkeyBack = () => { if (window.history && window.history.length === 1) { - this.context.router.history.push('/'); + this.props.history.push('/'); } else { - this.context.router.history.goBack(); + this.props.history.goBack(); } } @@ -617,44 +614,44 @@ class UI extends React.PureComponent { } handleHotkeyGoToHome = () => { - this.context.router.history.push('/'); + this.props.history.push('/'); } handleHotkeyGoToNotifications = () => { - this.context.router.history.push('/notifications'); + this.props.history.push('/notifications'); } handleHotkeyGoToFavourites = () => { const { account } = this.props; if (!account) return; - this.context.router.history.push(`/@${account.get('username')}/favorites`); + this.props.history.push(`/@${account.get('username')}/favorites`); } handleHotkeyGoToPinned = () => { const { account } = this.props; if (!account) return; - this.context.router.history.push(`/@${account.get('username')}/pins`); + this.props.history.push(`/@${account.get('username')}/pins`); } handleHotkeyGoToProfile = () => { const { account } = this.props; if (!account) return; - this.context.router.history.push(`/@${account.get('username')}`); + this.props.history.push(`/@${account.get('username')}`); } handleHotkeyGoToBlocked = () => { - this.context.router.history.push('/blocks'); + this.props.history.push('/blocks'); } handleHotkeyGoToMuted = () => { - this.context.router.history.push('/mutes'); + this.props.history.push('/mutes'); } handleHotkeyGoToRequests = () => { - this.context.router.history.push('/follow_requests'); + this.props.history.push('/follow_requests'); } handleOpenComposeModal = () => { @@ -662,12 +659,12 @@ class UI extends React.PureComponent { } shouldHideFAB = () => { - const path = this.context.router.history.location.pathname; + const path = this.props.location.pathname; return path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/); } isChatRoomLocation = () => { - const path = this.context.router.history.location.pathname; + const path = this.props.location.pathname; return path.match(/^\/chats\/(.*)/); } diff --git a/package.json b/package.json index cb3a48d59..72678e9c5 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "react-overlays": "^0.9.0", "react-popper": "^2.2.3", "react-redux": "^7.2.5", - "react-router-dom": "^4.3.1", + "react-router-dom": "^5.3.0", "react-router-scroll-4": "^1.0.0-beta.1", "react-simple-pull-to-refresh": "^1.3.0", "react-sparklines": "^1.7.0", diff --git a/yarn.lock b/yarn.lock index 41ddd3384..850ff2cd4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1141,6 +1141,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.13": + version "7.17.7" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825" + integrity sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@7", "@babel/template@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -5025,7 +5032,7 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== -history@^4.10.1, history@^4.7.2: +history@^4.10.1, history@^4.9.0: version "4.10.1" resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== @@ -5037,12 +5044,7 @@ history@^4.10.1, history@^4.7.2: tiny-warning "^1.0.0" value-equal "^1.0.1" -hoist-non-react-statics@^2.5.0: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== - -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -7023,6 +7025,14 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== +mini-create-react-context@^0.4.0: + version "0.4.1" + resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e" + integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ== + dependencies: + "@babel/runtime" "^7.12.1" + tiny-warning "^1.0.3" + mini-css-extract-plugin@^1.6.2: version "1.6.2" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8" @@ -8196,7 +8206,7 @@ prop-types-extra@^1.0.1: react-is "^16.3.2" warning "^4.0.0" -prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8435,7 +8445,7 @@ react-intl@^5.0.0: intl-messageformat "9.9.1" tslib "^2.1.0" -react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: +react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -8503,17 +8513,18 @@ react-redux@^7.2.5: prop-types "^15.7.2" react-is "^16.13.1" -react-router-dom@^4.3.1: - version "4.3.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6" - integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA== +react-router-dom@^5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363" + integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ== dependencies: - history "^4.7.2" - invariant "^2.2.4" + "@babel/runtime" "^7.12.13" + history "^4.9.0" loose-envify "^1.3.1" - prop-types "^15.6.1" - react-router "^4.3.1" - warning "^4.0.1" + prop-types "^15.6.2" + react-router "5.2.1" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" react-router-scroll-4@^1.0.0-beta.1: version "1.0.0-beta.2" @@ -8523,18 +8534,21 @@ react-router-scroll-4@^1.0.0-beta.1: scroll-behavior "^0.9.1" warning "^3.0.0" -react-router@^4.3.1: - version "4.3.1" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e" - integrity sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg== +react-router@5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d" + integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ== dependencies: - history "^4.7.2" - hoist-non-react-statics "^2.5.0" - invariant "^2.2.4" + "@babel/runtime" "^7.12.13" + history "^4.9.0" + hoist-non-react-statics "^3.1.0" loose-envify "^1.3.1" + mini-create-react-context "^0.4.0" path-to-regexp "^1.7.0" - prop-types "^15.6.1" - warning "^4.0.1" + prop-types "^15.6.2" + react-is "^16.6.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" react-side-effect@^2.1.0: version "2.1.1" @@ -9880,7 +9894,7 @@ tiny-queue@^0.2.1: resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046" integrity sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY= -tiny-warning@^1.0.0: +tiny-warning@^1.0.0, tiny-warning@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== From d34937e959d81bcccbe062dccb1bc4509aa94fc2 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 21 Mar 2022 16:08:03 -0500 Subject: [PATCH 2/2] UnauthorizedModal: use withRouter history --- app/soapbox/features/ui/components/unauthorized_modal.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/app/soapbox/features/ui/components/unauthorized_modal.js b/app/soapbox/features/ui/components/unauthorized_modal.js index 0f06a9055..2e5a1a2f6 100644 --- a/app/soapbox/features/ui/components/unauthorized_modal.js +++ b/app/soapbox/features/ui/components/unauthorized_modal.js @@ -54,16 +54,13 @@ const mapDispatchToProps = dispatch => ({ @withRouter class UnauthorizedModal extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object.isRequired, - }; - static propTypes = { intl: PropTypes.object.isRequired, features: PropTypes.object.isRequired, onClose: PropTypes.func.isRequired, onRemoteInteraction: PropTypes.func.isRequired, userName: PropTypes.string, + history: PropTypes.object.isRequired, singleUserMode: PropTypes.bool, }; @@ -100,14 +97,14 @@ class UnauthorizedModal extends ImmutablePureComponent { onLogin = (e) => { e.preventDefault(); - this.context.router.history.push('/login'); + this.props.history.push('/login'); this.onClickClose(); } onRegister = (e) => { e.preventDefault(); - this.context.router.history.push('/'); + this.props.history.push('/'); this.onClickClose(); }