Learning redux

src/Dusken.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+import LoginContainer from './modules/login/LoginContainer';
+
+export default class Dusken extends Component {
+  render() {
+    // TODO: Navigation++
+    return (
+      <LoginContainer />
+    )
+  }
+}

src/DuskenContainer.js

@@ -0,0 +1,4 @@
+import {connect} from "react-redux";
+import Dusken from "./Dusken";
+
+export default connect()(Dusken);

src/actions.js

@@ -0,0 +1,11 @@
+const LOGIN_START = 'LOGIN_START';
+
+function loginStart() {
+  return {
+    type: LOGIN_START
+  }
+}
+export {
+  LOGIN_START,
+  loginStart
+};

src/modules/login/Login.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { MKButton, MKColor, MKTextField } from 'react-native-material-kit';
+
+import { loginStart } from "../../actions";
+
+export default class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loggedIn: false
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    console.log("IN Login.componentWillReceiveProps");
+    console.log(nextProps);
+    if(this.state.loggedIn != nextProps.loggedIn) {
+      this.setState({
+        loggedIn: nextProps.loggedIn
+      })
+    }
+  }
+  render() {
+    const pic = {
+      uri: 'https://dusken.neuf.no/static/dist/images/logo.png'
+    };
+    return (
+      <View style={styles.container}>
+        <Text>Chateau Neuf</Text>
+        <Text>The Norwegian Student Society</Text>
+        <Image source={pic} style={{width: 200, height: 150, marginBottom: 40}} resizeMode='contain' />
+        <MKTextField
+          placeholder="Email"
+          style={styles.input}
+        />
+        <MKTextField
+          placeholder="Password"
+          style={styles.input}
+        />
+        <MKButton
+          backgroundColor={MKColor.Blue}
+          shadowRadius={2}
+          shadowOpacity={.7}
+          shadowColor="black"
+          onPress={this.onLoginPress}
+          style={{marginTop: 20}}
+        >
+          <Text pointerEvents="none" style={styles.button}>Log in</Text>
+        </MKButton>
+        <Text style={{paddingTop: 10}}>{this.loginState()}</Text>
+      </View>
+    );
+  }
+  onLoginPress = () => {
+    this.props.dispatch(loginStart())
+  };
+
+  loginState() {
+    if(this.state.loggedIn) {
+      return 'LOGGED IN'
+    }
+    return 'NOT YET'
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  input: {
+    width: 240,
+    height: 50,
+  },
+  button: {
+    fontWeight: 'bold',
+    padding: 10,
+    width: 240,
+    textAlign: 'center',
+    color: 'white',
+  }
+});

src/modules/login/LoginContainer.js

@@ -0,0 +1,8 @@
+import {connect} from "react-redux";
+import Login from "./Login";
+
+export default connect(
+  state => ({
+    loggedIn: state.loggedIn
+  })
+)(Login);

src/reducers.js

@@ -0,0 +1,16 @@
+import {LOGIN_START} from './actions';
+
+const initialState = {
+  loggedIn: false,
+};
+
+export default function duskenApp(state = initialState, action) {
+  switch (action.type) {
+    case LOGIN_START:
+      return Object.assign({}, state, {
+        loggedIn: true  // INSTANT LOGIN!
+      });
+    default:
+      return state
+  }
+}