From a4b8069cf5ed57d7cba066993f683941a6e60bc3 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 6 Oct 2016 22:47:35 +0200
Subject: [PATCH] Styling loading indicator, removing unused routes, adding
 "getting started" explanation Also, only update relative time every minute
 instead of 6 seconds. My bad

---
 .../components/loading_indicator.jsx          | 13 ++++++++
 .../components/relative_timestamp.jsx         |  2 +-
 .../components/containers/mastodon.jsx        | 31 ++++++++++---------
 .../components/features/account/index.jsx     |  3 +-
 .../features/getting_started/index.jsx        | 13 ++++++++
 .../components/features/settings/index.jsx    | 28 -----------------
 .../components/features/status/index.jsx      |  3 +-
 .../features/subscriptions/index.jsx          | 28 -----------------
 app/assets/stylesheets/components.scss        | 18 +++++++++++
 9 files changed, 66 insertions(+), 73 deletions(-)
 create mode 100644 app/assets/javascripts/components/components/loading_indicator.jsx
 create mode 100644 app/assets/javascripts/components/features/getting_started/index.jsx
 delete mode 100644 app/assets/javascripts/components/features/settings/index.jsx
 delete mode 100644 app/assets/javascripts/components/features/subscriptions/index.jsx

diff --git a/app/assets/javascripts/components/components/loading_indicator.jsx b/app/assets/javascripts/components/components/loading_indicator.jsx
new file mode 100644
index 000000000..7b738ac32
--- /dev/null
+++ b/app/assets/javascripts/components/components/loading_indicator.jsx
@@ -0,0 +1,13 @@
+const LoadingIndicator = () => {
+  const style = {
+    textAlign: 'center',
+    fontSize: '16px',
+    fontWeight: '500',
+    color: '#616b86',
+    paddingTop: '120px'
+  };
+
+  return <div style={style}>Loading...</div>;
+};
+
+export default LoadingIndicator;
diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx
index 5fcc5e5bb..10b9e0274 100644
--- a/app/assets/javascripts/components/components/relative_timestamp.jsx
+++ b/app/assets/javascripts/components/components/relative_timestamp.jsx
@@ -35,7 +35,7 @@ const RelativeTimestamp = React.createClass({
 
   componentWillMount () {
     this._updateMomentText();
-    this.interval = setInterval(this._updateMomentText, 6000);
+    this.interval = setInterval(this._updateMomentText, 60000);
   },
 
   componentWillUnmount () {
diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx
index 220ddc54d..6c65c303b 100644
--- a/app/assets/javascripts/components/containers/mastodon.jsx
+++ b/app/assets/javascripts/components/containers/mastodon.jsx
@@ -1,20 +1,24 @@
-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';
-import { setAccessToken }             from '../actions/meta';
-import { setAccountSelf }             from '../actions/accounts';
-import PureRenderMixin                from 'react-addons-pure-render-mixin';
-import { Router, Route, hashHistory } from 'react-router';
-import Account                        from '../features/account';
-import Settings                       from '../features/settings';
-import Status                         from '../features/status';
-import Subscriptions                  from '../features/subscriptions';
-import UI                             from '../features/ui';
+}                         from '../actions/timelines';
+import { setAccessToken } from '../actions/meta';
+import { setAccountSelf } from '../actions/accounts';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import {
+  Router,
+  Route,
+  hashHistory,
+  IndexRoute
+}                         from 'react-router';
+import Account            from '../features/account';
+import Status             from '../features/status';
+import GettingStarted     from '../features/getting_started';
+import UI                 from '../features/ui';
 
 const store = configureStore();
 
@@ -70,8 +74,7 @@ const Mastodon = React.createClass({
       <Provider store={store}>
         <Router history={hashHistory}>
           <Route path='/' component={UI}>
-            <Route path='/settings' component={Settings} />
-            <Route path='/subscriptions' component={Subscriptions} />
+            <IndexRoute component={GettingStarted} />
             <Route path='/statuses/:statusId' component={Status} />
             <Route path='/accounts/:accountId' component={Account} />
           </Route>
diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx
index c2389af2e..c9de1a848 100644
--- a/app/assets/javascripts/components/features/account/index.jsx
+++ b/app/assets/javascripts/components/features/account/index.jsx
@@ -24,6 +24,7 @@ import {
   selectAccount
 }                            from '../../reducers/timelines';
 import StatusList            from '../../components/status_list';
+import LoadingIndicator      from '../../components/loading_indicator';
 import Immutable             from 'immutable';
 import ActionBar             from './components/action_bar';
 
@@ -108,7 +109,7 @@ const Account = React.createClass({
     const { account, statuses, me } = this.props;
 
     if (account === null) {
-      return <div>Loading {this.props.params.accountId}...</div>;
+      return <LoadingIndicator />;
     }
 
     return (
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
new file mode 100644
index 000000000..d507cb46f
--- /dev/null
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -0,0 +1,13 @@
+const GettingStarted = () => {
+  return (
+    <div className='static-content'>
+      <h1>Getting started</h1>
+      <p>Mastodon is still in development and one of the lacking areas at the moment is user discovery.</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>The developer of this project can be followed as Gargron@mastodon.social</p>
+    </div>
+  );
+};
+
+export default GettingStarted;
diff --git a/app/assets/javascripts/components/features/settings/index.jsx b/app/assets/javascripts/components/features/settings/index.jsx
deleted file mode 100644
index f9921d951..000000000
--- a/app/assets/javascripts/components/features/settings/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { connect }        from 'react-redux';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-const mapStateToProps = (state, props) => ({
-
-});
-
-const Settings = React.createClass({
-
-  propTypes: {
-    params: React.PropTypes.object.isRequired,
-    dispatch: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  componentWillMount () {
-    //
-  },
-
-  render () {
-    return <div>Settings</div>;
-  }
-
-});
-
-export default connect(mapStateToProps)(Settings);
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index f7ce53e99..c294ac1d6 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/app/assets/javascripts/components/features/status/index.jsx
@@ -4,6 +4,7 @@ import ImmutablePropTypes    from 'react-immutable-proptypes';
 import { fetchStatus }       from '../../actions/statuses';
 import Immutable             from 'immutable';
 import EmbeddedStatus        from '../../components/status';
+import LoadingIndicator      from '../../components/loading_indicator';
 import DetailedStatus        from './components/detailed_status';
 import ActionBar             from './components/action_bar';
 import { favourite, reblog } from '../../actions/interactions';
@@ -63,7 +64,7 @@ const Status = React.createClass({
     const { status, ancestors, descendants, me } = this.props;
 
     if (status === null) {
-      return <div>Loading {this.props.params.statusId}...</div>;
+      return <LoadingIndicator />;
     }
 
     const account = status.get('account');
diff --git a/app/assets/javascripts/components/features/subscriptions/index.jsx b/app/assets/javascripts/components/features/subscriptions/index.jsx
deleted file mode 100644
index 780234fd9..000000000
--- a/app/assets/javascripts/components/features/subscriptions/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { connect }        from 'react-redux';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-const mapStateToProps = (state, props) => ({
-
-});
-
-const Subscriptions = React.createClass({
-
-  propTypes: {
-    params: React.PropTypes.object.isRequired,
-    dispatch: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  componentWillMount () {
-    //
-  },
-
-  render () {
-    return <div>Subscriptions</div>;
-  }
-
-});
-
-export default connect(mapStateToProps)(Subscriptions);
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 114d380b8..348857393 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -209,3 +209,21 @@
     }
   }
 }
+
+.static-content {
+  padding: 10px;
+  padding-top: 20px;
+  color: #616b86;
+
+  h1 {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 40px;
+    text-align: center;
+  }
+
+  p {
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+}