Status: implement actual Pull to Refresh on threads, add PullToRefresh custom component

app/soapbox/components/pull_to_refresh.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PTRComponent from 'react-simple-pull-to-refresh';
+
+/**
+ * PullToRefresh:
+ * Wrapper around a third-party PTR component with Soapbox defaults.
+ */
+export default class PullToRefresh extends React.Component {
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    onRefresh: PropTypes.func,
+  }
+
+  handleRefresh = () => {
+    const { onRefresh } = this.props;
+
+    if (onRefresh) {
+      return onRefresh();
+    } else {
+      // If not provided, do nothing
+      return new Promise(resolve => resolve());
+    }
+  }
+
+  render() {
+    const { children, onRefresh, ...rest } = this.props;
+
+    return (
+      <PTRComponent
+        onRefresh={this.handleRefresh}
+        pullingContent={null}
+        // `undefined` will fallback to the default, while `null` will render nothing
+        refreshingContent={onRefresh ? undefined : null}
+        {...rest}
+      >
+        {children}
+      </PTRComponent>
+    );
+  }
+
+}

app/soapbox/components/pullable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import PullToRefresh from 'react-simple-pull-to-refresh';
+import PullToRefresh from './pull_to_refresh';
 
 /**
  * Pullable:
@@ -13,16 +13,11 @@ export default class Pullable extends React.Component {
     children: PropTypes.node.isRequired,
   }
 
-  handleRefresh = () => {
-    return new Promise(resolve => resolve());
-  }
-
   render() {
     const { children } = this.props;
 
     return (
       <PullToRefresh
-        onRefresh={this.handleRefresh}
         pullingContent={null}
         refreshingContent={null}
       >

app/soapbox/features/status/index.js

@@ -52,7 +52,7 @@ import ThreadStatus from './components/thread_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import { launchChat } from 'soapbox/actions/chats';
-import Pullable from 'soapbox/components/pullable';
+import PullToRefresh from 'soapbox/components/pull_to_refresh';
 
 const messages = defineMessages({
   title: { id: 'status.title', defaultMessage: 'Post' },
@@ -167,8 +167,13 @@ class Status extends ImmutablePureComponent {
     emojiSelectorFocused: false,
   };
 
+  fetchStatus = () => {
+    const { dispatch, params } = this.props;
+    return dispatch(fetchStatus(params.statusId));
+  }
+
   componentDidMount() {
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
+    this.fetchStatus();
     attachFullscreenListener(this.onFullScreenChange);
   }
 
@@ -564,6 +569,13 @@ class Status extends ImmutablePureComponent {
     this.setState({ fullscreen: isFullscreen() });
   }
 
+  handleRefresh = () => {
+    return new Promise(resolve => {
+      this.fetchStatus();
+      resolve();
+    });
+  }
+
   render() {
     let ancestors, descendants;
     const { status, ancestorsIds, descendantsIds, intl, domain } = this.props;
@@ -627,7 +639,7 @@ class Status extends ImmutablePureComponent {
         */}
 
         <div ref={this.setRef} className='thread'>
-          <Pullable>
+          <PullToRefresh onRefresh={this.handleRefresh}>
             {ancestors && (
               <div className='thread__ancestors'>{ancestors}</div>
             )}
@@ -678,7 +690,7 @@ class Status extends ImmutablePureComponent {
             {descendants && (
               <div className='thread__descendants'>{descendants}</div>
             )}
-          </Pullable>
+          </PullToRefresh>
         </div>
       </Column>
     );