Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 32cad54

Browse files
bartonhammondbartonhammond
committed
Merge branch 'improve-mapStateToProps' of https://github.com/moduv5/snowflake into moduv5-improve-mapStateToProps
2 parents b0c238a + b5da50d commit 32cad54

9 files changed

Lines changed: 147 additions & 120 deletions

File tree

‎src/components/LoginRender.js‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/**
22
* # Login.js
3-
*
3+
*
44
* This class is a little complicated as it handles multiple states.
55
*
66
*/
77
'use strict';
88
/**
99
* ## Imports
10-
*
11-
* Redux
10+
*
11+
* Redux
1212
*/
1313
import { bindActionCreators } from 'redux';
1414
import { connect } from 'react-redux';
@@ -21,7 +21,7 @@ import * as globalActions from '../reducers/global/globalActions';
2121

2222
/**
2323
* Immutable
24-
*/
24+
*/
2525
import {Map} from 'immutable';
2626

2727
/**
@@ -47,7 +47,7 @@ import FormButton from '../components/FormButton';
4747
*/
4848
import LoginForm from '../components/LoginForm';
4949
/**
50-
* The itemCheckbox will toggle the display of the password fields
50+
* The itemCheckbox will toggle the display of the password fields
5151
*/
5252
import ItemCheckbox from '../components/ItemCheckbox';
5353

@@ -107,11 +107,6 @@ const actions = [
107107
globalActions
108108
];
109109

