Favouriting works, reblogging is a little broken because of <Status>

8 files changed, 142 insertions, 18 deletions

diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx
index cf5345078..de4fe7445 100644
--- a/app/assets/javascripts/components/actions/compose.jsx
+++ b/app/assets/javascripts/components/actions/compose.jsx
@@ -49,9 +49,10 @@ export function submitComposeRequest() {
   };
 }
 
-export function submitComposeSuccess(response) {
+export function submitComposeSuccess(status) {
   return {
-    type: COMPOSE_SUBMIT_SUCCESS
+    type: COMPOSE_SUBMIT_SUCCESS,
+    status: status
   };
 }
 
diff --git a/app/assets/javascripts/components/actions/interactions.jsx b/app/assets/javascripts/components/actions/interactions.jsx
new file mode 100644
index 000000000..281d3be87
--- /dev/null
+++ b/app/assets/javascripts/components/actions/interactions.jsx
@@ -0,0 +1,81 @@
+import api from '../api'
+
+export const REBLOG         = 'REBLOG';
+export const REBLOG_REQUEST = 'REBLOG_REQUEST';
+export const REBLOG_SUCCESS = 'REBLOG_SUCCESS';
+export const REBLOG_FAIL    = 'REBLOG_FAIL';
+
+export const FAVOURITE         = 'FAVOURITE';
+export const FAVOURITE_REQUEST = 'FAVOURITE_REQUEST';
+export const FAVOURITE_SUCCESS = 'FAVOURITE_SUCCESS';
+export const FAVOURITE_FAIL    = 'FAVOURITE_FAIL';
+
+export function reblog(status) {
+  return function (dispatch, getState) {
+    dispatch(reblogRequest(status));
+
+    api(getState).post(`/api/statuses/${status.get('id')}/reblog`).then(function (response) {
+      dispatch(reblogSuccess(status, response.data));
+    }).catch(function (error) {
+      dispatch(reblogFail(status, error));
+    });
+  };
+}
+
+export function reblogRequest(status) {
+  return {
+    type: REBLOG_REQUEST,
+    status: status
+  };
+}
+
+export function reblogSuccess(status, response) {
+  return {
+    type: REBLOG_SUCCESS,
+    status: status,
+    response: response
+  };
+}
+
+export function reblogFail(status, error) {
+  return {
+    type: REBLOG_FAIL,
+    status: status,
+    error: error
+  };
+}
+
+export function favourite(status) {
+  return function (dispatch, getState) {
+    dispatch(favouriteRequest(status));
+
+    api(getState).post(`/api/statuses/${status.get('id')}/favourite`).then(function (response) {
+      dispatch(favouriteSuccess(status, response.data));
+    }).catch(function (error) {
+      dispatch(favouriteFail(status, error));
+    });
+  };
+}
+
+export function favouriteRequest(status) {
+  return {
+    type: FAVOURITE_REQUEST,
+    status: status
+  };
+}
+
+export function favouriteSuccess(status, response) {
+  return {
+    type: FAVOURITE_SUCCESS,
+    status: status,
+    response: response
+  };
+}
+
+export function favouriteFail(status, error) {
+  return {
+    type: FAVOURITE_FAIL,
+    status: status,
+    error: error
+  };
+}
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
index c23f977e4..b41752890 100644
--- a/app/assets/javascripts/components/components/icon_button.jsx
+++ b/app/assets/javascripts/components/components/icon_button.jsx
@@ -6,12 +6,14 @@ const IconButton = React.createClass({
     title: React.PropTypes.string.isRequired,
     icon: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func.isRequired,
-    size: React.PropTypes.number
+    size: React.PropTypes.number,
+    active: React.PropTypes.bool
   },
 
   getDefaultProps () {
     return {
-      size: 18
+      size: 18,
+      active: false
     };
   },
 
@@ -24,7 +26,7 @@ const IconButton = React.createClass({
 
   render () {
     return (
-      <a href='#' title={this.props.title} className='icon-button' onClick={this.handleClick} style={{ display: 'inline-block', fontSize: `${this.props.size}px`, width: `${this.props.size}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`}}>
+      <a href='#' title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={{ display: 'inline-block', fontSize: `${this.props.size}px`, width: `${this.props.size}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`}}>
         <i className={`fa fa-fw fa-${this.props.icon}`}></i>
       </a>
     );
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index e17df86d9..7885360e6 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -8,7 +8,9 @@ const Status = React.createClass({
 
   propTypes: {
     status: ImmutablePropTypes.map.isRequired,
-    onReply: React.PropTypes.func
+    onReply: React.PropTypes.func,
+    onFavourite: React.PropTypes.func,
+    onReblog: React.PropTypes.func
   },
 
   mixins: [PureRenderMixin],
@@ -17,6 +19,14 @@ const Status = React.createClass({
     this.props.onReply(this.props.status);
   },
 
+  handleFavouriteClick () {
+    this.props.onFavourite(this.props.status);
+  },
+
+  handleReblogClick () {
+    this.props.onReblog(this.props.status);
+  },
+
   render () {
     var content = { __html: this.props.status.get('content') };
     var status  = this.props.status;
@@ -43,8 +53,8 @@ const Status = React.createClass({
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
           <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
-          <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reblog' icon='retweet' /></div>
-          <div style={{ float: 'left'}}><IconButton title='Favourite' icon='star' /></div>
+          <div style={{ float: 'left', marginRight: '10px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
+          <div style={{ float: 'left'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} /></div>
         </div>
       </div>
     );
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
index 5a89d6d60..5bd21edec 100644
--- a/app/assets/javascripts/components/components/status_list.jsx
+++ b/app/assets/javascripts/components/components/status_list.jsx
@@ -5,7 +5,10 @@ import PureRenderMixin    from 'react-addons-pure-render-mixin';
 const StatusList = React.createClass({
 
   propTypes: {
-    statuses: ImmutablePropTypes.list.isRequired
+    statuses: ImmutablePropTypes.list.isRequired,
+    onReply: React.PropTypes.func,
+    onReblog: React.PropTypes.func,
+    onFavourite: React.PropTypes.func
   },
 
   mixins: [PureRenderMixin],
@@ -15,7 +18,7 @@ const StatusList = React.createClass({
       <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}>
         <div>
           {this.props.statuses.map((status) => {
-            return <Status key={status.get('id')} status={status} onReply={this.props.onReply} />;
+            return <Status key={status.get('id')} status={status} onReply={this.props.onReply} onReblog={this.props.onReblog} onFavourite={this.props.onFavourite} />;
           })}
         </div>
       </div>
diff --git a/app/assets/javascripts/components/containers/status_list_container.jsx b/app/assets/javascripts/components/containers/status_list_container.jsx
index 9cdd7f4c2..cc6333a81 100644
--- a/app/assets/javascripts/components/containers/status_list_container.jsx
+++ b/app/assets/javascripts/components/containers/status_list_container.jsx
@@ -1,6 +1,7 @@
-import { connect }      from 'react-redux';
-import StatusList       from '../components/status_list';
-import { replyCompose } from '../actions/compose';
+import { connect }           from 'react-redux';
+import StatusList            from '../components/status_list';
+import { replyCompose }      from '../actions/compose';
+import { reblog, favourite } from '../actions/interactions';
 
 const mapStateToProps = function (state, props) {
   return {
@@ -12,6 +13,14 @@ const mapDispatchToProps = function (dispatch) {
   return {
     onReply: function (status) {
       dispatch(replyCompose(status));
+    },
+
+    onFavourite: function (status) {
+      dispatch(favourite(status));
+    },
+
+    onReblog: function (status) {
+      dispatch(reblog(status));
     }
   };
 };
diff --git a/app/assets/javascripts/components/reducers/timelines.jsx b/app/assets/javascripts/components/reducers/timelines.jsx
index 2e0f70c24..983518df7 100644
--- a/app/assets/javascripts/components/reducers/timelines.jsx
+++ b/app/assets/javascripts/components/reducers/timelines.jsx
@@ -1,16 +1,30 @@
-import { TIMELINE_SET, TIMELINE_UPDATE } from '../actions/timelines';
-import Immutable                         from 'immutable';
+import { TIMELINE_SET, TIMELINE_UPDATE }    from '../actions/timelines';
+import { REBLOG_SUCCESS, FAVOURITE_SUCCESS } from '../actions/interactions';
+import Immutable                            from 'immutable';
 
 const initialState = Immutable.Map();
 
+function updateMatchingStatuses(state, needle, callback) {
+  return state.map(function (list) {
+    return list.map(function (status) {
+      if (status.get('id') === needle.get('id')) {
+        return callback(status);
+      }
+
+      return status;
+    });
+  });
+};
+
 export default function timelines(state = initialState, action) {
   switch(action.type) {
     case TIMELINE_SET:
       return state.set(action.timeline, Immutable.fromJS(action.statuses));
     case TIMELINE_UPDATE:
-      return state.update(action.timeline, function (list) {
-        return list.unshift(Immutable.fromJS(action.status));
-      });
+      return state.update(action.timeline, list => list.unshift(Immutable.fromJS(action.status)));
+    case REBLOG_SUCCESS:
+    case FAVOURITE_SUCCESS:
+      return updateMatchingStatuses(state, action.status, () => Immutable.fromJS(action.response));
     default:
       return state;
   }
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 11f4cb49f..4050babf9 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -22,6 +22,10 @@
     color: #535b72;
     cursor: default;
   }
+
+  &.active {
+    color: #2b90d9;
+  }
 }
 
 .compose-drawer__textarea {