Commit a502b3a7 authored by Wietse Kuipers's avatar Wietse Kuipers

No more local state

parent d6beacd3
import * as types from './actionTypes';
export function login(username, password) {
export function enterUsername(username) {
return {
type: types.LOGIN,
type: types.ENTER_USERNAME,
username,
};
}
export function enterPassword(password) {
return {
type: types.ENTER_PASSWORD,
password,
};
}
export function login() {
return {
type: types.LOGIN,
};
}
export const LOGIN = 'LOGIN';
export const ENTER_USERNAME = 'ENTER_USERNAME';
export const ENTER_PASSWORD = 'ENTER_PASSWORD';
import React, { Component } from 'react';
import React from 'react';
import { View, TextInput, Button, Text } from 'react-native';
export default class Login extends Component {
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 (
<View>
<TextInput
placeholder="Username"
onChangeText={username => this.setState({ username })}
/>
<TextInput
placeholder="Password"
secureTextEntry
onChangeText={password => this.setState({ password })}
/>
<Button title="Log in" onPress={this.onPress()} />
<Text>{ loginError ? 'Login faal' : '' }</Text>
</View>
);
}
}
const Login = (props) => {
const { enterPassword, loginError, login } = props;
return (
<View>
<TextInput
placeholder="Username"
/>
<TextInput
placeholder="Password"
secureTextEntry
onChangeText={enterPassword}
/>
<Button title="Log in" onPress={login} />
<Text>{ loginError ? 'Login faal' : '' }</Text>
</View>
);
};
Login.propTypes = {
login: React.PropTypes.func.isRequired,
enterPassword: React.PropTypes.func.isRequired,
loginError: React.PropTypes.bool.isRequired,
};
export default Login;
import React from 'react';
import { bindActionCreators } from 'redux';
// import { Navigator } from 'react-native';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Login from '../components/Login';
import * as ThaliAppActions from '../actions/ThaliAppActions';
const ThaliApp = (props) => {
const { state, actions } = props;
return (
<Login
loggedIn={state.loggedIn}
loginError={state.loginError}
{...actions}
/>
const ThaliApp = props => (
<Login {...props} />
);
};
ThaliApp.propTypes = {
state: React.PropTypes.objectOf(React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.bool,
React.PropTypes.number,
])).isRequired,
actions: React.PropTypes.objectOf(React.PropTypes.func).isRequired,
login: React.PropTypes.func.isRequired,
loggedIn: React.PropTypes.bool.isRequired,
loginError: React.PropTypes.bool.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(
state => (
{ state: state.login }
),
dispatch => (
{ actions: bindActionCreators(ThaliAppActions, dispatch) }
),
mapStateToProps,
mapDispatchToProps,
)(ThaliApp);
......@@ -2,7 +2,6 @@ import React from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import * as reducers from '../reducers';
import ThaliApp from './ThaliApp';
......@@ -10,5 +9,4 @@ const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
const Main = () => <Provider store={store}><ThaliApp /></Provider>;
export default Main;
......@@ -3,16 +3,22 @@ import * as types from '../actions/actionTypes';
const initialState = {
loggedIn: false,
loginError: false,
username: '',
password: '',
};
export default function login(state = initialState, action = {}) {
export default function typing(state = initialState, action = {}) {
switch (action.type) {
case types.ENTER_USERNAME:
return { ...state, username: action.username };
case types.ENTER_PASSWORD:
return { ...state, password: action.password };
case types.LOGIN:
if (action.password === '42') {
if (state.password === '42') {
return { ...state, loginError: false, loggedIn: true };
}
return { ...state, loginError: true };
default:
return { ...state };
return state;
}
}
Markdown is supported
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