Fix #110 - Make web UI use browser history, change links in e-mails to link to that

lolsob-rspec
Eugen Rochko 2016-11-13 14:01:21 +01:00
parent e60cb2792e
commit 0f7a388de6
10 changed files with 51 additions and 46 deletions

View File

@ -52,7 +52,7 @@ const StatusContent = React.createClass({
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(`/statuses/tag/${hashtag}`); this.context.router.push(`/timelines/tag/${hashtag}`);
} }
}, },

View File

@ -1,39 +1,44 @@
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import configureStore from '../store/configureStore'; import configureStore from '../store/configureStore';
import { import {
refreshTimelineSuccess, refreshTimelineSuccess,
updateTimeline, updateTimeline,
deleteFromTimelines, deleteFromTimelines,
refreshTimeline refreshTimeline
} from '../actions/timelines'; } from '../actions/timelines';
import { setAccessToken } from '../actions/meta'; import { setAccessToken } from '../actions/meta';
import { setAccountSelf } from '../actions/accounts'; import { setAccountSelf } from '../actions/accounts';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { import {
applyRouterMiddleware, applyRouterMiddleware,
useRouterHistory,
Router, Router,
Route, Route,
hashHistory,
IndexRoute IndexRoute
} from 'react-router'; } from 'react-router';
import { useScroll } from 'react-router-scroll'; import { useScroll } from 'react-router-scroll';
import UI from '../features/ui'; import UI from '../features/ui';
import Account from '../features/account'; import Account from '../features/account';
import Status from '../features/status'; import Status from '../features/status';
import GettingStarted from '../features/getting_started'; import GettingStarted from '../features/getting_started';
import PublicTimeline from '../features/public_timeline'; import PublicTimeline from '../features/public_timeline';
import AccountTimeline from '../features/account_timeline'; import AccountTimeline from '../features/account_timeline';
import HomeTimeline from '../features/home_timeline'; import HomeTimeline from '../features/home_timeline';
import MentionsTimeline from '../features/mentions_timeline'; import MentionsTimeline from '../features/mentions_timeline';
import Compose from '../features/compose'; import Compose from '../features/compose';
import Followers from '../features/followers'; import Followers from '../features/followers';
import Following from '../features/following'; import Following from '../features/following';
import Reblogs from '../features/reblogs'; import Reblogs from '../features/reblogs';
import Favourites from '../features/favourites'; import Favourites from '../features/favourites';
import HashtagTimeline from '../features/hashtag_timeline'; import HashtagTimeline from '../features/hashtag_timeline';
const store = configureStore(); const store = configureStore();
const browserHistory = useRouterHistory(createBrowserHistory)({
basename: '/web'
});
const Mastodon = React.createClass({ const Mastodon = React.createClass({
propTypes: { propTypes: {
@ -78,24 +83,24 @@ const Mastodon = React.createClass({
render () { render () {
return ( return (
<Provider store={store}> <Provider store={store}>
<Router history={hashHistory} render={applyRouterMiddleware(useScroll())}> <Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
<Route path='/' component={UI}> <Route path='/' component={UI}>
<IndexRoute component={GettingStarted} /> <IndexRoute component={GettingStarted} />
<Route path='/statuses/new' component={Compose} />
<Route path='/statuses/home' component={HomeTimeline} /> <Route path='timelines/home' component={HomeTimeline} />
<Route path='/statuses/mentions' component={MentionsTimeline} /> <Route path='timelines/mentions' component={MentionsTimeline} />
<Route path='/statuses/all' component={PublicTimeline} /> <Route path='timelines/public' component={PublicTimeline} />
<Route path='/statuses/tag/:id' component={HashtagTimeline} /> <Route path='timelines/tag/:id' component={HashtagTimeline} />
<Route path='/statuses/:statusId' component={Status} /> <Route path='statuses/new' component={Compose} />
<Route path='/statuses/:statusId/reblogs' component={Reblogs} /> <Route path='statuses/:statusId' component={Status} />
<Route path='/statuses/:statusId/favourites' component={Favourites} /> <Route path='statuses/:statusId/reblogs' component={Reblogs} />
<Route path='statuses/:statusId/favourites' component={Favourites} />
<Route path='/accounts/:accountId' component={Account}> <Route path='accounts/:accountId' component={Account}>
<IndexRoute component={AccountTimeline} /> <IndexRoute component={AccountTimeline} />
<Route path='/accounts/:accountId/followers' component={Followers} /> <Route path='followers' component={Followers} />
<Route path='/accounts/:accountId/following' component={Following} /> <Route path='following' component={Following} />
</Route> </Route>
</Route> </Route>
</Router> </Router>

View File

@ -88,7 +88,7 @@ const Search = React.createClass({
if (suggestion.type === 'account') { if (suggestion.type === 'account') {
this.context.router.push(`/accounts/${suggestion.id}`); this.context.router.push(`/accounts/${suggestion.id}`);
} else { } else {
this.context.router.push(`/statuses/tag/${suggestion.id}`); this.context.router.push(`/timelines/tag/${suggestion.id}`);
} }
}, },

View File

@ -9,7 +9,7 @@ const GettingStarted = () => {
<p>You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form in the bottom of the sidebar.</p> <p>You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form in the bottom of the sidebar.</p>
<p>If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.</p> <p>If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.</p>
<p>The developer of this project can be followed as Gargron@mastodon.social</p> <p>The developer of this project can be followed as Gargron@mastodon.social</p>
<p>Also <Link to='/statuses/all' style={{ color: '#2b90d9', textDecoration: 'none' }}>check out the public timeline for a start</Link>!</p> <p>Also <Link to='/timelines/public' style={{ color: '#2b90d9', textDecoration: 'none' }}>check out the public timeline for a start</Link>!</p>
</div> </div>
</Column> </Column>
); );

View File

@ -19,7 +19,7 @@ const NavigationBar = React.createClass({
<div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}> <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
<strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong> <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong>
<a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}>Settings</a> · <Link to='/statuses/all' style={{ color: 'inherit', textDecoration: 'none' }}>Public timeline</Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}>Logout</a> <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}>Settings</a> · <Link to='/timelines/public' style={{ color: 'inherit', textDecoration: 'none' }}>Public timeline</Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}>Logout</a>
</div> </div>
</div> </div>
); );

View File

@ -28,9 +28,9 @@ const TabsBar = () => {
return ( return (
<div style={outerStyle}> <div style={outerStyle}>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> Compose</Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> Compose</Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/home'><i className='fa fa-fw fa-home' /> Home</Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> Home</Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/mentions'><i className='fa fa-fw fa-at' /> Mentions</Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/mentions'><i className='fa fa-fw fa-at' /> Mentions</Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/all'><i className='fa fa-fw fa-globe' /> Public</Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/all'><i className='fa fa-fw fa-globe' /> Public</Link>
</div> </div>
); );
}; };

View File

@ -1,3 +1,3 @@
<%= strip_tags(@status.content) %> <%= strip_tags(@status.content) %>
<%= TagManager.instance.url_for(@status) %> <%= web_url("statuses/#{@status.id}") %>

View File

@ -2,4 +2,4 @@
<%= @account.acct %> is now following you! <%= @account.acct %> is now following you!
<%= TagManager.instance.url_for(@account) %> <%= web_url("accounts/#{@account.id}") %>

View File

@ -1,12 +1,10 @@
require 'sidekiq/web' require 'sidekiq/web'
Rails.application.routes.draw do Rails.application.routes.draw do
get 'tags/show'
mount ActionCable.server => '/cable' mount ActionCable.server => '/cable'
authenticate :user, lambda { |u| u.admin? } do authenticate :user, lambda { |u| u.admin? } do
mount Sidekiq::Web => '/sidekiq' mount Sidekiq::Web, at: 'sidekiq'
mount PgHero::Engine, at: 'pghero' mount PgHero::Engine, at: 'pghero'
end end
@ -99,6 +97,8 @@ Rails.application.routes.draw do
end end
end end
get '/web/*any', to: 'home#index', as: :web
get :about, to: 'about#index' get :about, to: 'about#index'
get :terms, to: 'about#terms' get :terms, to: 'about#terms'

View File

@ -10,5 +10,5 @@
], ],
"theme_color": "#ffffff", "theme_color": "#ffffff",
"display": "standalone", "display": "standalone",
"start_url": "/#/statuses/home" "start_url": "/web/timelines/home"
} }