Commit c1f6b3c0 authored by Wietse Kuipers's avatar Wietse Kuipers

Implemented basic redux login button

parent 5c1a1d98
......@@ -22,7 +22,8 @@
"rules": {
"indent": [
"error",
2
2,
{"Switchcase": true}
],
"linebreak-style": [
"error",
......
import * as types from './actionTypes';
export function login() {
return {
type: types.LOGIN
};
}
export const LOGIN = 'LOGIN';
import React, {Component} from 'react';
import {View, Text, TextInput, Button} from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
}
render() {
const { loggedIn, login } = this.props;
console.log(loggedIn);
return (
<View>
<TextInput
placeholder="Username"
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
/>
<Button title="Log in" onPress={login}/>
<Text>{loggedIn ? 'MEMES' : 'MMS'}</Text>
</View>
);
}
}
import React,{Component} from 'react';
import Login from '../components/Login';
import {bindActionCreators} from 'redux';
import * as ThaliAppActions from '../actions/ThaliAppActions';
import { connect } from 'react-redux';
class ThaliApp extends Component {
constructor(props) {
super(props);
}
render() {
const { state, actions } = this.props;
return (
<Login
loggedIn={state.loggedIn}
{...actions}
/>
);
}
}
export default connect(
state => (
{state: state.login}
),
(dispatch) => (
{actions: bindActionCreators(ThaliAppActions, dispatch)}
)
)(ThaliApp);
import React, {Component} 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';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
export default class App extends Component {
render() {
return (
<Provider store={store}>
<ThaliApp />
</Provider>
);
}
}
import login from './login';
export {
login
};
import * as types from '../actions/actionTypes';
const initialState = {
loggedIn: false
};
export default function login(state = initialState, action = {}) {
console.log(state);
switch (action.type) {
case types.LOGIN:
console.log({...state, loggedIn: true});
return {...state, loggedIn: true};
default:
return {...state};
}
}
import {StyleSheet, Dimensions} from 'react-native';
let magenta = '#E62272';
let deviceWidth = Dimensions.get('window').width;
let deviceHeigth = Dimensions.get('window').heigth;
let margin = 10;
const styles = StyleSheet.create({
body : {
padding: 10,
flex: 1,
flexDirection: 'column',
alignItems: 'center'
},
bodyText: {
fontFamily: 'opensans',
},
textInput: {
alignSelf: 'stretch'
},
logo: {
width: deviceWidth - margin,
resizeMode: 'contain'
},
button: {
color: magenta
}
});
export {styles};
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View
React,
AppRegistry
} from 'react-native';
import {styles} from './styles.js';
import App from './app/containers/app';
export default class ThaliApp extends Component {
render() {
return (
<View style={styles.body}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.bodyText}>
Welkom in de nieuwe ThaliApp!
</Text>
</View>
);
}
}
AppRegistry.registerComponent('ThaliApp', () => ThaliApp);
AppRegistry.registerComponent('ThaliApp', () => App);
......@@ -8,7 +8,10 @@
},
"dependencies": {
"react": "~15.4.0-rc.4",
"react-native": "0.40.0"
"react-native": "0.40.0",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
......
import {StyleSheet} from 'react-native';
let magenta = '#E62272';
var styles = StyleSheet.create({
body : {
backgroundColor: magenta,
flex: 1
},
bodyText: {
fontFamily: 'opensans',
}
});
export {styles};
......@@ -2014,6 +2014,10 @@ hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
hoist-non-react-statics@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
......@@ -2111,7 +2115,7 @@ interpret@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
invariant@^2.2.0:
invariant@^2.0.0, invariant@^2.2.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
......@@ -2703,6 +2707,10 @@ load-json-file@^1.0.0:
pinkie-promise "^2.0.0"
strip-bom "^2.0.0"
lodash-es@^4.2.0, lodash-es@^4.2.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
lodash._arraycopy@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
......@@ -2851,7 +2859,7 @@ lodash@^3.5.0:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
......@@ -3478,6 +3486,16 @@ react-proxy@^1.1.7:
lodash "^4.6.1"
react-deep-force-update "^1.0.0"
react-redux@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.2.tgz#3d9878f5f71c6fafcd45de1fbb162ea31f389814"
dependencies:
hoist-non-react-statics "^1.0.3"
invariant "^2.0.0"
lodash "^4.2.0"
lodash-es "^4.2.0"
loose-envify "^1.1.0"
react-test-renderer@~15.4.0-rc.4:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.4.2.tgz#27e1dff5d26d0e830f99614c487622bc831416f3"
......@@ -3570,6 +3588,19 @@ redeyed@~1.0.0:
dependencies:
esprima "~3.0.0"
redux-thunk@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
redux@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d"
dependencies:
lodash "^4.2.1"
lodash-es "^4.2.1"
loose-envify "^1.1.0"
symbol-observable "^1.0.2"
regenerate@^1.2.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
......@@ -3999,6 +4030,10 @@ supports-color@^3.1.2:
dependencies:
has-flag "^1.0.0"
symbol-observable@^1.0.2:
version "1.0.4"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
"symbol-tree@>= 3.1.0 < 4.0.0":
version "3.2.1"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.1.tgz#8549dd1d01fa9f893c18cc9ab0b106b4d9b168cb"
......
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