Make clicking on the account and status column headers scroll to top

app/javascript/flavours/glitch/features/account/components/profile_column_header.js

@@ -11,16 +11,18 @@ export default @injectIntl
 class ProfileColumnHeader extends React.PureComponent {
 
   static propTypes = {
+    onClick: PropTypes.func,
     intl: PropTypes.object.isRequired,
   };
 
   render() {
-    const { intl } = this.props;
+    const { onClick, intl } = this.props;
 
     return (
       <ColumnHeader
         icon='user-circle'
         title={intl.formatMessage(messages.profile)}
+        onClick={onClick}
         showBackButton
       />
     );

app/javascript/flavours/glitch/features/account_gallery/index.js

@@ -65,6 +65,10 @@ export default class AccountGallery extends ImmutablePureComponent {
     }
   }
 
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
   handleScrollToBottom = () => {
     if (this.props.hasMore) {
       this.handleLoadMore(this.props.medias.size > 0 ? this.props.medias.last().getIn(['status', 'id']) : undefined);
@@ -94,6 +98,10 @@ export default class AccountGallery extends ImmutablePureComponent {
     return !(location.state && location.state.mastodonModalOpen);
   }
 
+  setRef = c => {
+    this.column = c;
+  }
+
   render () {
     const { medias, isLoading, hasMore } = this.props;
 
@@ -112,8 +120,8 @@ export default class AccountGallery extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
-        <ProfileColumnHeader />
+      <Column ref={this.setRef}>
+        <ProfileColumnHeader onClick={this.handleHeaderClick} />
 
         <ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}>
           <div className='scrollable scrollable--flex' onScroll={this.handleScroll}>

app/javascript/flavours/glitch/features/account_timeline/index.js

@@ -57,10 +57,18 @@ export default class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
   handleLoadMore = maxId => {
     this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies }));
   }
 
+  setRef = c => {
+    this.column = c;
+  }
+
   render () {
     const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props;
 
@@ -73,8 +81,8 @@ export default class AccountTimeline extends ImmutablePureComponent {
     }
 
     return (
-      <Column name='account'>
-        <ProfileColumnHeader />
+      <Column ref={this.setRef} name='account'>
+        <ProfileColumnHeader onClick={this.handleHeaderClick} />
 
         <StatusList
           prepend={<HeaderContainer accountId={this.props.params.accountId} />}

app/javascript/flavours/glitch/features/followers/index.js

@@ -43,6 +43,10 @@ export default class Followers extends ImmutablePureComponent {
     }
   }
 
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
   handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
 
@@ -61,6 +65,10 @@ export default class Followers extends ImmutablePureComponent {
     return !(location.state && location.state.mastodonModalOpen);
   }
 
+  setRef = c => {
+    this.column = c;
+  }
+
   render () {
     const { accountIds, hasMore } = this.props;
 
@@ -79,8 +87,8 @@ export default class Followers extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
-        <ProfileColumnHeader />
+      <Column ref={this.setRef}>
+        <ProfileColumnHeader onClick={this.handleHeaderClick} />
 
         <ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}>
           <div className='scrollable' onScroll={this.handleScroll}>

app/javascript/flavours/glitch/features/following/index.js

@@ -43,6 +43,10 @@ export default class Following extends ImmutablePureComponent {
     }
   }
 
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
   handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
 
@@ -61,6 +65,10 @@ export default class Following extends ImmutablePureComponent {
     return !(location.state && location.state.mastodonModalOpen);
   }
 
+  setRef = c => {
+    this.column = c;
+  }
+
   render () {
     const { accountIds, hasMore } = this.props;
 
@@ -79,8 +87,8 @@ export default class Following extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
-        <ProfileColumnHeader />
+      <Column ref={this.setRef}>
+        <ProfileColumnHeader onClick={this.handleHeaderClick} />
 
         <ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}>
           <div className='scrollable' onScroll={this.handleScroll}>

app/javascript/flavours/glitch/features/status/index.js

@@ -369,6 +369,10 @@ export default class Status extends ImmutablePureComponent {
     }
   }
 
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
   renderChildren (list) {
     return list.map(id => (
       <StatusContainer
@@ -390,6 +394,10 @@ export default class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
+  setColumnRef = c => {
+    this.column = c;
+  }
+
   componentDidUpdate (prevProps) {
     if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) {
       const { status, ancestorsIds } = this.props;
@@ -452,10 +460,11 @@ export default class Status extends ImmutablePureComponent {
     };
 
     return (
-      <Column label={intl.formatMessage(messages.detailedStatus)}>
+      <Column ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
         <ColumnHeader
           icon='comment'
           title={intl.formatMessage(messages.tootHeading)}
+          onClick={this.handleHeaderClick}
           showBackButton
           extraButton={(
             <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><i className={`fa fa-${!isExpanded ? 'eye-slash' : 'eye'}`} /></button>