zelo72
/
mastodon
mirror of https://github.com/mastodon/mastodon
2
2
Fork 1
Code Issues 10 Releases Wiki Activity

Upgrade React Router (#3677) 

* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/column_back_button.js
View File

@ -9,8 +9,8 @@ class ColumnBackButton extends React.PureComponent {
}; };
handleClick = () => { handleClick = () => {
if (window.history && window.history.length === 1) this.context.router.push('/'); if (window.history && window.history.length === 1) this.context.router.history.push('/');
else this.context.router.goBack(); else this.context.router.history.goBack();
} }
render () { render () {

4
app/javascript/mastodon/components/column_back_button_slim.js
View File

@ -9,8 +9,8 @@ class ColumnBackButtonSlim extends React.PureComponent {
}; };
handleClick = () => { handleClick = () => {
if (window.history && window.history.length === 1) this.context.router.push('/'); if (window.history && window.history.length === 1) this.context.router.history.push('/');
else this.context.router.goBack(); else this.context.router.history.goBack();
} }
render () { render () {

4
app/javascript/mastodon/components/column_header.js
View File

@ -45,8 +45,8 @@ class ColumnHeader extends React.PureComponent {
} }
handleBackClick = () => { handleBackClick = () => {
if (window.history && window.history.length === 1) this.context.router.push('/'); if (window.history && window.history.length === 1) this.context.router.history.push('/');
else this.context.router.goBack(); else this.context.router.history.goBack();
} }
handleTransitionEnd = () => { handleTransitionEnd = () => {

2
app/javascript/mastodon/components/dropdown_menu.js
View File

@ -41,7 +41,7 @@ class DropdownMenu extends React.PureComponent {
action(); action();
} else if (to) { } else if (to) {
e.preventDefault(); e.preventDefault();
this.context.router.push(to); this.context.router.history.push(to);
} }
this.dropdown.hide(); this.dropdown.hide();

2
app/javascript/mastodon/components/permalink.js
View File

@ -17,7 +17,7 @@ class Permalink extends React.PureComponent {
handleClick = (e) => { handleClick = (e) => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault(); e.preventDefault();
this.context.router.push(this.props.to); this.context.router.history.push(this.props.to);
} }
} }

4
app/javascript/mastodon/components/status.js
View File

@ -144,14 +144,14 @@ class Status extends ImmutablePureComponent {
handleClick = () => { handleClick = () => {
const { status } = this.props; const { status } = this.props;
this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`); this.context.router.history.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
} }
handleAccountClick = (e) => { handleAccountClick = (e) => {
if (e.button === 0) { if (e.button === 0) {
const id = Number(e.currentTarget.getAttribute('data-id')); const id = Number(e.currentTarget.getAttribute('data-id'));
e.preventDefault(); e.preventDefault();
this.context.router.push(`/accounts/${id}`); this.context.router.history.push(`/accounts/${id}`);
} }
} }

8
app/javascript/mastodon/components/status_action_bar.js
View File

@ -53,7 +53,7 @@ class StatusActionBar extends ImmutablePureComponent {
] ]
handleReplyClick = () => { handleReplyClick = () => {
this.props.onReply(this.props.status, this.context.router); this.props.onReply(this.props.status, this.context.router.history);
} }
handleFavouriteClick = () => { handleFavouriteClick = () => {
@ -69,7 +69,7 @@ class StatusActionBar extends ImmutablePureComponent {
} }
handleMentionClick = () => { handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.context.router); this.props.onMention(this.props.status.get('account'), this.context.router.history);
} }
handleMuteClick = () => { handleMuteClick = () => {
@ -81,12 +81,12 @@ class StatusActionBar extends ImmutablePureComponent {
} }
handleOpen = () => { handleOpen = () => {
this.context.router.push(`/statuses/${this.props.status.get('id')}`); this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
} }
handleReport = () => { handleReport = () => {
this.props.onReport(this.props.status); this.props.onReport(this.props.status);
this.context.router.push('/report'); this.context.router.history.push('/report');
} }
handleConversationMuteClick = () => { handleConversationMuteClick = () => {

4
app/javascript/mastodon/components/status_content.js
View File

@ -56,7 +56,7 @@ class StatusContent extends React.PureComponent {
onMentionClick = (mention, e) => { onMentionClick = (mention, e) => {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(`/accounts/${mention.get('id')}`); this.context.router.history.push(`/accounts/${mention.get('id')}`);
} }
} }
@ -65,7 +65,7 @@ class StatusContent extends React.PureComponent {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(`/timelines/tag/${hashtag}`); this.context.router.history.push(`/timelines/tag/${hashtag}`);
} }
} }

70
app/javascript/mastodon/containers/mastodon.js
View File

@ -12,35 +12,10 @@ import {
} from '../actions/timelines'; } from '../actions/timelines';
import { showOnboardingOnce } from '../actions/onboarding'; import { showOnboardingOnce } from '../actions/onboarding';
import { updateNotifications, refreshNotifications } from '../actions/notifications'; import { updateNotifications, refreshNotifications } from '../actions/notifications';
import createBrowserHistory from 'history/lib/createBrowserHistory'; import BrowserRouter from 'react-router-dom/BrowserRouter';
import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware'; import Route from 'react-router-dom/Route';
import useRouterHistory from 'react-router/lib/useRouterHistory'; import ScrollContext from 'react-router-scroll/lib/ScrollBehaviorContext';
import Router from 'react-router/lib/Router';
import Route from 'react-router/lib/Route';
import IndexRedirect from 'react-router/lib/IndexRedirect';
import IndexRoute from 'react-router/lib/IndexRoute';
import { useScroll } from 'react-router-scroll';
import UI from '../features/ui'; import UI from '../features/ui';
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';
import { hydrateStore } from '../actions/store'; import { hydrateStore } from '../actions/store';
import createStream from '../stream'; import createStream from '../stream';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider, addLocaleData } from 'react-intl';
@ -52,10 +27,6 @@ const store = configureStore();
const initialState = JSON.parse(document.getElementById('initial-state').textContent); const initialState = JSON.parse(document.getElementById('initial-state').textContent);
store.dispatch(hydrateStore(initialState)); store.dispatch(hydrateStore(initialState));
const browserHistory = useRouterHistory(createBrowserHistory)({
basename: '/web',
});
class Mastodon extends React.PureComponent { class Mastodon extends React.PureComponent {
componentDidMount() { componentDidMount() {
@ -136,36 +107,11 @@ class Mastodon extends React.PureComponent {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Provider store={store}> <Provider store={store}>
<Router history={browserHistory} render={applyRouterMiddleware(useScroll())}> <BrowserRouter basename='/web'>
<Route path='/' component={UI}> <ScrollContext>
<IndexRedirect to='/getting-started' /> <Route path='/' component={UI} />
<Route path='getting-started' component={GettingStarted} /> </ScrollContext>
<Route path='timelines/home' component={HomeTimeline} /> </BrowserRouter>
<Route path='timelines/public' component={PublicTimeline} />
<Route path='timelines/public/local' component={CommunityTimeline} />
<Route path='timelines/tag/:id' component={HashtagTimeline} />
<Route path='notifications' component={Notifications} />
<Route path='favourites' component={FavouritedStatuses} />
<Route path='statuses/new' component={Compose} />
<Route path='statuses/:statusId' component={Status} />
<Route path='statuses/:statusId/reblogs' component={Reblogs} />
<Route path='statuses/:statusId/favourites' component={Favourites} />
<Route path='accounts/:accountId' component={AccountTimeline} />
<Route path='accounts/:accountId/followers' component={Followers} />
<Route path='accounts/:accountId/following' component={Following} />
<Route path='accounts/:accountId/media' component={AccountGallery} />
<Route path='follow_requests' component={FollowRequests} />
<Route path='blocks' component={Blocks} />
<Route path='mutes' component={Mutes} />
<Route path='report' component={Report} />
<Route path='*' component={GenericNotFound} />
</Route>
</Router>
</Provider> </Provider>
</IntlProvider> </IntlProvider>
); );

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 ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import DropdownMenu from '../../../components/dropdown_menu'; 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'; import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({

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

@ -33,12 +33,12 @@ class Header extends ImmutablePureComponent {
} }
handleMention = () => { handleMention = () => {
this.props.onMention(this.props.account, this.context.router); this.props.onMention(this.props.account, this.context.router.history);
} }
handleReport = () => { handleReport = () => {
this.props.onReport(this.props.account); this.props.onReport(this.props.account);
this.context.router.push('/report'); this.context.router.history.push('/report');
} }
handleMute = () => { 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 DisplayName from '../../../components/display_name';
import Permalink from '../../../components/permalink'; import Permalink from '../../../components/permalink';
import { FormattedMessage } from 'react-intl'; 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'; import ImmutablePureComponent from 'react-immutable-pure-component';
class NavigationBar extends ImmutablePureComponent { 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) => { handleAccountClick = (e) => {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); 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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import AccountContainer from '../../../containers/account_container'; import AccountContainer from '../../../containers/account_container';
import StatusContainer from '../../../containers/status_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'; import ImmutablePureComponent from 'react-immutable-pure-component';
class SearchResults extends ImmutablePureComponent { 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 PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { mountCompose, unmountCompose } from '../../actions/compose'; 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 { injectIntl, defineMessages } from 'react-intl';
import SearchContainer from './containers/search_container'; import SearchContainer from './containers/search_container';
import Motion from 'react-motion/lib/Motion'; 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 ( return (
<Column icon='users' heading={intl.formatMessage(messages.heading)}> <Column icon='users' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<ScrollContainer scrollKey='follow_requests'> <ScrollContainer scrollKey='follow_requests'>
<div className='scrollable' onScroll={this.handleScroll}> <div className='scrollable' onScroll={this.handleScroll}>
{accountIds.map(id => {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 Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link'; import ColumnLink from '../ui/components/column_link';
import ColumnSubheading from '../ui/components/column_subheading'; 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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; 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 { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container'; import ColumnSettingsContainer from './containers/column_settings_container';
import Link from 'react-router/lib/Link'; import Link from 'react-router-dom/Link';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' }, 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 () { componentWillMount () {
if (!this.props.account) { if (!this.props.account) {
this.context.router.replace('/'); this.context.router.history.replace('/');
} }
} }
@ -76,7 +76,7 @@ class Report extends React.PureComponent {
handleSubmit = () => { handleSubmit = () => {
this.props.dispatch(submitReport()); this.props.dispatch(submitReport());
this.context.router.replace('/'); this.context.router.history.replace('/');
} }
render () { render () {

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

@ -50,12 +50,12 @@ class ActionBar extends React.PureComponent {
} }
handleMentionClick = () => { 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 = () => { handleReport = () => {
this.props.onReport(this.props.status); this.props.onReport(this.props.status);
this.context.router.push('/report'); this.context.router.history.push('/report');
} }
render () { 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 MediaGallery from '../../../components/media_gallery';
import VideoPlayer from '../../../components/video_player'; import VideoPlayer from '../../../components/video_player';
import AttachmentList from '../../../components/attachment_list'; 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 { FormattedDate, FormattedNumber } from 'react-intl';
import CardContainer from '../containers/card_container'; import CardContainer from '../containers/card_container';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
@ -28,7 +28,7 @@ class DetailedStatus extends ImmutablePureComponent {
handleAccountClick = (e) => { handleAccountClick = (e) => {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); 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(); e.stopPropagation();

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

@ -93,7 +93,7 @@ class Status extends ImmutablePureComponent {
} }
handleReplyClick = (status) => { handleReplyClick = (status) => {
this.props.dispatch(replyCompose(status, this.context.router)); this.props.dispatch(replyCompose(status, this.context.router.history));
} }
handleModalReblog = (status) => { 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) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.props.onClose(); 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 React from 'react';
import PropTypes from 'prop-types'; 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 }) => { const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
if (href) { if (href) {

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import Link from 'react-router/lib/Link'; import NavLink from 'react-router-dom/NavLink';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
class TabsBar extends React.Component { class TabsBar extends React.Component {
@ -7,14 +7,14 @@ class TabsBar extends React.Component {
render () { render () {
return ( return (
<div className='tabs-bar'> <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> <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>
<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> <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>
<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='/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> <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>
<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' 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> </div>
); );
} }

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

@ -1,4 +1,7 @@
import React from 'react'; 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 NotificationsContainer from './containers/notifications_container';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import LoadingBarContainer from './containers/loading_bar_container'; import LoadingBarContainer from './containers/loading_bar_container';
@ -13,6 +16,67 @@ import { refreshNotifications } from '../../actions/notifications';
import UploadArea from './components/upload_area'; import UploadArea from './components/upload_area';
import ColumnsAreaContainer from './containers/columns_area_container'; 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 { class UI extends React.PureComponent {
static propTypes = { static propTypes = {
@ -119,7 +183,36 @@ class UI extends React.PureComponent {
return ( return (
<div className='ui' ref={this.setRef}> <div className='ui' ref={this.setRef}>
<TabsBar /> <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 /> <NotificationsContainer />
<LoadingBarContainer className='loading-bar' /> <LoadingBarContainer className='loading-bar' />
<ModalContainer /> <ModalContainer />

5
package.json
View File

@ -52,7 +52,6 @@
"file-loader": "^0.11.2", "file-loader": "^0.11.2",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"glob": "^7.1.1", "glob": "^7.1.1",
"history": "^3.3.0",
"http-link-header": "^0.8.0", "http-link-header": "^0.8.0",
"immutable": "^3.8.1", "immutable": "^3.8.1",
"intersection-observer": "^0.3.0", "intersection-observer": "^0.3.0",
@ -86,8 +85,8 @@
"react-notification": "^6.7.0", "react-notification": "^6.7.0",
"react-redux": "^5.0.4", "react-redux": "^5.0.4",
"react-redux-loading-bar": "^2.9.2", "react-redux-loading-bar": "^2.9.2",
"react-router": "^3.0.5", "react-router-dom": "^4.1.1",
"react-router-scroll": "^0.4.2", "react-router-scroll": "ytase/react-router-scroll#build",
"react-simple-dropdown": "^3.0.0", "react-simple-dropdown": "^3.0.0",
"react-textarea-autosize": "^5.0.6", "react-textarea-autosize": "^5.0.6",
"react-toggle": "^4.0.1", "react-toggle": "^4.0.1",

63
yarn.lock
View File

@ -1906,7 +1906,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1" safe-buffer "^5.0.1"
sha.js "^2.4.8" sha.js "^2.4.8"
create-react-class@^15.5.1, create-react-class@^15.5.2, create-react-class@^15.5.3: create-react-class@^15.5.2, create-react-class@^15.5.3:
version "15.5.3" version "15.5.3"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.3.tgz#fb0f7cae79339e9a179e194ef466efa3923820fe" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.3.tgz#fb0f7cae79339e9a179e194ef466efa3923820fe"
dependencies: dependencies:
@ -3244,13 +3244,14 @@ hawk@~3.1.3:
hoek "2.x.x" hoek "2.x.x"
sntp "1.x.x" sntp "1.x.x"
history@^3.0.0, history@^3.3.0: history@^4.5.1, history@^4.6.0:
version "3.3.0" version "4.6.1"
resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c" resolved "https://registry.yarnpkg.com/history/-/history-4.6.1.tgz#911cf8eb65728555a94f2b12780a0c531a14d2fd"
dependencies: dependencies:
invariant "^2.2.1" invariant "^2.2.1"
loose-envify "^1.2.0" loose-envify "^1.2.0"
query-string "^4.2.2" resolve-pathname "^2.0.0"
value-equal "^0.2.0"
warning "^3.0.0" warning "^3.0.0"
hmac-drbg@^1.0.0: hmac-drbg@^1.0.0:
@ -4806,7 +4807,7 @@ path-to-regexp@0.1.7:
version "0.1.7" version "0.1.7"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
path-to-regexp@^1.7.0: path-to-regexp@^1.5.3, path-to-regexp@^1.7.0:
version "1.7.0" version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
dependencies: dependencies:
@ -5511,7 +5512,7 @@ qs@6.4.0, qs@^6.4.0, qs@~6.4.0:
version "6.4.0" version "6.4.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
query-string@^4.1.0, query-string@^4.2.2: query-string@^4.1.0:
version "4.3.4" version "4.3.4"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
dependencies: dependencies:
@ -5711,24 +5712,32 @@ react-redux@^5.0.4:
loose-envify "^1.1.0" loose-envify "^1.1.0"
prop-types "^15.5.10" prop-types "^15.5.10"
react-router-scroll@^0.4.2: react-router-dom@^4.1.1:
version "0.4.2" version "4.1.1"
resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.4.2.tgz#4b90e8707edf96eba7f066d94c5b4338bd6848b7" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
dependencies: dependencies:
prop-types "^15.5.6" history "^4.5.1"
scroll-behavior "^0.9.3" loose-envify "^1.3.1"
prop-types "^15.5.4"
react-router "^4.1.1"
react-router-scroll@ytase/react-router-scroll#build:
version "0.4.1"
resolved "https://codeload.github.com/ytase/react-router-scroll/tar.gz/991ecddb08885e1fb80ec1e9dbf3a35844b7d4cd"
dependencies:
scroll-behavior "^0.9.1"
warning "^3.0.0" warning "^3.0.0"
react-router@^3.0.5: react-router@^4.1.1:
version "3.0.5" version "4.1.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.5.tgz#c3b7873758045a8bbc9562aef4ff4bc8cce7c136" resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
dependencies: dependencies:
create-react-class "^15.5.1" history "^4.6.0"
history "^3.0.0"
hoist-non-react-statics "^1.2.0" hoist-non-react-statics "^1.2.0"
invariant "^2.2.1" invariant "^2.2.2"
loose-envify "^1.2.0" loose-envify "^1.3.1"
prop-types "^15.5.6" path-to-regexp "^1.5.3"
prop-types "^15.5.4"
warning "^3.0.0" warning "^3.0.0"
react-simple-di@^1.2.0: react-simple-di@^1.2.0:
@ -6085,9 +6094,13 @@ resolve-from@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
resolve-pathname@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"
resolve-url-loader@^2.0.2: resolve-url-loader@^2.0.2:
version "2.0.2" version "2.0.3"
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-2.0.2.tgz#c465e97ea0a4791f3961f766cea775ff2e3ceb8c" resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-2.0.3.tgz#f54cd1b040e8f0ab72b2cb32c9fbb8544152d9e9"
dependencies: dependencies:
adjust-sourcemap-loader "^1.1.0" adjust-sourcemap-loader "^1.1.0"
camelcase "^4.0.0" camelcase "^4.0.0"
@ -6201,7 +6214,7 @@ schema-utils@^0.3.0, schema-utils@^0.x:
dependencies: dependencies:
ajv "^5.0.0" ajv "^5.0.0"
scroll-behavior@^0.9.3: scroll-behavior@^0.9.1:
version "0.9.3" version "0.9.3"
resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.3.tgz#e48bcc8af364f3f07176e8dbca3968bd5e71557b" resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.3.tgz#e48bcc8af364f3f07176e8dbca3968bd5e71557b"
dependencies: dependencies:
@ -6977,6 +6990,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "~1.0.0" spdx-correct "~1.0.0"
spdx-expression-parse "~1.0.0" spdx-expression-parse "~1.0.0"
value-equal@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d"
vary@~1.1.0, vary@~1.1.1: vary@~1.1.0, vary@~1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"