Commit 85c19ca2 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Revert "No more local state"

This reverts commit a502b3a7.
parent a502b3a7
import * as types from './actionTypes'; import * as types from './actionTypes';
export function enterUsername(username) { export function login(username, password) {
return { return {
type: types.ENTER_USERNAME, type: types.LOGIN,
username, username,
};
}
export function enterPassword(password) {
return {
type: types.ENTER_PASSWORD,
password, password,
}; };
} }
export function login() {
return {
type: types.LOGIN,
};
}
export const LOGIN = 'LOGIN'; export const LOGIN = 'LOGIN';
export const ENTER_USERNAME = 'ENTER_USERNAME';
export const ENTER_PASSWORD = 'ENTER_PASSWORD';
import React from 'react'; import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native'; import { View, TextInput, Button, Text } from 'react-native';
const Login = (props) => { export default class Login extends Component {
const { enterPassword, loginError, login } = props; constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
this.login = props.login;
}
onPress() {
return this.login.bind(null, this.state.username, this.state.password);
}
render() {
const { loginError } = this.props;
return ( return (
<View> <View>
<TextInput <TextInput
placeholder="Username" placeholder="Username"
onChangeText={username => this.setState({ username })}
/> />
<TextInput <TextInput
placeholder="Password" placeholder="Password"
secureTextEntry secureTextEntry
onChangeText={enterPassword} onChangeText={password => this.setState({ password })}
/> />
<Button title="Log in" onPress={login} /> <Button title="Log in" onPress={this.onPress()} />
<Text>{ loginError ? 'Login faal' : '' }</Text> <Text>{ loginError ? 'Login faal' : '' }</Text>
</View> </View>
); );
}; }
}
Login.propTypes = { Login.propTypes = {
login: React.PropTypes.func.isRequired, login: React.PropTypes.func.isRequired,
enterPassword: React.PropTypes.func.isRequired,
loginError: React.PropTypes.bool.isRequired, loginError: React.PropTypes.bool.isRequired,
}; };
export default Login;
import React from 'react'; import React from 'react';
// import { Navigator } from 'react-native'; import { bindActionCreators } from 'redux';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Login from '../components/Login'; import Login from '../components/Login';
import * as ThaliAppActions from '../actions/ThaliAppActions'; import * as ThaliAppActions from '../actions/ThaliAppActions';
const ThaliApp = props => ( const ThaliApp = (props) => {
<Login {...props} /> const { state, actions } = props;
return (
<Login
loggedIn={state.loggedIn}
loginError={state.loginError}
{...actions}
/>
); );
};
ThaliApp.propTypes = { ThaliApp.propTypes = {
login: React.PropTypes.func.isRequired, state: React.PropTypes.objectOf(React.PropTypes.oneOfType([
loggedIn: React.PropTypes.bool.isRequired, React.PropTypes.string,
loginError: React.PropTypes.bool.isRequired, React.PropTypes.bool,
React.PropTypes.number,
])).isRequired,
actions: React.PropTypes.objectOf(React.PropTypes.func).isRequired,
}; };
const mapStateToProps = state => ({
loggedIn: state.login.loggedIn,
loginError: state.login.loginError,
});
const mapDispatchToProps = dispatch => ({
login: () => dispatch(ThaliAppActions.login()),
enterPassword: password => dispatch(ThaliAppActions.enterPassword(password)),
});
export default connect( export default connect(
mapStateToProps, state => (
mapDispatchToProps, { state: state.login }
),
dispatch => (
{ actions: bindActionCreators(ThaliAppActions, dispatch) }
),
)(ThaliApp); )(ThaliApp);
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux'; import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import * as reducers from '../reducers'; import * as reducers from '../reducers';
import ThaliApp from './ThaliApp'; import ThaliApp from './ThaliApp';
...@@ -9,4 +10,5 @@ const createStoreWithMiddleware = applyMiddleware(thunk)(createStore); ...@@ -9,4 +10,5 @@ const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers); const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer); const store = createStoreWithMiddleware(reducer);
const Main = () => <Provider store={store}><ThaliApp /></Provider>; const Main = () => <Provider store={store}><ThaliApp /></Provider>;
export default Main; export default Main;
...@@ -3,22 +3,16 @@ import * as types from '../actions/actionTypes'; ...@@ -3,22 +3,16 @@ import * as types from '../actions/actionTypes';
const initialState = { const initialState = {
loggedIn: false, loggedIn: false,
loginError: false, loginError: false,
username: '',
password: '',
}; };
export default function typing(state = initialState, action = {}) { export default function login(state = initialState, action = {}) {
switch (action.type) { switch (action.type) {
case types.ENTER_USERNAME:
return { ...state, username: action.username };
case types.ENTER_PASSWORD:
return { ...state, password: action.password };
case types.LOGIN: case types.LOGIN:
if (state.password === '42') { if (action.password === '42') {
return { ...state, loginError: false, loggedIn: true }; return { ...state, loginError: false, loggedIn: true };
} }
return { ...state, loginError: true }; return { ...state, loginError: true };
default: default:
return state; return { ...state };
} }
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment