Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Upgrade React Router (#3677)

Browse source 
* chore(yarn): Remove react-router

* chore(yarn): Remove react-router-scroll

* chore(yarn): Remove history

* chore(yarn): Add react-router-dom

* chore: Remove usages of react-router-scroll

* refactor: Upgrade to react-router-web

* refactor: Use fork of react-router-scroll

This reverts commit 2ddea9a6c8d39fc64b7d0b587f3fbda7a45a7fa2.

* fix: Issues mentions in the PR feedback
This commit is contained in:
Sorin Davidoi 2017-06-20 20:40:03 +02:00 • committed by Eugen Rochko
parent 1fc6cb4997
commit 8f03fdce7f
28 changed files with 186 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/mastodon/features/account/components/action_bar.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import DropdownMenu from '../../../components/dropdown_menu';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
const messages = defineMessages({

4
app/javascript/mastodon/features/account_timeline/components/header.js
View file

@ -33,12 +33,12 @@ class Header extends ImmutablePureComponent {
}
handleMention = () => {
this.props.onMention(this.props.account, this.context.router);
this.props.onMention(this.props.account, this.context.router.history);
}
handleReport = () => {
this.props.onReport(this.props.account);
this.context.router.push('/report');
this.context.router.history.push('/report');
}
handleMute = () => {

2
app/javascript/mastodon/features/compose/components/navigation_bar.js
View file

@ -5,7 +5,7 @@ import IconButton from '../../../components/icon_button';
import DisplayName from '../../../components/display_name';
import Permalink from '../../../components/permalink';
import { FormattedMessage } from 'react-intl';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
import ImmutablePureComponent from 'react-immutable-pure-component';
class NavigationBar extends ImmutablePureComponent {

2
app/javascript/mastodon/features/compose/components/reply_indicator.js
View file

@ -31,7 +31,7 @@ class ReplyIndicator extends ImmutablePureComponent {
handleAccountClick = (e) => {
if (e.button === 0) {
e.preventDefault();
this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
}
}

2
app/javascript/mastodon/features/compose/components/search_results.js
View file

@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import AccountContainer from '../../../containers/account_container';
import StatusContainer from '../../../containers/status_container';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
import ImmutablePureComponent from 'react-immutable-pure-component';
class SearchResults extends ImmutablePureComponent {

2
app/javascript/mastodon/features/compose/index.js
View file

@ -5,7 +5,7 @@ import NavigationContainer from './containers/navigation_container';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { mountCompose, unmountCompose } from '../../actions/compose';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
import { injectIntl, defineMessages } from 'react-intl';
import SearchContainer from './containers/search_container';
import Motion from 'react-motion/lib/Motion';

1
app/javascript/mastodon/features/follow_requests/index.js
View file

@ -54,6 +54,7 @@ class FollowRequests extends ImmutablePureComponent {
return (
<Column icon='users' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='follow_requests'>
<div className='scrollable' onScroll={this.handleScroll}>
{accountIds.map(id =>

2
app/javascript/mastodon/features/getting_started/index.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link';
import ColumnSubheading from '../ui/components/column_subheading';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

2
app/javascript/mastodon/features/home_timeline/index.js
View file

@ -8,7 +8,7 @@ import ColumnHeader from '../../components/column_header';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' },

4
app/javascript/mastodon/features/report/index.js
View file

@ -52,7 +52,7 @@ class Report extends React.PureComponent {
componentWillMount () {
if (!this.props.account) {
this.context.router.replace('/');
this.context.router.history.replace('/');
}
}
@ -76,7 +76,7 @@ class Report extends React.PureComponent {
handleSubmit = () => {
this.props.dispatch(submitReport());
this.context.router.replace('/');
this.context.router.history.replace('/');
}
render () {

4
app/javascript/mastodon/features/status/components/action_bar.js
View file

@ -50,12 +50,12 @@ class ActionBar extends React.PureComponent {
}
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.context.router);
this.props.onMention(this.props.status.get('account'), this.context.router.history);
}
handleReport = () => {
this.props.onReport(this.props.status);
this.context.router.push('/report');
this.context.router.history.push('/report');
}
render () {

4
app/javascript/mastodon/features/status/components/detailed_status.js
View file

@ -7,7 +7,7 @@ import StatusContent from '../../../components/status_content';
import MediaGallery from '../../../components/media_gallery';
import VideoPlayer from '../../../components/video_player';
import AttachmentList from '../../../components/attachment_list';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
import { FormattedDate, FormattedNumber } from 'react-intl';
import CardContainer from '../containers/card_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -28,7 +28,7 @@ class DetailedStatus extends ImmutablePureComponent {
handleAccountClick = (e) => {
if (e.button === 0) {
e.preventDefault();
this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
}
e.stopPropagation();

2
app/javascript/mastodon/features/status/index.js
View file

@ -93,7 +93,7 @@ class Status extends ImmutablePureComponent {
}
handleReplyClick = (status) => {
this.props.dispatch(replyCompose(status, this.context.router));
this.props.dispatch(replyCompose(status, this.context.router.history));
}
handleModalReblog = (status) => {

2
app/javascript/mastodon/features/ui/components/boost_modal.js
View file

@ -40,7 +40,7 @@ class BoostModal extends ImmutablePureComponent {
if (e.button === 0) {
e.preventDefault();
this.props.onClose();
this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
}
}

2
app/javascript/mastodon/features/ui/components/column_link.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'react-router/lib/Link';
import Link from 'react-router-dom/Link';
const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
if (href) {

14
app/javascript/mastodon/features/ui/components/tabs_bar.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import Link from 'react-router/lib/Link';
import NavLink from 'react-router-dom/NavLink';
import { FormattedMessage } from 'react-intl';
class TabsBar extends React.Component {
@ -7,14 +7,14 @@ class TabsBar extends React.Component {
render () {
return (
<div className='tabs-bar'>
<Link className='tabs-bar__link primary' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
<Link className='tabs-bar__link primary' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
<Link className='tabs-bar__link primary' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></NavLink>
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
<Link className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public/local'><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></Link>
<Link className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public'><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></Link>
<NavLink className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public/local'><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
<NavLink className='tabs-bar__link secondary' activeClassName='active' exact to='/timelines/public'><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
<Link className='tabs-bar__link primary' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-asterisk' /></Link>
<NavLink className='tabs-bar__link primary' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-asterisk' /></NavLink>
</div>
);
}

95
app/javascript/mastodon/features/ui/index.js
View file

@ -1,4 +1,7 @@
import React from 'react';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Redirect from 'react-router-dom/Redirect';
import NotificationsContainer from './containers/notifications_container';
import PropTypes from 'prop-types';
import LoadingBarContainer from './containers/loading_bar_container';
@ -13,6 +16,67 @@ import { refreshNotifications } from '../../actions/notifications';
import UploadArea from './components/upload_area';
import ColumnsAreaContainer from './containers/columns_area_container';
import Status from '../../features/status';
import GettingStarted from '../../features/getting_started';
import PublicTimeline from '../../features/public_timeline';
import CommunityTimeline from '../../features/community_timeline';
import AccountTimeline from '../../features/account_timeline';
import AccountGallery from '../../features/account_gallery';
import HomeTimeline from '../../features/home_timeline';
import Compose from '../../features/compose';
import Followers from '../../features/followers';
import Following from '../../features/following';
import Reblogs from '../../features/reblogs';
import Favourites from '../../features/favourites';
import HashtagTimeline from '../../features/hashtag_timeline';
import Notifications from '../../features/notifications';
import FollowRequests from '../../features/follow_requests';
import GenericNotFound from '../../features/generic_not_found';
import FavouritedStatuses from '../../features/favourited_statuses';
import Blocks from '../../features/blocks';
import Mutes from '../../features/mutes';
import Report from '../../features/report';
// Small wrapper to pass multiColumn to the route components
const WrappedSwitch = ({ multiColumn, children }) => (
<Switch>
{React.Children.map(children, child => React.cloneElement(child, { multiColumn }))}
</Switch>
);
WrappedSwitch.propTypes = {
multiColumn: PropTypes.bool,
children: PropTypes.node,
};
// Small Wraper to extract the params from the route and pass
// them to the rendered component, together with the content to
// be rendered inside (the children)
class WrappedRoute extends React.Component {
static propTypes = {
component: PropTypes.func.isRequired,
content: PropTypes.node,
multiColumn: PropTypes.bool,
}
renderComponent = ({ match: { params } }) => {
const { component: Component, content, multiColumn } = this.props;
return <Component params={params} multiColumn={multiColumn}>{content}</Component>;
}
render () {
const { component: Component, content, ...rest } = this.props;
return <Route {...rest} render={this.renderComponent} />;
}
}
const noOp = () => false;
class UI extends React.PureComponent {
static propTypes = {
@ -119,7 +183,36 @@ class UI extends React.PureComponent {
return (
<div className='ui' ref={this.setRef}>
<TabsBar />
<ColumnsAreaContainer singleColumn={isMobile(width)}>{children}</ColumnsAreaContainer>
<ColumnsAreaContainer singleColumn={isMobile(width)}>
<WrappedSwitch>
<Redirect from='/' to='/getting-started' exact />
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
<WrappedRoute path='/timelines/home' component={HomeTimeline} content={children} />
<WrappedRoute path='/timelines/public' exact component={PublicTimeline} content={children} />
<WrappedRoute path='/timelines/public/local' component={CommunityTimeline} content={children} />
<WrappedRoute path='/timelines/tag/:id' component={HashtagTimeline} content={children} />
<WrappedRoute path='/notifications' component={Notifications} content={children} />
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
<WrappedRoute path='/statuses/new' component={Compose} content={children} />
<WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
<WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} />
<WrappedRoute path='/statuses/:statusId/favourites' component={Favourites} content={children} />
<WrappedRoute path='/accounts/:accountId' exact component={AccountTimeline} content={children} />
<WrappedRoute path='/accounts/:accountId/followers' component={Followers} content={children} />
<WrappedRoute path='/accounts/:accountId/following' component={Following} content={children} />
<WrappedRoute path='/accounts/:accountId/media' component={AccountGallery} content={children} />
<WrappedRoute path='/follow_requests' component={FollowRequests} content={children} />
<WrappedRoute path='/blocks' component={Blocks} content={children} />
<WrappedRoute path='/mutes' component={Mutes} content={children} />
<WrappedRoute path='/report' component={Report} content={children} />
<WrappedRoute component={GenericNotFound} content={children} />
</WrappedSwitch>
</ColumnsAreaContainer>
<NotificationsContainer />
<LoadingBarContainer className='loading-bar' />
<ModalContainer />