Commit e78320a2 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Refactor to satisfactory navigation

parent 85c19ca2
......@@ -10,8 +10,8 @@ New and improved ThaliApp
`yarn install`
## Starting the app
Ensure that the development server is started with `react-native start`.
Deploy the app on a running emulator or connected Android Phone with `react-native run-android`.
Ensure that the development server is started with `yarn run react-native start`.
Deploy the app on a running emulator or connected Android Phone with `yarn run react-native run-android`.
## Debugging
Open the console with `react-native log-android`.
Open the console with `yarn run react-native log-android`.
export const LOGIN = 'LOGIN';
export const NAVIGATE = 'NAVIGATE';
......@@ -3,7 +3,6 @@ import * as types from './actionTypes';
export function login(username, password) {
return {
type: types.LOGIN,
username,
password,
success: password === '42',
};
}
import * as types from './actionTypes';
export function navigate(scene) {
return {
type: types.NAVIGATE,
scene,
};
}
......@@ -3,12 +3,17 @@ 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';
import * as reducers from './reducers';
import ReduxNavigator from './components/navigator';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
const Main = () => <Provider store={store}><ThaliApp /></Provider>;
const Main = () =>
<Provider store={store}>
<ReduxNavigator />
</Provider>
;
export default Main;
import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { connect } from 'react-redux';
export default class Login extends Component {
import * as actions from '../actions/login';
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;
const { loginError, login } = this.props;
return (
<View>
<TextInput
......@@ -28,7 +26,7 @@ export default class Login extends Component {
secureTextEntry
onChangeText={password => this.setState({ password })}
/>
<Button title="Log in" onPress={this.onPress()} />
<Button title="Log in" onPress={() => login(this.state.username, this.state.password)} />
<Text>{ loginError ? 'Login faal' : '' }</Text>
</View>
);
......@@ -39,3 +37,10 @@ Login.propTypes = {
login: React.PropTypes.func.isRequired,
loginError: React.PropTypes.bool.isRequired,
};
const mapStateToProps = state => state.login;
const mapDispatchToProps = dispatch => ({
login: (username, password) => dispatch(actions.login(username, password)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
import React from 'react';
import { View, Text } from 'react-native';
const Welcome = () =>
<View>
<Text>Welcome!</Text>
</View>
;
export default Welcome;
import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/navigation';
import Login from './Login';
import Welcome from './Welcome';
// const mapStateToProps = state => state.currentScene;
const mapStateToProps = state => (
{ currentScene: state.navigation.currentScene }
);
const mapDispatchToProps = dispatch => ({
navigate: scene => dispatch(actions.navigate(scene)),
});
const ReduxNavigator = (props) => {
const currentScene = props.currentScene;
switch (currentScene) {
case 'login':
return (<Login />);
case 'welcome':
return (<Welcome />);
default:
return (<Login />);
}
};
ReduxNavigator.propTypes = {
currentScene: React.PropTypes.string.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(ReduxNavigator);
import React from 'react';
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}
/>
);
};
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,
};
export default connect(
state => (
{ state: state.login }
),
dispatch => (
{ actions: bindActionCreators(ThaliAppActions, dispatch) }
),
)(ThaliApp);
import login from './login';
import navigation from './navigation';
export {
login,
navigation,
};
......@@ -8,7 +8,7 @@ const initialState = {
export default function login(state = initialState, action = {}) {
switch (action.type) {
case types.LOGIN:
if (action.password === '42') {
if (action.success) {
return { ...state, loginError: false, loggedIn: true };
}
return { ...state, loginError: true };
......
import * as types from '../actions/actionTypes';
const initialState = {
currentScene: 'login',
};
export default function navigate(state = initialState, action = {}) {
switch (action.type) {
case types.LOGIN:
if (action.success) {
return { ...state, currentScene: 'welcome' };
}
return { ...state };
default:
return { ...state };
}
}
import {
AppRegistry,
} from 'react-native';
import App from './app/containers/app';
import App from './app/app';
AppRegistry.registerComponent('ThaliApp', () => App);
import {
AppRegistry,
} from 'react-native';
import App from './app/containers/app';
import App from './app/app';
AppRegistry.registerComponent('ThaliApp', () => App);
......@@ -349,7 +349,7 @@ babel-helpers@^6.22.0:
babel-runtime "^6.22.0"
babel-template "^6.22.0"
babel-jest@18.0.0, babel-jest@^18.0.0:
babel-jest@^18.0.0:
version "18.0.0"
resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-18.0.0.tgz#17ebba8cb3285c906d859e8707e4e79795fb65e3"
dependencies:
......
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