Mp containers (#26)

* Use containers to map state and dispatch

* Remove unnecessary aslint config

* Remove container from route function

* Change containers to pure containers

src/components/channels_list_view.js

@@ -2,15 +2,10 @@
 // See License.txt for license information.
 
 import React, {Component, PropTypes} from 'react';
-import {bindActionCreators} from 'redux';
-import {connect} from 'react-redux';
-
 import {ListView, StyleSheet, View, Text} from 'react-native';
 const {DataSource} = ListView;
 import {Actions as Routes} from 'react-native-router-flux';
 import _ from 'lodash';
-
-import * as channelActions from 'actions/channels';
 import ErrorText from 'components/error_text';
 
 const styles = StyleSheet.create({
@@ -28,7 +23,7 @@ const propTypes = {
     actions: PropTypes.object.isRequired
 };
 
-class ChannelsList extends Component {
+class ChannelsListView extends Component {
     static propTypes = propTypes;
     ds: DataSource = new DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 
@@ -67,16 +62,4 @@ class ChannelsList extends Component {
     }
 }
 
-function mapStateToProps(state) {
-    return {
-        channels: state.entities.channels
-    };
-}
-
-function mapDispatchToProps(dispatch) {
-    return {
-        actions: bindActionCreators(channelActions, dispatch)
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChannelsList);
+export default ChannelsListView;

src/components/login_view.js

@@ -2,13 +2,9 @@
 // See License.txt for license information.
 
 import React, {Component, PropTypes} from 'react';
-
-import {bindActionCreators} from 'redux';
-import {connect} from 'react-redux';
 import {Image, StyleSheet, Text, TextInput, View} from 'react-native';
 import {Actions as Routes} from 'react-native-router-flux';
 
-import * as loginActions from 'actions/login';
 import Button from 'components/button';
 import ErrorText from 'components/error_text';
 import {GlobalStyles} from 'styles';
@@ -32,7 +28,7 @@ const propTypes = {
     actions: PropTypes.object.isRequired
 };
 
-class Login extends Component {
+export default class LoginView extends Component {
     static propTypes = propTypes;
     state = {
         loginId: '',
@@ -42,7 +38,7 @@ class Login extends Component {
     componentWillReceiveProps(props) {
         if (this.props.login.status === 'fetching' &&
           props.login.status === 'fetched') {
-            Routes.goToSelectTeam(); // eslint-disable-line new-cap
+            Routes.goToSelectTeam();
         }
     }
 
@@ -89,17 +85,3 @@ class Login extends Component {
         );
     }
 }
-
-function mapStateToProps(state) {
-    return {
-        login: state.views.login
-    };
-}
-
-function mapDispatchToProps(dispatch) {
-    return {
-        actions: bindActionCreators(loginActions, dispatch)
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Login);

src/components/posts_list_view.js

@@ -3,12 +3,8 @@
 
 import React, {Component, PropTypes} from 'react';
 
-import {bindActionCreators} from 'redux';
-import {connect} from 'react-redux';
 import {StyleSheet, Text, View} from 'react-native';
 import _ from 'lodash';
-
-import * as postActions from 'actions/posts';
 import ErrorText from 'components/error_text';
 
 const styles = StyleSheet.create({
@@ -28,7 +24,7 @@ const propTypes = {
     actions: PropTypes.object.isRequired
 };
 
-class PostsList extends Component {
+export default class PostsListView extends Component {
     static propTypes = propTypes;
 
     componentWillMount() {
@@ -52,19 +48,3 @@ class PostsList extends Component {
         );
     }
 }
-
-function mapStateToProps(state) {
-    return {
-        posts: state.entities.posts,
-        currentTeamId: state.entities.teams.currentTeamId,
-        currentChannelId: state.entities.channels.currentChannelId
-    };
-}
-
-function mapDispatchToProps(dispatch) {
-    return {
-        actions: bindActionCreators(postActions, dispatch)
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(PostsList);

src/components/select_server_view.js

@@ -5,8 +5,6 @@ import React, {Component} from 'react';
 
 import Client from 'client/client_instance.js';
 import Config from 'config/config.js';
-import {connect} from 'react-redux';
-import {getPing} from 'actions/general';
 
 import Button from './button';
 import {Image, StyleSheet, Text, TextInput, View} from 'react-native';
@@ -33,10 +31,9 @@ const styles = StyleSheet.create({
 
 class SelectServerView extends Component {
     static propTypes = {
-        onProceed: React.PropTypes.func,
-        getPing: React.PropTypes.func.isRequired,
         ping: React.PropTypes.object.isRequired,
-        device: React.PropTypes.object.isRequired
+        device: React.PropTypes.object.isRequired,
+        actions: React.PropTypes.object.isRequired
     }
 
     constructor(props) {
@@ -51,7 +48,7 @@ class SelectServerView extends Component {
         Client.setUrl(this.state.serverUrl);
         Routes.goToLogin();
 
-        // this.props.getPing().then(() => {
+        // this.props.actions.getPing().then(() => {
         //     AsyncStorage.setItem('serverUrl', this.state.serverUrl, () => {
         //         if (!this.props.ping.error) {
         //             this.props.onProceed();
@@ -91,13 +88,4 @@ class SelectServerView extends Component {
     }
 }
 
-function mapStateToProps(state) {
-    return {
-        ping: state.entities.general.ping,
-        device: state.views.device
-    };
-}
-
-export default connect(mapStateToProps, {
-    getPing
-})(SelectServerView);
+export default SelectServerView;

src/components/select_team_view.js

@@ -3,13 +3,10 @@
 
 import React, {Component, PropTypes} from 'react';
 
-import {bindActionCreators} from 'redux';
-import {connect} from 'react-redux';
 import {Image, StyleSheet, Picker, View} from 'react-native';
 import {Actions as Routes} from 'react-native-router-flux';
 import _ from 'lodash';
 
-import * as teamActions from 'actions/teams';
 import ErrorText from 'components/error_text';
 import logo from 'images/logo.png';
 
@@ -31,7 +28,7 @@ const propTypes = {
     actions: PropTypes.object.isRequired
 };
 
-class SelectTeam extends Component {
+export default class SelectTeamView extends Component {
     static propTypes = propTypes;
 
     componentWillMount() {
@@ -71,17 +68,3 @@ class SelectTeam extends Component {
         );
     }
 }
-
-function mapStateToProps(state) {
-    return {
-        teams: state.entities.teams
-    };
-}
-
-function mapDispatchToProps(dispatch) {
-    return {
-        actions: bindActionCreators(teamActions, dispatch)
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SelectTeam);

src/containers/channels_list_container.js

@@ -0,0 +1,21 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import * as channelActions from 'actions/channels';
+import ChannelsListView from 'components/channels_list_view';
+
+function mapStateToProps(state) {
+    return {
+        channels: state.entities.channels
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators(channelActions, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelsListView);

src/containers/login_container.js

@@ -0,0 +1,21 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import * as loginActions from 'actions/login';
+import LoginView from 'components/login_view';
+
+function mapStateToProps(state) {
+    return {
+        login: state.views.login
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators(loginActions, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginView);

src/containers/posts_list_container.js

@@ -0,0 +1,23 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import * as postActions from 'actions/posts';
+import PostsListView from 'components/posts_list_view';
+
+function mapStateToProps(state) {
+    return {
+        posts: state.entities.posts,
+        currentTeamId: state.entities.teams.currentTeamId,
+        currentChannelId: state.entities.channels.currentChannelId
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators(postActions, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PostsListView);

src/containers/select_server_container.js

@@ -0,0 +1,22 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import {getPing} from 'actions/general';
+import SelectServerView from 'components/select_server_view';
+
+function mapStateToProps(state) {
+    return {
+        ping: state.entities.general.ping,
+        device: state.views.device
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({getPing}, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectServerView);

src/containers/select_team_container.js

@@ -0,0 +1,21 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import * as teamActions from 'actions/teams';
+import SelectTeamView from 'components/select_team_view';
+
+function mapStateToProps(state) {
+    return {
+        teams: state.entities.teams
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators(teamActions, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectTeamView);

src/routes.js

@@ -5,11 +5,11 @@
 import React, {Component} from 'react';
 import {Scene, Router} from 'react-native-router-flux';
 
-import ChannelsList from 'components/channels_list';
-import Login from 'components/login';
-import SelectServerView from 'components/select_server_view';
-import SelectTeam from 'components/select_team';
-import PostsList from 'components/posts_list';
+import ChannelsListContainer from 'containers/channels_list_container';
+import LoginContainer from 'containers/login_container';
+import SelectServerContainer from 'containers/select_server_container';
+import SelectTeamContainer from 'containers/select_team_container';
+import PostsListContainer from 'containers/posts_list_container';
 
 export default class Routes extends Component {
     render() {
@@ -18,34 +18,28 @@ export default class Routes extends Component {
                 <Scene key='root'>
                     <Scene
                         key='goToLogin'
-                        component={Login}
+                        component={LoginContainer}
                         title='Login'
                     />
                     <Scene
-                        key='goToSelectServerView'
-                        component={SelectServerView}
-                        title='Enter Server URL'
-                        initial={true}
-                    />
-                    <Scene
-                        key='goToSelectServerView'
-                        component={SelectServerView}
+                        key='goToSelectServer'
+                        component={SelectServerContainer}
                         title='Enter Server URL'
                         initial={true}
                     />
                     <Scene
                         key='goToChannelsList'
-                        component={ChannelsList}
+                        component={ChannelsListContainer}
                         title='Channels'
                     />
                     <Scene
                         key='goToSelectTeam'
-                        component={SelectTeam}
+                        component={SelectTeamContainer}
                         title='Select Team'
                     />
                     <Scene
                         key='goToPostsList'
-                        component={PostsList}
+                        component={PostsListContainer}
                         title='Posts List'
                     />
                 </Scene>