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

app/assets/javascripts/components/components/status_content.jsx

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

app/assets/javascripts/components/containers/mastodon.jsx

@@ -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 {
   refreshTimelineSuccess,
   updateTimeline,
   deleteFromTimelines,
   refreshTimeline
-}                         from '../actions/timelines';
+} from '../actions/timelines';
 import { setAccessToken } from '../actions/meta';
 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 {
   applyRouterMiddleware,
+  useRouterHistory,
   Router,
   Route,
-  hashHistory,
   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 browserHistory = useRouterHistory(createBrowserHistory)({
+  basename: '/web'
+});
+
 const Mastodon = React.createClass({
 
   propTypes: {
@@ -78,24 +83,24 @@ const Mastodon = React.createClass({
   render () {
     return (
       <Provider store={store}>
-        <Router history={hashHistory} render={applyRouterMiddleware(useScroll())}>
+        <Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
           <Route path='/' component={UI}>
             <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} />
-              <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>
         </Router>

app/assets/javascripts/components/features/compose/components/search.jsx

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

app/assets/javascripts/components/features/getting_started/index.jsx

@@ -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>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>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>
     </Column>
   );

app/assets/javascripts/components/features/ui/components/navigation_bar.jsx

@@ -19,7 +19,7 @@ const NavigationBar = React.createClass({
 
         <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
           <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>
     );

app/assets/javascripts/components/features/ui/components/tabs_bar.jsx

@@ -28,9 +28,9 @@ const TabsBar = () => {
   return (
     <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/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>
   );
 };

app/views/notification_mailer/_status.text.erb

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

app/views/notification_mailer/follow.text.erb

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

config/routes.rb

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

public/manifest.json

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