Merge branch 'more-pull-to-refresh' into 'develop'

Add Pull to Refresh to timelines, Notifications, Chats, Bookmarks

See merge request soapbox-pub/soapbox-fe!854

app/soapbox/actions/bookmarks.js

@@ -9,15 +9,17 @@ export const BOOKMARKED_STATUSES_EXPAND_REQUEST = 'BOOKMARKED_STATUSES_EXPAND_RE
 export const BOOKMARKED_STATUSES_EXPAND_SUCCESS = 'BOOKMARKED_STATUSES_EXPAND_SUCCESS';
 export const BOOKMARKED_STATUSES_EXPAND_FAIL    = 'BOOKMARKED_STATUSES_EXPAND_FAIL';
 
+const noOp = () => new Promise(f => f());
+
 export function fetchBookmarkedStatuses() {
   return (dispatch, getState) => {
     if (getState().getIn(['status_lists', 'bookmarks', 'isLoading'])) {
-      return;
+      return dispatch(noOp);
     }
 
     dispatch(fetchBookmarkedStatusesRequest());
 
-    api(getState).get('/api/v1/bookmarks').then(response => {
+    return api(getState).get('/api/v1/bookmarks').then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
       dispatch(fetchBookmarkedStatusesSuccess(response.data, next ? next.uri : null));
@@ -53,12 +55,12 @@ export function expandBookmarkedStatuses() {
     const url = getState().getIn(['status_lists', 'bookmarks', 'next'], null);
 
     if (url === null || getState().getIn(['status_lists', 'bookmarks', 'isLoading'])) {
-      return;
+      return dispatch(noOp);
     }
 
     dispatch(expandBookmarkedStatusesRequest());
 
-    api(getState).get(url).then(response => {
+    return api(getState).get(url).then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
       dispatch(expandBookmarkedStatusesSuccess(response.data, next ? next.uri : null));

app/soapbox/actions/statuses.js

@@ -33,13 +33,9 @@ export const STATUS_HIDE   = 'STATUS_HIDE';
 
 export const REDRAFT = 'REDRAFT';
 
-export function fetchStatusRequest(id, skipLoading) {
-  return {
-    type: STATUS_FETCH_REQUEST,
-    id,
-    skipLoading,
-  };
-}
+const statusExists = (getState, statusId) => {
+  return getState().getIn(['statuses', statusId], null) !== null;
+};
 
 export function createStatus(params, idempotencyKey) {
   return (dispatch, getState) => {
@@ -60,43 +56,20 @@ export function createStatus(params, idempotencyKey) {
 
 export function fetchStatus(id) {
   return (dispatch, getState) => {
-    const skipLoading = getState().getIn(['statuses', id], null) !== null;
+    const skipLoading = statusExists(getState, id);
 
-    dispatch(fetchContext(id));
+    dispatch({ type: STATUS_FETCH_REQUEST, id, skipLoading });
 
-    if (skipLoading) {
-      return;
-    }
-
-    dispatch(fetchStatusRequest(id, skipLoading));
-
-    api(getState).get(`/api/v1/statuses/${id}`).then(response => {
-      dispatch(importFetchedStatus(response.data));
-      dispatch(fetchStatusSuccess(response.data, skipLoading));
+    return api(getState).get(`/api/v1/statuses/${id}`).then(({ data: status }) => {
+      dispatch(importFetchedStatus(status));
+      dispatch({ type: STATUS_FETCH_SUCCESS, status, skipLoading });
+      return status;
     }).catch(error => {
-      dispatch(fetchStatusFail(id, error, skipLoading));
+      dispatch({ type: STATUS_FETCH_FAIL, id, error, skipLoading, skipAlert: true });
     });
   };
 }
 
-export function fetchStatusSuccess(status, skipLoading) {
-  return {
-    type: STATUS_FETCH_SUCCESS,
-    status,
-    skipLoading,
-  };
-}
-
-export function fetchStatusFail(id, error, skipLoading) {
-  return {
-    type: STATUS_FETCH_FAIL,
-    id,
-    error,
-    skipLoading,
-    skipAlert: true,
-  };
-}
-
 export function redraft(status, raw_text) {
   return {
     type: REDRAFT,
@@ -115,10 +88,10 @@ export function deleteStatus(id, routerHistory, withRedraft = false) {
       status = status.set('poll', getState().getIn(['polls', status.get('poll')]));
     }
 
-    dispatch(deleteStatusRequest(id));
+    dispatch({ type: STATUS_DELETE_REQUEST, id });
 
     api(getState).delete(`/api/v1/statuses/${id}`).then(response => {
-      dispatch(deleteStatusSuccess(id));
+      dispatch({ type: STATUS_DELETE_SUCCESS, id });
       dispatch(deleteFromTimelines(id));
 
       if (withRedraft) {
@@ -126,73 +99,37 @@ export function deleteStatus(id, routerHistory, withRedraft = false) {
         dispatch(openModal('COMPOSE'));
       }
     }).catch(error => {
-      dispatch(deleteStatusFail(id, error));
+      dispatch({ type: STATUS_DELETE_FAIL, id, error });
     });
   };
 }
 
-export function deleteStatusRequest(id) {
-  return {
-    type: STATUS_DELETE_REQUEST,
-    id: id,
-  };
-}
-
-export function deleteStatusSuccess(id) {
-  return {
-    type: STATUS_DELETE_SUCCESS,
-    id: id,
-  };
-}
-
-export function deleteStatusFail(id, error) {
-  return {
-    type: STATUS_DELETE_FAIL,
-    id: id,
-    error: error,
-  };
-}
-
 export function fetchContext(id) {
   return (dispatch, getState) => {
-    dispatch(fetchContextRequest(id));
-
-    api(getState).get(`/api/v1/statuses/${id}/context`).then(response => {
-      dispatch(importFetchedStatuses(response.data.ancestors.concat(response.data.descendants)));
-      dispatch(fetchContextSuccess(id, response.data.ancestors, response.data.descendants));
+    dispatch({ type: CONTEXT_FETCH_REQUEST, id });
 
+    return api(getState).get(`/api/v1/statuses/${id}/context`).then(({ data: context }) => {
+      const { ancestors, descendants } = context;
+      const statuses = ancestors.concat(descendants);
+      dispatch(importFetchedStatuses(statuses));
+      dispatch({ type: CONTEXT_FETCH_SUCCESS, id, ancestors, descendants });
+      return context;
     }).catch(error => {
       if (error.response && error.response.status === 404) {
         dispatch(deleteFromTimelines(id));
       }
 
-      dispatch(fetchContextFail(id, error));
+      dispatch({ type: CONTEXT_FETCH_FAIL, id, error, skipAlert: true });
     });
   };
 }
 
-export function fetchContextRequest(id) {
-  return {
-    type: CONTEXT_FETCH_REQUEST,
-    id,
-  };
-}
-
-export function fetchContextSuccess(id, ancestors, descendants) {
-  return {
-    type: CONTEXT_FETCH_SUCCESS,
-    id,
-    ancestors,
-    descendants,
-  };
-}
-
-export function fetchContextFail(id, error) {
-  return {
-    type: CONTEXT_FETCH_FAIL,
-    id,
-    error,
-    skipAlert: true,
+export function fetchStatusWithContext(id) {
+  return (dispatch, getState) => {
+    return Promise.all([
+      dispatch(fetchContext(id)),
+      dispatch(fetchStatus(id)),
+    ]);
   };
 }
 
@@ -200,74 +137,28 @@ export function muteStatus(id) {
   return (dispatch, getState) => {
     if (!isLoggedIn(getState)) return;
 
-    dispatch(muteStatusRequest(id));
-
+    dispatch({ type: STATUS_MUTE_REQUEST, id });
     api(getState).post(`/api/v1/statuses/${id}/mute`).then(() => {
-      dispatch(muteStatusSuccess(id));
+      dispatch({ type: STATUS_MUTE_SUCCESS, id });
     }).catch(error => {
-      dispatch(muteStatusFail(id, error));
+      dispatch({ type: STATUS_MUTE_FAIL, id, error });
     });
   };
 }
 
-export function muteStatusRequest(id) {
-  return {
-    type: STATUS_MUTE_REQUEST,
-    id,
-  };
-}
-
-export function muteStatusSuccess(id) {
-  return {
-    type: STATUS_MUTE_SUCCESS,
-    id,
-  };
-}
-
-export function muteStatusFail(id, error) {
-  return {
-    type: STATUS_MUTE_FAIL,
-    id,
-    error,
-  };
-}
-
 export function unmuteStatus(id) {
   return (dispatch, getState) => {
     if (!isLoggedIn(getState)) return;
 
-    dispatch(unmuteStatusRequest(id));
-
+    dispatch({ type: STATUS_UNMUTE_REQUEST, id });
     api(getState).post(`/api/v1/statuses/${id}/unmute`).then(() => {
-      dispatch(unmuteStatusSuccess(id));
+      dispatch({ type: STATUS_UNMUTE_SUCCESS, id });
     }).catch(error => {
-      dispatch(unmuteStatusFail(id, error));
+      dispatch({ type: STATUS_UNMUTE_FAIL, id, error });
     });
   };
 }
 
-export function unmuteStatusRequest(id) {
-  return {
-    type: STATUS_UNMUTE_REQUEST,
-    id,
-  };
-}
-
-export function unmuteStatusSuccess(id) {
-  return {
-    type: STATUS_UNMUTE_SUCCESS,
-    id,
-  };
-}
-
-export function unmuteStatusFail(id, error) {
-  return {
-    type: STATUS_UNMUTE_FAIL,
-    id,
-    error,
-  };
-}
-
 export function hideStatus(ids) {
   if (!Array.isArray(ids)) {
     ids = [ids];

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/components/scrollable_list.js

@@ -9,6 +9,7 @@ import { throttle } from 'lodash';
 import { List as ImmutableList } from 'immutable';
 import LoadingIndicator from './loading_indicator';
 import { getSettings } from 'soapbox/actions/settings';
+import PullToRefresh from 'soapbox/components/pull_to_refresh';
 
 const MOUSE_IDLE_DELAY = 300;
 
@@ -43,6 +44,7 @@ class ScrollableList extends PureComponent {
     placeholderComponent: PropTypes.func,
     placeholderCount: PropTypes.number,
     autoload: PropTypes.bool,
+    onRefresh: PropTypes.func,
   };
 
   state = {
@@ -274,12 +276,12 @@ class ScrollableList extends PureComponent {
   }
 
   renderFeed = () => {
-    const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore, placeholderComponent: Placeholder } = this.props;
+    const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore, onRefresh, placeholderComponent: Placeholder } = this.props;
     const childrenCount = React.Children.count(children);
     const trackScroll = true; //placeholder
     const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
 
-    return (
+    const feed = (
       <div className='slist' ref={this.setRef} onMouseMove={this.handleMouseMove}>
         <div role='feed' className='item-list'>
           {prepend}
@@ -313,6 +315,16 @@ class ScrollableList extends PureComponent {
         </div>
       </div>
     );
+
+    if (onRefresh) {
+      return (
+        <PullToRefresh onRefresh={onRefresh}>
+          {feed}
+        </PullToRefresh>
+      );
+    } else {
+      return feed;
+    }
   }
 
   render() {

app/soapbox/features/bookmarks/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Column from '../ui/components/column';
+import Column from 'soapbox/components/column';
+import SubNavigation from 'soapbox/components/sub_navigation';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import StatusList from '../../components/status_list';
@@ -38,15 +39,22 @@ class Bookmarks extends ImmutablePureComponent {
     isLoading: PropTypes.bool,
   };
 
-  componentDidMount() {
+  fetchData = () => {
     const { dispatch } = this.props;
-    dispatch(fetchBookmarkedStatuses());
+    return dispatch(fetchBookmarkedStatuses());
+  }
+
+  componentDidMount() {
+    this.fetchData();
   }
 
   handleLoadMore = debounce(() => {
     this.props.dispatch(expandBookmarkedStatuses());
   }, 300, { leading: true })
 
+  handleRefresh = () => {
+    return this.fetchData();
+  }
 
   render() {
     const { intl, shouldUpdateScroll, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
@@ -55,7 +63,8 @@ class Bookmarks extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.bookmarks' defaultMessage="You don't have any bookmarks yet. When you add one, it will show up here." />;
 
     return (
-      <Column heading={intl.formatMessage(messages.heading)} transparent>
+      <Column transparent>
+        <SubNavigation message={intl.formatMessage(messages.heading)} />
         <StatusList
           trackScroll={!pinned}
           statusIds={statusIds}
@@ -63,6 +72,7 @@ class Bookmarks extends ImmutablePureComponent {
           hasMore={hasMore}
           isLoading={isLoading}
           onLoadMore={this.handleLoadMore}
+          onRefresh={this.handleRefresh}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/soapbox/features/chats/index.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
-import { launchChat } from 'soapbox/actions/chats';
+import { fetchChats, launchChat } from 'soapbox/actions/chats';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ChatList from './components/chat_list';
 import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
 import AccountSearch from 'soapbox/components/account_search';
-import Pullable from 'soapbox/components/pullable';
+import PullToRefresh from 'soapbox/components/pull_to_refresh';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Chats' },
@@ -36,6 +36,11 @@ class ChatIndex extends React.PureComponent {
     this.context.router.history.push(`/chats/${chat.get('id')}`);
   }
 
+  handleRefresh = () => {
+    const { dispatch } = this.props;
+    return dispatch(fetchChats());
+  }
+
   render() {
     const { intl } = this.props;
 
@@ -55,12 +60,12 @@ class ChatIndex extends React.PureComponent {
           onSelected={this.handleSuggestion}
         />
 
-        <Pullable>
+        <PullToRefresh onRefresh={this.handleRefresh}>
           <ChatList
             onClickChat={this.handleClickChat}
             emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
           />
-        </Pullable>
+        </PullToRefresh>
       </Column>
     );
   }

app/soapbox/features/community_timeline/index.js

@@ -70,6 +70,12 @@ class CommunityTimeline extends React.PureComponent {
     dispatch(expandCommunityTimeline({ maxId, onlyMedia }));
   }
 
+  handleRefresh = () => {
+    const { dispatch, onlyMedia } = this.props;
+    return dispatch(expandCommunityTimeline({ onlyMedia }));
+  }
+
+
   render() {
     const { intl, onlyMedia, timelineId } = this.props;
 
@@ -80,6 +86,7 @@ class CommunityTimeline extends React.PureComponent {
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           onLoadMore={this.handleLoadMore}
+          onRefresh={this.handleRefresh}
           emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
         />
       </Column>

app/soapbox/features/home_timeline/index.js

@@ -93,6 +93,11 @@ class HomeTimeline extends React.PureComponent {
     this.setState({ done: true });
   }
 
+  handleRefresh = () => {
+    const { dispatch } = this.props;
+    return dispatch(expandHomeTimeline());
+  }
+
   render() {
     const { intl, siteTitle, isLoading, isEmpty, features } = this.props;
     const { done } = this.state;
@@ -108,6 +113,7 @@ class HomeTimeline extends React.PureComponent {
           <StatusListContainer
             scrollKey='home_timeline'
             onLoadMore={this.handleLoadMore}
+            onRefresh={this.handleRefresh}
             timelineId='home'
             emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
           />

app/soapbox/features/notifications/index.js

@@ -21,7 +21,6 @@ import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_h
 import { getSettings } from 'soapbox/actions/settings';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
 import SubNavigation from 'soapbox/components/sub_navigation';
-import Pullable from 'soapbox/components/pullable';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -129,6 +128,11 @@ class Notifications extends React.PureComponent {
     this.props.dispatch(dequeueNotifications());
   };
 
+  handleRefresh = () => {
+    const { dispatch } = this.props;
+    return dispatch(expandNotifications());
+  }
+
   render() {
     const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
     const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
@@ -173,6 +177,7 @@ class Notifications extends React.PureComponent {
         placeholderComponent={PlaceholderNotification}
         placeholderCount={20}
         onLoadMore={this.handleLoadOlder}
+        onRefresh={this.handleRefresh}
         onScrollToTop={this.handleScrollToTop}
         onScroll={this.handleScroll}
       >
@@ -189,9 +194,7 @@ class Notifications extends React.PureComponent {
           count={totalQueuedNotificationsCount}
           message={messages.queue}
         />
-        <Pullable>
-          {scrollContainer}
-        </Pullable>
+        {scrollContainer}
       </Column>
     );
   }

app/soapbox/features/public_timeline/index.js

@@ -94,6 +94,11 @@ class CommunityTimeline extends React.PureComponent {
     dispatch(expandPublicTimeline({ maxId, onlyMedia }));
   }
 
+  handleRefresh = () => {
+    const { dispatch, onlyMedia } = this.props;
+    return dispatch(expandPublicTimeline({ onlyMedia }));
+  }
+
   render() {
     const { intl, onlyMedia, timelineId, siteTitle, showExplanationBox, explanationBoxExpanded } = this.props;
 
@@ -130,6 +135,7 @@ class CommunityTimeline extends React.PureComponent {
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           onLoadMore={this.handleLoadMore}
+          onRefresh={this.handleRefresh}
           emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
         />
       </Column>

app/soapbox/features/reactions/index.js

@@ -49,18 +49,24 @@ class Reactions extends ImmutablePureComponent {
     status: ImmutablePropTypes.map,
   };
 
+  fetchData = () => {
+    const { dispatch, params } = this.props;
+    const { statusId } = params;
+
+    dispatch(fetchFavourites(statusId));
+    dispatch(fetchReactions(statusId));
+    dispatch(fetchStatus(statusId));
+  }
+
   componentDidMount() {
-    this.props.dispatch(fetchFavourites(this.props.params.statusId));
-    this.props.dispatch(fetchReactions(this.props.params.statusId));
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
+    this.fetchData();
   }
 
   componentDidUpdate(prevProps) {
     const { params } = this.props;
-    if (params.statusId !== prevProps.params.statusId && params.statusId) {
-      this.props.dispatch(fetchFavourites(this.props.params.statusId));
-      prevProps.dispatch(fetchReactions(params.statusId));
-      prevProps.dispatch(fetchStatus(params.statusId));
+
+    if (params.statusId !== prevProps.params.statusId) {
+      this.fetchData();
     }
   }
 

app/soapbox/features/reblogs/index.js

@@ -42,16 +42,23 @@ class Reblogs extends ImmutablePureComponent {
     status: ImmutablePropTypes.map,
   };
 
+  fetchData = () => {
+    const { dispatch, params } = this.props;
+    const { statusId } = params;
+
+    dispatch(fetchReblogs(statusId));
+    dispatch(fetchStatus(statusId));
+  }
+
   componentDidMount() {
-    this.props.dispatch(fetchReblogs(this.props.params.statusId));
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
+    this.fetchData();
   }
 
   componentDidUpdate(prevProps) {
     const { params } = this.props;
-    if (params.statusId !== prevProps.params.statusId && params.statusId) {
-      prevProps.dispatch(fetchReblogs(params.statusId));
-      prevProps.dispatch(fetchStatus(params.statusId));
+
+    if (params.statusId !== prevProps.params.statusId) {
+      this.fetchData();
     }
   }
 

app/soapbox/features/status/index.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { fetchStatus } from '../../actions/statuses';
+import { fetchStatusWithContext } from '../../actions/statuses';
 import MissingIndicator from '../../components/missing_indicator';
 import DetailedStatus from './components/detailed_status';
 import ActionBar from './components/action_bar';
@@ -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,15 @@ class Status extends ImmutablePureComponent {
     emojiSelectorFocused: false,
   };
 
+  fetchData = () => {
+    const { dispatch, params } = this.props;
+    const { statusId } = params;
+
+    return dispatch(fetchStatusWithContext(statusId));
+  }
+
   componentDidMount() {
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
+    this.fetchData();
     attachFullscreenListener(this.onFullScreenChange);
   }
 
@@ -533,9 +540,9 @@ class Status extends ImmutablePureComponent {
     const { params, status } = this.props;
     const { ancestorsIds } = prevProps;
 
-    if (params.statusId !== prevProps.params.statusId && params.statusId) {
+    if (params.statusId !== prevProps.params.statusId) {
       this._scrolledIntoView = false;
-      this.props.dispatch(fetchStatus(params.statusId));
+      this.fetchData();
     }
 
     if (status && status.get('id') !== prevState.loadedStatusId) {
@@ -564,6 +571,10 @@ class Status extends ImmutablePureComponent {
     this.setState({ fullscreen: isFullscreen() });
   }
 
+  handleRefresh = () => {
+    return this.fetchData();
+  }
+
   render() {
     let ancestors, descendants;
     const { status, ancestorsIds, descendantsIds, intl, domain } = this.props;
@@ -627,7 +638,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 +689,7 @@ class Status extends ImmutablePureComponent {
             {descendants && (
               <div className='thread__descendants'>{descendants}</div>
             )}
-          </Pullable>
+          </PullToRefresh>
         </div>
       </Column>
     );

app/styles/components/columns.scss

@@ -934,10 +934,18 @@
 }
 
 // Make MaterialStatus flush against SubNavigation
-.sub-navigation ~ .slist .item-list > article:first-child .material-status__status,
-.sub-navigation ~ .material-status:not(.material-status + .material-status) .material-status__status {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.sub-navigation ~,
+.sub-navigation ~ .ptr > .ptr__children > {
+  // ScrollableList
+  .slist .item-list > article:first-child,
+  // Thread
+  .material-status:not(.material-status + .material-status) {
+    // MaterialStatus
+    .material-status__status {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
 }
 
 // Display background for loading indicator
@@ -969,6 +977,12 @@
   .ptr,
   .ptr__children {
     background: var(--foreground-color);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+
+    @media screen and (max-width: 580px) {
+      border-radius: 0;
+    }
   }
 
   &--transparent {