Status: implement proper Pull to Refresh, refactor horrible status actions

app/soapbox/actions/statuses.js

@@ -33,13 +33,9 @@ export const STATUS_HIDE   = 'STATUS_HIDE';
 
 export const REDRAFT = 'REDRAFT';
 
-export function fetchStatusRequest(id, skipLoading) {
+const statusExists = (getState, statusId) => {
-  return {
+  return getState().getIn(['statuses', statusId], null) !== null;
-    type: STATUS_FETCH_REQUEST,
+};
-    id,
-    skipLoading,
-  };
-}
 
 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 api(getState).get(`/api/v1/statuses/${id}`).then(({ data: status }) => {
-      return;
+      dispatch(importFetchedStatus(status));
-    }
+      dispatch({ type: STATUS_FETCH_SUCCESS, status, skipLoading });
-
+      return status;
-    dispatch(fetchStatusRequest(id, skipLoading));
-
-    api(getState).get(`/api/v1/statuses/${id}`).then(response => {
-      dispatch(importFetchedStatus(response.data));
-      dispatch(fetchStatusSuccess(response.data, skipLoading));
     }).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));
+    dispatch({ type: CONTEXT_FETCH_REQUEST, 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));
 
+    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) {
+export function fetchStatusWithContext(id) {
-  return {
+  return (dispatch, getState) => {
-    type: CONTEXT_FETCH_REQUEST,
+    return Promise.all([
-    id,
+      dispatch(fetchContext(id)),
-  };
+      dispatch(fetchStatus(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,
   };
 }
 
@@ -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/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.fetchData();
-    this.props.dispatch(fetchReactions(this.props.params.statusId));
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
   componentDidUpdate(prevProps) {
     const { params } = this.props;
-    if (params.statusId !== prevProps.params.statusId && params.statusId) {
+
-      this.props.dispatch(fetchFavourites(this.props.params.statusId));
+    if (params.statusId !== prevProps.params.statusId) {
-      prevProps.dispatch(fetchReactions(params.statusId));
+      this.fetchData();
-      prevProps.dispatch(fetchStatus(params.statusId));
     }
   }
 

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.fetchData();
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
   componentDidUpdate(prevProps) {
     const { params } = this.props;
-    if (params.statusId !== prevProps.params.statusId && params.statusId) {
+
-      prevProps.dispatch(fetchReblogs(params.statusId));
+    if (params.statusId !== prevProps.params.statusId) {
-      prevProps.dispatch(fetchStatus(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';
@@ -167,13 +167,15 @@ class Status extends ImmutablePureComponent {
     emojiSelectorFocused: false,
   };
 
-  fetchStatus = () => {
+  fetchData = () => {
     const { dispatch, params } = this.props;
-    return dispatch(fetchStatus(params.statusId));
+    const { statusId } = params;
+
+    return dispatch(fetchStatusWithContext(statusId));
   }
 
   componentDidMount() {
-    this.fetchStatus();
+    this.fetchData();
     attachFullscreenListener(this.onFullScreenChange);
   }
 
@@ -538,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) {
@@ -570,10 +572,7 @@ class Status extends ImmutablePureComponent {
   }
 
   handleRefresh = () => {
-    return new Promise(resolve => {
+    return this.fetchData();
-      this.fetchStatus();
-      resolve();
-    });
   }
 
   render() {