From d42ed78aa432e448346f2b9585ee983e08631ba0 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 13 Nov 2016 14:01:21 +0100
Subject: Fix #110 - Make web UI use browser history, change links in e-mails
 to link to that

---
 .../components/components/status_content.jsx       |  2 +-
 .../javascripts/components/containers/mastodon.jsx | 71 ++++++++++++----------
 .../features/compose/components/search.jsx         |  2 +-
 .../components/features/getting_started/index.jsx  |  2 +-
 .../features/ui/components/navigation_bar.jsx      |  2 +-
 .../components/features/ui/components/tabs_bar.jsx |  6 +-
 6 files changed, 45 insertions(+), 40 deletions(-)

(limited to 'app/assets/javascripts/components')

diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index e51be3c68..583f4cec6 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/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}`);
     }
   },
 
diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx
index f29893ec0..20b57998a 100644
--- a/app/assets/javascripts/components/containers/mastodon.jsx
+++ b/app/assets/javascripts/components/containers/mastodon.jsx
@@ -1,39 +1,44 @@
-import { Provider }       from 'react-redux';
-import configureStore     from '../store/configureStore';
+import { Provider } from 'react-redux';
+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';
-import { useScroll }      from 'react-router-scroll';
-import UI                 from '../features/ui';
-import Account            from '../features/account';
-import Status             from '../features/status';
-import GettingStarted     from '../features/getting_started';
-import PublicTimeline     from '../features/public_timeline';
-import AccountTimeline    from '../features/account_timeline';
-import HomeTimeline       from '../features/home_timeline';
-import MentionsTimeline   from '../features/mentions_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';
+} from 'react-router';
+import { useScroll } from 'react-router-scroll';
+import UI from '../features/ui';
+import Account from '../features/account';
+import Status from '../features/status';
+import GettingStarted from '../features/getting_started';
+import PublicTimeline from '../features/public_timeline';
+import AccountTimeline from '../features/account_timeline';
+import HomeTimeline from '../features/home_timeline';
+import MentionsTimeline from '../features/mentions_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';
 
 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='/statuses/mentions' component={MentionsTimeline} />
-            <Route path='/statuses/all' component={PublicTimeline} />
-            <Route path='/statuses/tag/:id' component={HashtagTimeline} />
+            <Route path='timelines/home' component={HomeTimeline} />
+            <Route path='timelines/mentions' component={MentionsTimeline} />
+            <Route path='timelines/public' component={PublicTimeline} />
+            <Route path='timelines/tag/:id' component={HashtagTimeline} />
 
-            <Route path='/statuses/:statusId' component={Status} />
-            <Route path='/statuses/:statusId/reblogs' component={Reblogs} />
-            <Route path='/statuses/:statusId/favourites' component={Favourites} />
+            <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={Account}>
+            <Route path='accounts/:accountId' component={Account}>
               <IndexRoute component={AccountTimeline} />
-              <Route path='/accounts/:accountId/followers' component={Followers} />
-              <Route path='/accounts/:accountId/following' component={Following} />
+              <Route path='followers' component={Followers} />
+              <Route path='following' component={Following} />
             </Route>
           </Route>
         </Router>
diff --git a/app/assets/javascripts/components/features/compose/components/search.jsx b/app/assets/javascripts/components/features/compose/components/search.jsx
index 93f7df775..37efbe5df 100644
--- a/app/assets/javascripts/components/features/compose/components/search.jsx
+++ b/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}`);
     }
   },
 
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index df912321e..d5792dd9e 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/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>
   );
diff --git a/app/assets/javascripts/components/features/ui/components/navigation_bar.jsx b/app/assets/javascripts/components/features/ui/components/navigation_bar.jsx
index 68b660ee8..d2dae141f 100644
--- a/app/assets/javascripts/components/features/ui/components/navigation_bar.jsx
+++ b/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>
     );
diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
index f5d985996..b39030ca5 100644
--- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
+++ b/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='/statuses/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/home'><i className='fa fa-fw fa-home' /> Home</Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/mentions'><i className='fa fa-fw fa-at' /> Mentions</Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/all'><i className='fa fa-fw fa-globe' /> Public</Link>
     </div>
   );
 };
-- 
cgit