Added pull to refresh capability to StatusList, ScrollableList for HomeTimeline to start

• Added:
- pull to refresh capability to StatusList, ScrollableList for HomeTimeline to start

• Updated:
- PullToRefresher styles

• Todo:
- Will add to additional timelines soon

app/javascript/gabsocial/components/pull_to_refresher.js

@@ -1,14 +1,17 @@
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Responsive from '../features/ui//util/responsive_component'
 import Icon from './icon'
+import Text from './text'
 
 export default class PullToRefresher extends PureComponent {
 
   render() {
     return (
       <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-        <div className={[_s.default, _s.alignItemsCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg80PX].join(' ')}>
+        <div className={[_s.default, _s.height53PX, _s.width100PC, _s.alignItemsCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg50PX].join(' ')}>
-          <Icon id='loading' size='24px' />
+          <div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+            <Icon id='loading' size='24px' />
+          </div>
         </div>
       </Responsive>
     )

app/javascript/gabsocial/components/scrollable_list.js

@@ -31,6 +31,7 @@ export default class ScrollableList extends PureComponent {
   }
 
   state = {
+    pullToRefreshTriggered: false,
     cachedMediaWidth: 250, // Default media/card width using default Gab Social theme
   }
 
@@ -126,8 +127,11 @@ export default class ScrollableList extends PureComponent {
       const { innerHeight } = this.window;
       const offset = scrollHeight - scrollTop - innerHeight;
 
-      if (scrollTop < -60 && this.props.onReload) {
+      if (scrollTop < -80 && this.props.onReload && !this.state.pullToRefreshTriggered) {
-        // reload
+        this.setState({ pullToRefreshTriggered: true })
+      } else if (scrollTop > -10 && this.props.onReload && this.state.pullToRefreshTriggered) {
+        this.props.onReload()
+        this.setState({ pullToRefreshTriggered: false })
       }
 
       if (600 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {

app/javascript/gabsocial/components/status_list.js

@@ -106,13 +106,20 @@ class StatusList extends ImmutablePureComponent {
   }
 
   state = {
+    refreshing: false,
     fetchedContext: false,
   }
 
   componentDidMount() {
     this.handleDequeueTimeline();
     this.fetchPromotedStatus();
-  };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.refreshing) {
+      this.setState({ refreshing: false })
+    }
+  }
 
   fetchPromotedStatus() {
     const { promotion, promotedStatus, fetchStatus } = this.props;
@@ -157,9 +164,13 @@ class StatusList extends ImmutablePureComponent {
     this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined)
   }, 300, { leading: true })
 
-  handleReload = debounce(() => {
+  handleOnReload = debounce(() => {
-    this.props.onLoadMore()
+    // Only pull to refresh on home timeline for now
-  }, 300, { leading: true })
+    if (this.props.scrollKey === 'home_timeline' && !this.state.refreshing) {
+      this.props.onLoadMore()
+      this.setState({ refreshing: true })
+    }
+  }, 300, { trailing: true })
 
   _selectChild(index, align_top) {
     const container = this.node.node;
@@ -200,7 +211,7 @@ class StatusList extends ImmutablePureComponent {
       promotedStatus,
       ...other
     } = this.props
-    const { fetchedContext } = this.state
+    const { fetchedContext, refreshing } = this.state
 
     if (isPartial) {
       return <ColumnIndicator type='loading' />
@@ -262,8 +273,9 @@ class StatusList extends ImmutablePureComponent {
         <ScrollableList
           ref={this.setRef}
           isLoading={isLoading}
-          showLoading={isLoading && statusIds.size === 0}
+          showLoading={(isLoading && statusIds.size === 0) || refreshing}
           onLoadMore={onLoadMore && this.handleLoadOlder}
+          onReload={this.handleOnReload}
           {...other}
         >
           {scrollableContent}

app/javascript/styles/global.css

@@ -420,7 +420,7 @@ body {
 
 /*  */
 
-.topNeg80PX { top: -80px; }
+.topNeg50PX { top: -50px; }
 .top0 { top: 0; }
 .top120PX { top: 120px; }
 .top60PC { top: 60%; }