From 15b183117c161c7f2abfa7ac24d549189550bb38 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 10 Jan 2017 13:50:40 +0100
Subject: [PATCH] Add "not found" component to UI

---
 .../components/loading_indicator.jsx          | 22 ++++++++++---------
 .../components/missing_indicator.jsx          | 17 ++++++++++++++
 .../components/containers/mastodon.jsx        |  2 ++
 .../features/generic_not_found/index.jsx      | 10 +++++++++
 .../components/features/status/index.jsx      |  4 +++-
 5 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/javascripts/components/components/missing_indicator.jsx
 create mode 100644 app/assets/javascripts/components/features/generic_not_found/index.jsx

diff --git a/app/assets/javascripts/components/components/loading_indicator.jsx b/app/assets/javascripts/components/components/loading_indicator.jsx
index fd5acae84e..c8a2639241 100644
--- a/app/assets/javascripts/components/components/loading_indicator.jsx
+++ b/app/assets/javascripts/components/components/loading_indicator.jsx
@@ -1,15 +1,17 @@
 import { FormattedMessage } from 'react-intl';
 
-const LoadingIndicator = () => {
-  const style = {
-    textAlign: 'center',
-    fontSize: '16px',
-    fontWeight: '500',
-    color: '#616b86',
-    paddingTop: '120px'
-  };
-
-  return <div style={style}><FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' /></div>;
+const style = {
+  textAlign: 'center',
+  fontSize: '16px',
+  fontWeight: '500',
+  color: '#616b86',
+  paddingTop: '120px'
 };
 
+const LoadingIndicator = () => (
+  <div style={style}>
+    <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
+  </div>
+);
+
 export default LoadingIndicator;
diff --git a/app/assets/javascripts/components/components/missing_indicator.jsx b/app/assets/javascripts/components/components/missing_indicator.jsx
new file mode 100644
index 0000000000..ed8b4fe24a
--- /dev/null
+++ b/app/assets/javascripts/components/components/missing_indicator.jsx
@@ -0,0 +1,17 @@
+import { FormattedMessage } from 'react-intl';
+
+const style = {
+  textAlign: 'center',
+  fontSize: '16px',
+  fontWeight: '500',
+  color: '#616b86',
+  paddingTop: '120px'
+};
+
+const MissingIndicator = () => (
+  <div style={style}>
+    <FormattedMessage id='missing_indicator.label' defaultMessage='Not found' />
+  </div>
+);
+
+export default MissingIndicator;
diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx
index 143a280c3f..af495652f0 100644
--- a/app/assets/javascripts/components/containers/mastodon.jsx
+++ b/app/assets/javascripts/components/containers/mastodon.jsx
@@ -33,6 +33,7 @@ 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 { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
 import de from 'react-intl/locale-data/de';
@@ -125,6 +126,7 @@ const Mastodon = React.createClass({
               </Route>
 
               <Route path='follow_requests' component={FollowRequests} />
+              <Route path='*' component={GenericNotFound} />
             </Route>
           </Router>
         </Provider>
diff --git a/app/assets/javascripts/components/features/generic_not_found/index.jsx b/app/assets/javascripts/components/features/generic_not_found/index.jsx
new file mode 100644
index 0000000000..a7afe29b0a
--- /dev/null
+++ b/app/assets/javascripts/components/features/generic_not_found/index.jsx
@@ -0,0 +1,10 @@
+import Column from '../ui/components/column';
+import MissingIndicator from '../../components/missing_indicator';
+
+const GenericNotFound = () => (
+  <Column>
+    <MissingIndicator />
+  </Column>
+);
+
+export default GenericNotFound;
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index 27a252759a..3895498498 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/app/assets/javascripts/components/features/status/index.jsx
@@ -48,7 +48,8 @@ const Status = React.createClass({
     dispatch: React.PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
     ancestorsIds: ImmutablePropTypes.list,
-    descendantsIds: ImmutablePropTypes.list
+    descendantsIds: ImmutablePropTypes.list,
+    me: React.PropTypes.number
   },
 
   mixins: [PureRenderMixin],
@@ -81,6 +82,7 @@ const Status = React.createClass({
 
   handleMentionClick (account) {
     this.props.dispatch(mentionCompose(account));
+
     if (isMobile(window.innerWidth)) {
       this.context.router.push('/statuses/new');
     }