From 1bd40d1a407f33682efed063b8e0303bb9e146c2 Mon Sep 17 00:00:00 2001
From: Chris Duarte <csduarte@users.noreply.github.com>
Date: Tue, 31 Jan 2017 19:02:06 -0800
Subject: [PATCH] Channel info favorite (#210)

* Enable toggling of favorite channel from channel_info

* Change this binding

* Handle favorite toggle with state
---
 app/scenes/channel_info/channel_info.js       | 32 ++++++++++++++++---
 .../channel_info/channel_info_container.js    |  5 ++-
 app/scenes/channel_info/channel_info_row.js   |  2 +-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/app/scenes/channel_info/channel_info.js b/app/scenes/channel_info/channel_info.js
index 13285097b..392c25f92 100644
--- a/app/scenes/channel_info/channel_info.js
+++ b/app/scenes/channel_info/channel_info.js
@@ -41,20 +41,44 @@ export default class ChannelInfo extends PureComponent {
         theme: PropTypes.object.isRequired,
         actions: PropTypes.shape({
             getChannelStats: PropTypes.func.isRequired,
-            goToChannelMembers: PropTypes.func.isRequired
+            goToChannelMembers: PropTypes.func.isRequired,
+            markFavorite: PropTypes.func.isRequired,
+            unmarkFavorite: PropTypes.func.isRequired
         })
     }
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isFavorite: this.props.isFavorite
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const isFavorite = nextProps.isFavorite;
+        if (isFavorite !== this.state.isFavorite) {
+            this.setState({isFavorite});
+        }
+    }
+
     componentDidMount() {
         this.props.actions.getChannelStats(this.props.currentChannel.team_id, this.props.currentChannel.id);
     }
 
+    handleFavorite = () => {
+        const {isFavorite, actions, currentChannel} = this.props;
+        const {markFavorite, unmarkFavorite} = actions;
+        const toggleFavorite = isFavorite ? unmarkFavorite : markFavorite;
+        this.setState({isFavorite: !isFavorite});
+        toggleFavorite(currentChannel.id);
+    }
+
     render() {
         const {
             currentChannel,
             currentChannelCreatorName,
             currentChannelMemberCount,
-            isFavorite,
             theme
         } = this.props;
 
@@ -72,9 +96,9 @@ export default class ChannelInfo extends PureComponent {
                         purpose={currentChannel.purpose}
                     />
                     <ChannelInfoRow
-                        action={() => true}
+                        action={this.handleFavorite}
                         defaultMessage='Favorite'
-                        detail={isFavorite}
+                        detail={this.state.isFavorite}
                         icon='star-o'
                         textId='mobile.routes.channelInfo.favorite'
                         togglable={true}
diff --git a/app/scenes/channel_info/channel_info_container.js b/app/scenes/channel_info/channel_info_container.js
index 4b92cb698..206aa87a5 100644
--- a/app/scenes/channel_info/channel_info_container.js
+++ b/app/scenes/channel_info/channel_info_container.js
@@ -6,6 +6,7 @@ import {connect} from 'react-redux';
 
 import {goToChannelMembers} from 'app/actions/navigation';
 import {getChannelStats} from 'service/actions/channels';
+import {markFavorite, unmarkFavorite} from 'app/actions/views/channel';
 import {getCurrentChannel, getCurrentChannelStats, getChannelsByCategory} from 'service/selectors/entities/channels';
 import {getTheme} from 'service/selectors/entities/preferences';
 import {getUser} from 'service/selectors/entities/users';
@@ -34,7 +35,9 @@ function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
             getChannelStats,
-            goToChannelMembers
+            goToChannelMembers,
+            markFavorite,
+            unmarkFavorite
         }, dispatch)
     };
 }
diff --git a/app/scenes/channel_info/channel_info_row.js b/app/scenes/channel_info/channel_info_row.js
index bbd3627d0..e2aa7cb3a 100644
--- a/app/scenes/channel_info/channel_info_row.js
+++ b/app/scenes/channel_info/channel_info_row.js
@@ -63,7 +63,7 @@ function channelInfoRow(props) {
             <Text style={style.detail}>{detail}</Text>
             {togglable ?
                 <Switch
-                    action={action}
+                    onValueChange={action}
                     value={detail}
                 /> :
                 <Icon