Implemented basic redux login button

.eslintrc.json

@@ -22,7 +22,8 @@
     "rules": {
         "indent": [
             "error",
-            2
+            2,
+            {"Switchcase": true}
         ],
         "linebreak-style": [
             "error",

app/actions/ThaliAppActions.js

+import * as types from './actionTypes';
+
+export function login() {
+  return {
+    type: types.LOGIN
+  };
+}

app/actions/actionTypes.js

+export const LOGIN = 'LOGIN';

app/components/Login.js

+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>
+    );
+  }
+}

app/containers/ThaliApp.js

+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);

app/containers/app.js

+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>
+    );
+  }
+}

app/reducers/index.js

+import login from './login';
+
+export {
+  login
+};

app/reducers/login.js

+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};
+  }
+}

app/styles.js

+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};

index.android.js

-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);

package.json

@@ -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",

styles.js

-import {StyleSheet} from 'react-native';
-
-let magenta = '#E62272';
-
-var styles = StyleSheet.create({
-  body : {
-    backgroundColor: magenta,
-    flex: 1
-  },
-  bodyText: {
-    fontFamily: 'opensans',
-  }
-});
-
-export {styles};

yarn.lock

@@ -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"