Partially fix post navigation

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/column.js

@@ -11,6 +11,10 @@ export default class Column extends React.PureComponent {
     label: PropTypes.string,
   };
 
+  setRef = c => {
+    this.node = c;
+  }
+
   render() {
     const { className, label, children, transparent, ...rest } = this.props;
 
@@ -20,6 +24,7 @@ export default class Column extends React.PureComponent {
         aria-label={label}
         className={classNames('column', className, { 'column--transparent': transparent })}
         {...rest}
+        ref={this.setRef}
       >
         {children}
       </div>

app/soapbox/components/material_status.js

@@ -4,24 +4,24 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import StatusContainer from 'soapbox/containers/status_container';
 
 export default class MaterialStatus extends React.Component {
 
   static propTypes = {
+    children: PropTypes.node,
     hidden: PropTypes.bool,
   }
 
   render() {
     // Performance: when hidden, don't render the wrapper divs
     if (this.props.hidden) {
-      return <StatusContainer {...this.props} />;
+      return this.props.children;
     }
 
     return (
       <div className='material-status' tabIndex={-1}>
         <div className='material-status__status focusable' tabIndex={0}>
-          <StatusContainer {...this.props} focusable={false} />
+          {this.props.children}
         </div>
       </div>
     );

app/soapbox/components/status.js

@@ -95,6 +95,7 @@ class Status extends ImmutablePureComponent {
     displayMedia: PropTypes.string,
     allowedEmoji: ImmutablePropTypes.list,
     focusable: PropTypes.bool,
+    component: PropTypes.func,
   };
 
   static defaultProps = {
@@ -316,7 +317,7 @@ class Status extends ImmutablePureComponent {
     const poll = null;
     let statusAvatar, prepend, rebloggedByText, reblogContent;
 
-    const { intl, hidden, featured, otherAccounts, unread, showThread, group } = this.props;
+    const { intl, hidden, featured, otherAccounts, unread, showThread, group, wrapperComponent: WrapperComponent } = this.props;
 
     // FIXME: why does this need to reassign status and account??
     let { status, account, ...other } = this.props; // eslint-disable-line prefer-const
@@ -494,8 +495,7 @@ class Status extends ImmutablePureComponent {
     const favicon = status.getIn(['account', 'pleroma', 'favicon']);
     const domain = getDomain(status.get('account'));
 
-    return (
+    const wrappedStatus = (
-      <HotKeys handlers={handlers}>
       <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), read: unread === false, focusable: this.props.focusable && !this.props.muted })} tabIndex={this.props.focusable && !this.props.muted ? 0 : null} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
         {prepend}
 
@@ -560,6 +560,11 @@ class Status extends ImmutablePureComponent {
           />
         </div>
       </div>
+    );
+
+    return (
+      <HotKeys handlers={handlers}>
+        {WrapperComponent ? <WrapperComponent>{wrappedStatus}</WrapperComponent> : wrappedStatus}
       </HotKeys>
     );
   }

app/soapbox/components/status_list.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
+import StatusContainer from 'soapbox/containers/status_container';
 import MaterialStatus from 'soapbox/components/material_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -110,7 +111,7 @@ export default class StatusList extends ImmutablePureComponent {
     const { timelineId, withGroupAdmin, group }  = this.props;
 
     return (
-      <MaterialStatus
+      <StatusContainer
         key={statusId}
         id={statusId}
         onMoveUp={this.handleMoveUp}
@@ -119,6 +120,8 @@ export default class StatusList extends ImmutablePureComponent {
         group={group}
         withGroupAdmin={withGroupAdmin}
         showThread
+        wrapperComponent={MaterialStatus}
+        focusable={false}
       />
     );
   }
@@ -150,7 +153,7 @@ export default class StatusList extends ImmutablePureComponent {
     if (!featuredStatusIds) return null;
 
     return featuredStatusIds.map(statusId => (
-      <MaterialStatus
+      <StatusContainer
         key={`f-${statusId}`}
         id={statusId}
         featured
@@ -158,6 +161,8 @@ export default class StatusList extends ImmutablePureComponent {
         onMoveDown={this.handleMoveDown}
         contextType={timelineId}
         showThread
+        wrapperComponent={MaterialStatus}
+        focusable={false}
       />
     ));
   }

app/soapbox/features/status/index.js

@@ -1,4 +1,4 @@
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -410,10 +410,10 @@ class Status extends ImmutablePureComponent {
     if (id === status.get('id')) {
       this._selectChild(ancestorsIds.size - 1, true);
     } else {
-      let index = ancestorsIds.indexOf(id);
+      let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
-        index = descendantsIds.indexOf(id);
+        index = ImmutableList(descendantsIds).indexOf(id);
         this._selectChild(ancestorsIds.size + index, true);
       } else {
         this._selectChild(index - 1, true);
@@ -427,10 +427,10 @@ class Status extends ImmutablePureComponent {
     if (id === status.get('id')) {
       this._selectChild(ancestorsIds.size + 1, false);
     } else {
-      let index = ancestorsIds.indexOf(id);
+      let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
-        index = descendantsIds.indexOf(id);
+        index = ImmutableList(descendantsIds).indexOf(id);
         this._selectChild(ancestorsIds.size + index + 2, false);
       } else {
         this._selectChild(index + 1, false);