Make the announcement box collapsible

[fvh-P]

This change makes the announcement box collapsible.

After loading, it is shown in the expanded state if less than 5 toots are shown in the home timeline. Otherwise, it is shown in the collapsed state.

[lnanase]

It's nice update!
In addition, I refactor this code.

diff --git a/app/javascript/mastodon/features/compose/components/announcements.js b/app/javascript/mastodon/features/compose/components/announcements.js
index 355d0f9b..3d2347ae 100644
--- a/app/javascript/mastodon/features/compose/components/announcements.js
+++ b/app/javascript/mastodon/features/compose/components/announcements.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import Link from 'react-router/lib/Link';
@@ -34,25 +33,20 @@ const hashtags = Immutable.fromJS([
   'みんなのP名刺',
 ]);
 
-const mapStateToProps = state => ({
-  isEmptyHome: state.getIn(['timelines', 'home', 'items']).size < 5,
-});
-
 class Announcements extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
-    isEmptyHome: PropTypes.bool,
+    homeSize: PropTypes.number,
+    isLoading: PropTypes.bool,
   };
 
   state = {
-    show: true,
-    first: true,
+    show: false,
   };
 
   onClick = () => {
-    const currentShow = this.state.show;
-    this.setState({show: !currentShow});
+    this.setState({show: !this.state.show});
   }
   nl2br (text) {
     return text.split(/(\n)/g).map(function (line) {
@@ -64,12 +58,7 @@ class Announcements extends React.PureComponent {
   }
 
   render () {
-    const { intl, isEmptyHome } = this.props;
-
-    if(this.state.first && !isEmptyHome) {
-      this.state.first = false;
-      this.state.show = false;
-    }
+    const { intl } = this.props;
 
     return (
       <ul className='announcements'>
@@ -92,6 +81,12 @@ class Announcements extends React.PureComponent {
     );
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.isLoading && (nextProps.homeSize === 0 || this.props.homeSize !== nextProps.homeSize)) {
+        this.setState({show: nextProps.homeSize < 5});
+    }
+  }
+
 }
 
-export default connect(mapStateToProps)(injectIntl(Announcements));
+export default injectIntl(Announcements);
diff --git a/app/javascript/mastodon/features/compose/containers/announcements_container.js b/app/javascript/mastodon/features/compose/containers/announcements_container.js
new file mode 100644
index 00000000..1ccca9e4
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/containers/announcements_container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import Announcements from '../components/announcements';
+
+const mapStateToProps = (state, props) => {
+  return {
+    homeSize: state.getIn(['timelines', 'home', 'items']).size,
+    isLoading: state.getIn(['timelines', 'home', 'isLoading']),
+  };
+};
+
+export default connect(mapStateToProps)(Announcements);
diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js
index 990e4242..33f89e4e 100644
--- a/app/javascript/mastodon/features/compose/index.js
+++ b/app/javascript/mastodon/features/compose/index.js
@@ -11,7 +11,7 @@ import SearchContainer from './containers/search_container';
 import Motion from 'react-motion/lib/Motion';
 import spring from 'react-motion/lib/spring';
 import SearchResultsContainer from './containers/search_results_container';
-import Announcements from './components/announcements';
+import AnnouncementsContainer from './containers/announcements_container';
 import AdminAnnouncements from './components/admin_announcements';
 
 const messages = defineMessages({
@@ -71,7 +71,7 @@ class Compose extends React.PureComponent {
             <AdminAnnouncements />
             <NavigationContainer />
             <ComposeFormContainer />
-            <Announcements />
+            <AnnouncementsContainer />
           </div>
 
           <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>

• React components and containers divite
• React componentWillReceiveProps method use

Please try to consider this code.
Thank you.