Commit df375a13 authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Basic Login navigation improvement

parent 7e781dee
......@@ -10,8 +10,9 @@ const Sidebar = props =>
style={styles.sidebar}
>
<Text style={styles.header}>MENU</Text>
<Text onPress={() => props.navigate('login')} style={styles.button} >Log in</Text>
<Text onPress={() => props.navigate('welcome')} style={styles.button} >Welcome</Text>
<Text onPress={() => props.navigate('events')} style={styles.button} >Events</Text>
<Text onPress={() => props.navigate('authenticate')} style={styles.button} >Authenticate</Text>
</View>
;
......
......@@ -6,44 +6,50 @@ import Login from './Login';
import Welcome from './Welcome';
import Sidebar from './Sidebar';
// const mapStateToProps = state => state.currentScene;
const mapStateToProps = state => (
{ currentScene: state.navigation.currentScene }
);
const mapStateToProps = state => ({
currentScene: state.navigation.currentScene,
loggedIn: state.navigation.token != '',
});
const mapDispatchToProps = dispatch => ({
navigate: scene => dispatch(actions.navigate(scene)),
});
const sceneToComponent = (scene) => {
const sceneToComponent = scene => {
switch (scene) {
case 'login':
return <Login />;
case 'welcome':
return <Welcome />;
// case 'events':
// return <Events />;
// case 'authenticate':
// return <Authenticeren />
default:
return <Login />;
return <Welcome />;
}
};
const ReduxNavigator = props => (
<Drawer
type="displace"
content={<Sidebar />}
openDrawerOffset={0.4}
panOpenMask={0.2}
panCloseMask={0.2}
panThreshold={0.3}
tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
tapToClose
>
{sceneToComponent(props.currentScene)}
</Drawer>
);
const ReduxNavigator = props => {
if (props.loggedIn) {
return <Drawer
type="displace"
content={<Sidebar />}
openDrawerOffset={0.4}
panOpenMask={0.2}
panCloseMask={0.2}
panThreshold={0.3}
tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
tapToClose
>
{sceneToComponent(props.currentScene)}
</Drawer>;
} else {
return <Login />;
}
};
ReduxNavigator.propTypes = {
currentScene: React.PropTypes.string.isRequired,
loggedIn: React.PropTypes.bool.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(ReduxNavigator);
......@@ -3,11 +3,12 @@ import * as types from '../actions/actionTypes';
const initialState = {
previousScenes: [],
currentScene: 'login',
loggedIn: false,
};
export default function navigate(state = initialState, action = {}) {
const { currentScene, previousScenes } = state;
const { currentScene, previousScenes, loggedIn } = state;
switch (action.type) {
case types.LOGIN:
if (action.success) {
......@@ -17,23 +18,29 @@ export default function navigate(state = initialState, action = {}) {
currentScene,
],
currentScene: 'welcome',
loggedIn,
};
}
return { ...state };
return state;
case types.BACK: {
const scene = previousScenes.pop();
return {
previousScenes,
currentScene: scene,
loggedIn,
};
}
case types.NAVIGATE: {
return {
previousScenes: [],
previousScenes: [
...previousScenes,
currentScene,
],
currentScene: action.scene,
loggedIn,
};
}
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