Make profile header scroll along with contents. AccountTimeline, Followers and Following are no longer

nested inside a common parent (<Account>), instead they all embed <HeaderContainer />

3 files changed, 125 insertions, 2 deletions

diff --git a/app/assets/javascripts/components/features/account_timeline/components/header.jsx b/app/assets/javascripts/components/features/account_timeline/components/header.jsx
new file mode 100644
index 000000000..ff3e8af2d
--- /dev/null
+++ b/app/assets/javascripts/components/features/account_timeline/components/header.jsx
@@ -0,0 +1,59 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import InnerHeader from '../../account/components/header';
+import ActionBar from '../../account/components/action_bar';
+
+const Header = React.createClass({
+  contextTypes: {
+    router: React.PropTypes.object
+  },
+
+  propTypes: {
+    account: ImmutablePropTypes.map.isRequired,
+    me: React.PropTypes.number.isRequired,
+    onFollow: React.PropTypes.func.isRequired,
+    onBlock: React.PropTypes.func.isRequired,
+    onMention: React.PropTypes.func.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleFollow () {
+    this.props.onFollow(this.props.account);
+  },
+
+  handleBlock () {
+    this.props.onBlock(this.props.account);
+  },
+
+  handleMention () {
+    this.props.onMention(this.props.account, this.context.router);
+  },
+
+  render () {
+    const { account, me } = this.props;
+
+    if (!account) {
+      return null;
+    }
+
+    return (
+      <div>
+        <InnerHeader
+          account={account}
+          me={me}
+          onFollow={this.handleFollow}
+        />
+
+        <ActionBar
+          account={account}
+          me={me}
+          onBlock={this.handleBlock}
+          onMention={this.handleMention}
+        />
+      </div>
+    );
+  }
+});
+
+export default Header;
diff --git a/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx b/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx
new file mode 100644
index 000000000..dca826596
--- /dev/null
+++ b/app/assets/javascripts/components/features/account_timeline/containers/header_container.jsx
@@ -0,0 +1,45 @@
+import { connect } from 'react-redux';
+import { makeGetAccount } from '../../../selectors';
+import Header from '../components/header';
+import {
+  followAccount,
+  unfollowAccount,
+  blockAccount,
+  unblockAccount
+} from '../../../actions/accounts';
+import { mentionCompose } from '../../../actions/compose';
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { accountId }) => ({
+    account: getAccount(state, Number(accountId)),
+    me: state.getIn(['meta', 'me'])
+  });
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = dispatch => ({
+  onFollow (account) {
+    if (account.getIn(['relationship', 'following'])) {
+      dispatch(unfollowAccount(account.get('id')));
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  },
+
+  onBlock (account) {
+    if (account.getIn(['relationship', 'blocking'])) {
+      dispatch(unblockAccount(account.get('id')));
+    } else {
+      dispatch(blockAccount(account.get('id')));
+    }
+  },
+
+  onMention (account, router) {
+    dispatch(mentionCompose(account, router));
+  }
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(Header);
diff --git a/app/assets/javascripts/components/features/account_timeline/index.jsx b/app/assets/javascripts/components/features/account_timeline/index.jsx
index 5c09839f7..6e2356dc1 100644
--- a/app/assets/javascripts/components/features/account_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/account_timeline/index.jsx
@@ -7,6 +7,9 @@ import {
 } from '../../actions/accounts';
 import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
+import Column from '../ui/components/column';
+import HeaderContainer from './containers/header_container';
+import ColumnBackButton from '../../components/column_back_button';
 
 const mapStateToProps = (state, props) => ({
   statusIds: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'items']),
@@ -44,10 +47,26 @@ const AccountTimeline = React.createClass({
     const { statusIds, isLoading, me } = this.props;
 
     if (!statusIds) {
-      return <LoadingIndicator />;
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
     }
 
-    return <StatusList statusIds={statusIds} isLoading={isLoading} me={me} onScrollToBottom={this.handleScrollToBottom} />
+    return (
+      <Column>
+        <ColumnBackButton />
+
+        <StatusList
+          prepend={<HeaderContainer accountId={this.props.params.accountId} />}
+          statusIds={statusIds}
+          isLoading={isLoading}
+          me={me}
+          onScrollToBottom={this.handleScrollToBottom}
+        />
+      </Column>
+    );
   }
 
 });