Unreblogging and unfavouriting from the UI

app/assets/javascripts/components/actions/interactions.jsx

@@ -8,6 +8,14 @@ export const FAVOURITE_REQUEST = 'FAVOURITE_REQUEST';
 export const FAVOURITE_SUCCESS = 'FAVOURITE_SUCCESS';
 export const FAVOURITE_FAIL    = 'FAVOURITE_FAIL';
 
+export const UNREBLOG_REQUEST = 'UNREBLOG_REQUEST';
+export const UNREBLOG_SUCCESS = 'UNREBLOG_SUCCESS';
+export const UNREBLOG_FAIL    = 'UNREBLOG_FAIL';
+
+export const UNFAVOURITE_REQUEST = 'UNFAVOURITE_REQUEST';
+export const UNFAVOURITE_SUCCESS = 'UNFAVOURITE_SUCCESS';
+export const UNFAVOURITE_FAIL    = 'UNFAVOURITE_FAIL';
+
 export function reblog(status) {
   return function (dispatch, getState) {
     dispatch(reblogRequest(status));
@@ -24,10 +32,12 @@ export function reblog(status) {
 
 export function unreblog(status) {
   return (dispatch, getState) => {
+    dispatch(unreblogRequest(status));
+
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unreblog`).then(response => {
-      //
+      dispatch(unreblogSuccess(status, response.data));
     }).catch(error => {
-      //
+      dispatch(unreblogFail(status, error));
     });
   };
 };
@@ -55,6 +65,29 @@ export function reblogFail(status, error) {
   };
 };
 
+export function unreblogRequest(status) {
+  return {
+    type: UNREBLOG_REQUEST,
+    status: status
+  };
+};
+
+export function unreblogSuccess(status, response) {
+  return {
+    type: UNREBLOG_SUCCESS,
+    status: status,
+    response: response
+  };
+};
+
+export function unreblogFail(status, error) {
+  return {
+    type: UNREBLOG_FAIL,
+    status: status,
+    error: error
+  };
+};
+
 export function favourite(status) {
   return function (dispatch, getState) {
     dispatch(favouriteRequest(status));
@@ -69,10 +102,12 @@ export function favourite(status) {
 
 export function unfavourite(status) {
   return (dispatch, getState) => {
+    dispatch(unfavouriteRequest(status));
+
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unfavourite`).then(response => {
-      //
+      dispatch(unfavouriteSuccess(status, response.data));
     }).catch(error => {
-      //
+      dispatch(unfavouriteFail(status, error));
     });
   };
 };
@@ -99,3 +134,26 @@ export function favouriteFail(status, error) {
     error: error
   };
 };
+
+export function unfavouriteRequest(status) {
+  return {
+    type: UNFAVOURITE_REQUEST,
+    status: status
+  };
+};
+
+export function unfavouriteSuccess(status, response) {
+  return {
+    type: UNFAVOURITE_SUCCESS,
+    status: status,
+    response: response
+  };
+};
+
+export function unfavouriteFail(status, error) {
+  return {
+    type: UNFAVOURITE_FAIL,
+    status: status,
+    error: error
+  };
+};

app/assets/javascripts/components/features/account/components/action_bar.jsx

@@ -7,25 +7,24 @@ const ActionBar = React.createClass({
   propTypes: {
     account: ImmutablePropTypes.map.isRequired,
     me: React.PropTypes.number.isRequired,
-    onFollow: React.PropTypes.func.isRequired,
-    onUnfollow: React.PropTypes.func.isRequired
+    onFollow: React.PropTypes.func.isRequired
   },
 
   mixins: [PureRenderMixin],
 
   render () {
     const { account, me } = this.props;
-    
+
     let infoText     = '';
-    let actionButton = '';
+    let buttonText   = '';
 
     if (account.get('id') === me) {
-      infoText = 'This is you!';
+      buttonText = 'This is you!';
     } else {
       if (account.getIn(['relationship', 'following'])) {
-        actionButton = <Button text='Unfollow' onClick={this.props.onUnfollow} />;
+        buttonText = 'Unfollow';
       } else {
-        actionButton = <Button text='Follow' onClick={this.props.onFollow} />;
+        buttonText = 'Follow';
       }
 
       if (account.getIn(['relationship', 'followed_by'])) {
@@ -35,7 +34,7 @@ const ActionBar = React.createClass({
 
     return (
       <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto' }}>
-        {actionButton} <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span>
+        <Button text={buttonText} onClick={this.props.onFollow} disabled={account.get('id') === me} /> <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span>
       </div>
     );
   },

app/assets/javascripts/components/features/account/index.jsx

@@ -10,7 +10,12 @@ import {
 }                            from '../../actions/accounts';
 import { deleteStatus }      from '../../actions/statuses';
 import { replyCompose }      from '../../actions/compose';
-import { favourite, reblog } from '../../actions/interactions';
+import {
+  favourite,
+  reblog,
+  unreblog,
+  unfavourite
+}                            from '../../actions/interactions';
 import Header                from './components/header';
 import {
   selectStatus,
@@ -54,11 +59,11 @@ const Account = React.createClass({
   },
 
   handleFollow () {
-    this.props.dispatch(followAccount(this.props.account.get('id')));
-  },
-
-  handleUnfollow () {
-    this.props.dispatch(unfollowAccount(this.props.account.get('id')));
+    if (this.props.account.getIn(['relationship', 'following'])) {
+      this.props.dispatch(unfollowAccount(this.props.account.get('id')));
+    } else {
+      this.props.dispatch(followAccount(this.props.account.get('id')));
+    }
   },
 
   handleReply (status) {
@@ -66,11 +71,19 @@ const Account = React.createClass({
   },
 
   handleReblog (status) {
-    this.props.dispatch(reblog(status));
+    if (status.get('reblogged')) {
+      this.props.dispatch(unreblog(status));
+    } else {
+      this.props.dispatch(reblog(status));
+    }
   },
 
   handleFavourite (status) {
-    this.props.dispatch(favourite(status));
+    if (status.get('favourited')) {
+      this.props.dispatch(unfavourite(status));
+    } else {
+      this.props.dispatch(favourite(status));
+    }
   },
 
   handleDelete (status) {

app/assets/javascripts/components/features/ui/containers/status_list_container.jsx

@@ -1,7 +1,12 @@
 import { connect }           from 'react-redux';
 import StatusList            from '../../../components/status_list';
 import { replyCompose }      from '../../../actions/compose';
-import { reblog, favourite } from '../../../actions/interactions';
+import {
+  reblog,
+  favourite,
+  unreblog,
+  unfavourite
+}                            from '../../../actions/interactions';
 import { expandTimeline }    from '../../../actions/timelines';
 import { selectStatus }      from '../../../reducers/timelines';
 import { deleteStatus }      from '../../../actions/statuses';
@@ -20,11 +25,19 @@ const mapDispatchToProps = function (dispatch, props) {
     },
 
     onFavourite (status) {
-      dispatch(favourite(status));
+      if (status.get('favourited')) {
+        dispatch(unfavourite(status));
+      } else {
+        dispatch(favourite(status));
+      }
     },
 
     onReblog (status) {
-      dispatch(reblog(status));
+      if (status.get('reblogged')) {
+        dispatch(unreblog(status));
+      } else {
+        dispatch(reblog(status));
+      }
     },
 
     onScrollToBottom () {

app/assets/javascripts/components/reducers/notifications.jsx

@@ -1,6 +1,11 @@
 import { COMPOSE_SUBMIT_FAIL, COMPOSE_UPLOAD_FAIL } from '../actions/compose';
 import { FOLLOW_SUBMIT_FAIL }                       from '../actions/follow';
-import { REBLOG_FAIL, FAVOURITE_FAIL }              from '../actions/interactions';
+import {
+  REBLOG_FAIL,
+  UNREBLOG_FAIL,
+  FAVOURITE_FAIL,
+  UNFAVOURITE_FAIL
+}                                                   from '../actions/interactions';
 import {
   TIMELINE_REFRESH_FAIL,
   TIMELINE_EXPAND_FAIL
@@ -55,6 +60,8 @@ export default function notifications(state = initialState, action) {
     case ACCOUNT_TIMELINE_EXPAND_FAIL:
     case STATUS_FETCH_FAIL:
     case STATUS_DELETE_FAIL:
+    case UNREBLOG_FAIL:
+    case UNFAVOURITE_FAIL:
       return notificationFromError(state, action.error);
     case NOTIFICATION_DISMISS:
       return state.filterNot(item => item.get('key') === action.notification.key);

app/assets/javascripts/components/reducers/timelines.jsx

@@ -6,7 +6,9 @@ import {
 }                                from '../actions/timelines';
 import {
   REBLOG_SUCCESS,
-  FAVOURITE_SUCCESS
+  UNREBLOG_SUCCESS,
+  FAVOURITE_SUCCESS,
+  UNFAVOURITE_SUCCESS
 }                                from '../actions/interactions';
 import {
   ACCOUNT_SET_SELF,
@@ -219,6 +221,8 @@ export default function timelines(state = initialState, action) {
       return deleteStatus(state, action.id);
     case REBLOG_SUCCESS:
     case FAVOURITE_SUCCESS:
+    case UNREBLOG_SUCCESS:
+    case UNFAVOURITE_SUCCESS:
       return normalizeStatus(state, Immutable.fromJS(action.response));
     case ACCOUNT_SET_SELF:
       return setSelf(state, Immutable.fromJS(action.account));