110-
function mapStateToProps(state) {
111-
return {
112-
};
113-
}
114-
115110
function mapDispatchToProps(dispatch) {
116111
const creators = Map()
117112
.merge(...actions)
@@ -144,7 +139,7 @@ class LoginRender extends Component {
144139
}
145140
};
146141
}
147-
142+
148143
/**
149144
* ### componentWillReceiveProps
150145
* As the properties are validated they will be set here.
@@ -159,7 +154,7 @@ class LoginRender extends Component {
159154
}
160155
});
161156
}
162-
157+
163158
/**
164159
* ### onChange
165160
*
@@ -172,7 +167,7 @@ class LoginRender extends Component {
172167
onChange(value) {
173168
if (value.username != '') {
174169
this.props.actions.onAuthFormFieldChange('username',value.username);
175-
}
170+
}
176171
if (value.email != '') {
177172
this.props.actions.onAuthFormFieldChange('email',value.email);
178173
}
@@ -209,29 +204,29 @@ class LoginRender extends Component {
209204
}} >
210205
<Text>{I18n.t("LoginRender.already_have_account")}</Text>
211206
</TouchableHighlight>;
212-
207+
213208
let register =
214-
<TouchableHighlight
209+
<TouchableHighlight
215210
onPress={() => {
216211
actions.registerState();
217212
Actions.Register();
218213
}} >
219214
<Text>{I18n.t("LoginRender.register")}</Text>
220215
</TouchableHighlight>;
221-
216+
222217
switch(messageType) {
223218
case FORGOT_PASSWORD:
224219
return forgotPassword;
225220
case LOGIN:
226221
return alreadyHaveAccount;
227-
case REGISTER:
222+
case REGISTER:
228223
return register;
229224
}
230225
}
231-
226+
232227
/**
233228
* ### render
234-
* Setup some default presentations and render
229+
* Setup some default presentations and render
235230
*/
236231
render() {
237232
var formType = this.props.formType;
@@ -240,16 +235,16 @@ class LoginRender extends Component {
240235
var displayPasswordCheckbox = this.props.displayPasswordCheckbox;
241236
var leftMessageType = this.props.leftMessageType;
242237
var rightMessageType = this.props.rightMessageType;
243-
238+
244239
var passwordCheckbox = <Text/>;
245240
let leftMessage = this.getMessage(leftMessageType, this.props.actions);
246241
let rightMessage = this.getMessage(rightMessageType, this.props.actions);
247-
242+
248243
let self = this;
249244

250245
// display the login / register / change password screens
251246
this.errorAlert.checkError(this.props.auth.form.error);
252-
247+
253248
/**
254249
* Toggle the display of the Password and PasswordAgain fields
255250
*/
@@ -270,11 +265,11 @@ class LoginRender extends Component {
270265
/**
271266
* The LoginForm is now defined with the required fields. Just
272267
* surround it with the Header and the navigation messages
273-
* Note how the button too is disabled if we're fetching. The
274-
* header props are mostly for support of Hot reloading.
268+
* Note how the button too is disabled if we're fetching. The
269+
* header props are mostly for support of Hot reloading.
275270
* See the docs for Header for more info.
276271
*/
277-
272+
278273
return(
279274
<View style={styles.container}>
280275
<ScrollView horizontal={false} width={width} height={height}>
@@ -283,9 +278,9 @@ class LoginRender extends Component {
283278
showState={this.props.global.showState}
284279
currentState={this.props.global.currentState}
285280
onGetState={this.props.actions.getState}
286-
onSetState={this.props.actions.setState}
281+
onSetState={this.props.actions.setState}
287282
/>
288-
283+
289284
<View style={styles.inputs}>
290285
<LoginForm
291286
formType={formType}
@@ -295,23 +290,23 @@ class LoginRender extends Component {
295290
/>
296291
{passwordCheckbox}
297292
</View>
298-
293+
299294
<FormButton
300295
isDisabled={!this.props.auth.form.isValid || this.props.auth.form.isFetching}
301296
onPress={onButtonPress}
302297
buttonText={loginButtonText}/>
303-
298+
304299
<View >
305300
<View style={styles.forgotContainer}>
306301
{leftMessage}
307302
{rightMessage}
308303
</View>
309-
</View>
310-
304+
</View>
305+
311306
</View>
312307
</ScrollView>
313308
</View>
314309
);
315310
}
316311
}
317-
export default connect(mapStateToProps, mapDispatchToProps)(LoginRender);
312+
export default connect(null, mapDispatchToProps)(LoginRender);

‎src/containers/App.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/**
22
* # app.js
3-
* Display startup screen and
4-
* getSessionTokenAtStartup which will navigate upon completion
3+
* Display startup screen and
4+
* getSessionTokenAtStartup which will navigate upon completion
5+
*
6+
*
57
*
6-
*
7-
*
88
*/
99
'use strict';
1010
/*
1111
* ## Imports
12-
*
12+
*
1313
* Imports from redux
1414
*/
1515
import { bindActionCreators } from 'redux';
@@ -32,7 +32,7 @@ import * as globalActions from '../reducers/global/globalActions';
3232
*/
3333
import React from 'react';
3434
import
35-
{
35+
{
3636
StyleSheet,
3737
View,
3838
Text
@@ -59,7 +59,16 @@ const actions = [
5959
*/
6060
function mapStateToProps(state) {
6161
return {
62-
...state
62+
deviceVersion: state.device.version,
63+
auth: {
64+
form: {
65+
isFetching: state.auth.form.isFetching,
66+
},
67+
},
68+
global: {
69+
currentState: state.global.currentState,
70+
showState: state.global.showState,
71+
},
6372
};
6473
};
6574

@@ -110,10 +119,10 @@ I18n.translations = Translations;
110119
let App = React.createClass({
111120
/**
112121
* See if there's a sessionToken from a previous login
113-
*
122+
*
114123
*/
115124
componentDidMount() {
116-
//Use a timer so App screen is displayed
125+
//Use a timer so App screen is displayed
117126
this.setTimeout(
118127
() => {
119128
this.props.actions.getSessionToken();
@@ -122,18 +131,18 @@ let App = React.createClass({
122131
);
123132

124133
},
125-
134+
126135
render() {
127136
return(
128137
<View style={ styles.container }>
129138
<Header isFetching={this.props.auth.form.isFetching}
130139
showState={this.props.global.showState}
131140
currentState={this.props.global.currentState}
132141
onGetState={this.props.actions.getState}
133-
onSetState={this.props.actions.setState}
142+
onSetState={this.props.actions.setState}
134143
/>
135-
136-
<Text style={ styles.summary }>Snowflake {I18n.t("App.version")}: {this.props.device.version}</Text>
144+
145+
<Text style={ styles.summary }>Snowflake {I18n.t("App.version")}: {this.props.deviceVersion}</Text>
137146
</View>
138147
);
139148
}
@@ -144,4 +153,3 @@ reactMixin(App.prototype, TimerMixin);
144153
* Connect the properties
145154
*/
146155
export default connect(mapStateToProps, mapDispatchToProps)(App);
147-

‎src/containers/ForgotPassword.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
22
* # ForgotPassword.js
3-
*
3+
*
44
*/
55
'use strict';
66
/**
77
* ## Imports
8-
*
9-
* Redux
8+
*
9+
* Redux
1010
*/
1111
import { bindActionCreators } from 'redux';
1212
import { connect } from 'react-redux';
@@ -18,7 +18,7 @@ import * as authActions from '../reducers/auth/authActions';
1818

1919
/**
2020
* Immutable
21-
*/
21+
*/
2222
import {Map} from 'immutable';
2323

2424
/**
@@ -32,7 +32,7 @@ import LoginRender from '../components/LoginRender';
3232
import React from 'react';
3333

3434
const {
35-
REGISTER,
35+
REGISTER,
3636
LOGIN,
3737
FORGOT_PASSWORD
3838
} = require('../lib/constants').default;
@@ -46,7 +46,8 @@ const actions = [
4646

4747
function mapStateToProps(state) {
4848
return {
49-
...state
49+
auth: state.auth,
50+
global: state.global,
5051
};
5152
}
5253

@@ -82,7 +83,7 @@ let ForgotPassword = React.createClass({
8283
);
8384

8485
return(
85-
<LoginRender
86+
<LoginRender
8687
formType={ FORGOT_PASSWORD }
8788
loginButtonText={ loginButtonText }
8889
onButtonPress={ onButtonPress }

‎src/containers/Login.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/**
22
* # Login.js
3-
*
4-
* The container to display the Login form
5-
*
3+
*
4+
* The container to display the Login form
5+
*
66
*/
77
'use strict';
88
/**
99
* ## Imports
10-
*
11-
* Redux
10+
*
11+
* Redux
1212
*/
1313
import { bindActionCreators } from 'redux';
1414
import { connect } from 'react-redux';
@@ -20,7 +20,7 @@ import * as authActions from '../reducers/auth/authActions';
2020

2121
/**
2222
* Immutable
23-
*/
23+
*/
2424
import {Map} from 'immutable';
2525

2626
/**
@@ -35,8 +35,8 @@ import React from 'react';
3535

3636
const {
3737
LOGIN,
38-
REGISTER,
39-
FORGOT_PASSWORD
38+
REGISTER,
39+
FORGOT_PASSWORD
4040
} = require('../lib/constants').default;
4141

4242
/**
@@ -48,7 +48,8 @@ const actions = [
4848

4949
function mapStateToProps(state) {
5050
return {
51-
...state
51+
auth: state.auth,
52+
global: state.global,
5253
};
5354
}
5455

@@ -81,12 +82,12 @@ let Login = React.createClass({
8182
let loginButtonText = I18n.t("Login.login");
8283
let onButtonPress = buttonPressHandler.bind(null,
8384
this.props.actions.login,
84-
this.props.auth.form.fields.username,
85+
this.props.auth.form.fields.username,
8586
this.props.auth.form.fields.password
8687
);
8788

8889
return(
89-
<LoginRender
90+
<LoginRender
9091
formType={ LOGIN }
9192
loginButtonText={ loginButtonText }
9293
onButtonPress={ onButtonPress }

0 commit comments

Comments
 (0)