Logout: Add initial logout to membership screen

Also style membership proof

src/modules/login/Login.js

@@ -78,7 +78,7 @@ export default class Login extends Component {
                         {this.emailInput()}
                         {this.passwordInput()}
                         {this.showError()}
-                        <Button block onPress={this.onLoginPress} style={styles.loginButton}><NBText>Logg
+                        <Button full onPress={this.onLoginPress} style={styles.loginButton}><NBText>Logg
                             inn</NBText></Button>
                         {this.showSpinner()}
                     </Form>
@@ -132,7 +132,6 @@ const styles = StyleSheet.create({
     },
     loginButton: {
         marginVertical: 16,
-        marginHorizontal: 16
     },
     errorBox: {
         marginVertical: 16,

src/modules/membership/MembershipContainer.js

@@ -3,7 +3,7 @@ import {connect} from "react-redux";
 
 import Membership from "./Membership";
 import MembershipProof from "./MembershipProof";
-import { requestUserData } from "../../actions";
+import { requestUserData, logout } from "../../actions";
 
 class MembershipContainer extends React.Component {
     constructor(props) {
@@ -17,17 +17,17 @@ class MembershipContainer extends React.Component {
         }
     }
 
-    componentDidMount() {
-        this.fetchUser();
-    }
-
     componentWillReceiveProps(nextProps) {
         if(this.state.isAuthenticated !== nextProps.isAuthenticated) {
             this.setState({isAuthenticated: nextProps.isAuthenticated})
         }
         if(this.state.userToken !== nextProps.userToken) {
-            this.setState({userToken: nextProps.userToken});
-            this.fetchUser();
+            this.setState({userToken: nextProps.userToken}, () => {
+                if(nextProps.userToken) {
+                    this.fetchUser();
+                }
+            });
+
         }
         if(this.state.user !== nextProps.user) {
             this.setState({user: nextProps.user})
@@ -35,7 +35,6 @@ class MembershipContainer extends React.Component {
     }
 
     fetchUser = () => {
-        if (!this.state.userToken) { return; }
         this.props.requestUserData(this.state.userToken)
     };
 
@@ -43,11 +42,20 @@ class MembershipContainer extends React.Component {
         this.props.onLoginPress();
     };
 
+    onLogoutPress = () => {
+        this.props.logout();
+        this.props.logoutNavigate();
+    };
+
     render() {
         if (this.state.user) {
-            return (<MembershipProof user={this.state.user} fetchUser={this.fetchUser}/>)
+            return <MembershipProof
+                user={this.state.user}
+                fetchUser={this.fetchUser}
+                onLogoutPress={this.onLogoutPress}
+            />;
         }
-        return (<Membership onLoginPress={this.onLoginPress}/>)
+        return <Membership onLoginPress={this.onLoginPress}/>;
     }
 }
 
@@ -58,5 +66,5 @@ export default connect(
         userToken: state.userToken,
         user: state.user,
     }),
-    { requestUserData }
+    { requestUserData, logout }
 )(MembershipContainer);

src/modules/membership/MembershipProof.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import {StyleSheet, Platform, RefreshControl} from "react-native";
-import {Card, CardItem, Text, Content} from 'native-base';
+import {StyleSheet, Platform, RefreshControl, View} from "react-native";
+import {Button, Card, CardItem, Text, Content} from 'native-base';
 
 export default class MembershipProof extends Component {
     constructor(props) {
@@ -18,23 +18,27 @@ export default class MembershipProof extends Component {
     }
 
     validTo() {
-        if (this.state.user.last_membership.membership_type == 'lifelong') {
+        if (this.state.user.last_membership.membership_type === 'lifelong') {
             return 'Livsvarig'
         }
         return this.state.user.last_membership.end_date;
     }
 
-    statusText() {
+    membershipStatus() {
         if (!this.state.user.is_member) {
             if (!this.state.user.last_membership) {
-                return 'Ikke medlem'
+                // TODO: purchase membership button
+                return <View style={styles.notMember}><Text style={styles.notMemberText}>Ikke medlem</Text></View>
             }
-            return 'Utløpt'
+
+            return <View style={styles.expired}><Text style={styles.expiredText}>Utløpt</Text></View>
         }
+
         if (this.state.user.is_volunteer) {
-            return 'Aktiv'
+            return <View style={styles.valid}><Text style={styles.validText}>Aktiv frivillig</Text></View>
         }
-        return 'Medlem'
+
+        return <View style={styles.valid}><Text style={styles.validText}>Medlem</Text></View>
     }
 
     fetchUser = () => {
@@ -69,10 +73,16 @@ export default class MembershipProof extends Component {
                         <Text style={styles.nameText}>{this.state.user.first_name} {this.state.user.last_name}</Text>
                     </CardItem>
                     <CardItem>
-                        <Text>{this.statusText()}</Text>
+                        {this.membershipStatus()}
                     </CardItem>
                     <CardItem>
-                        <Text>Gyldig til: {this.validTo()}</Text>
+                        <View style={{alignItems: 'center', flex: 1}}>
+                        <Text>Gyldig til: </Text>
+                        <Text style={styles.validToValue}>{this.validTo()}</Text>
+                        </View>
+                    </CardItem>
+                    <CardItem>
+                        <Button onPress={this.props.onLogoutPress} style={styles.logoutButton}><Text>Logg ut</Text></Button>
                     </CardItem>
                 </Card>
             </Content>
@@ -87,4 +97,43 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: 'bold',
     },
+    logoutButton: {
+        marginTop: 16,
+    },
+    valid: {
+        backgroundColor: '#5cb85c',
+        flex: 1,
+        marginHorizontal: -16,
+        padding: 16
+    },
+    validText: {
+        color: 'white',
+        textAlign: 'center',
+        fontSize: 24
+    },
+    expired: {
+        backgroundColor: '#62B1F6',
+        flex: 1,
+        marginHorizontal: -16,
+        padding: 16
+    },
+    expiredText: {
+        color: 'white',
+        textAlign: 'center',
+        fontSize: 24
+    },
+    notMember: {
+        flex: 1,
+        marginHorizontal: -16,
+        padding: 16
+    },
+    notMemberText: {
+        color: 'white',
+        textAlign: 'center',
+        fontSize: 24
+    },
+    validToValue: {
+        fontWeight: 'bold',
+        fontSize: 18,
+    },
 });

src/screens/MembershipScreen.js

@@ -14,9 +14,13 @@ export default class MembershipScreen extends Component {
         this.props.navigation.navigate('Login');
     };
 
+    logoutNavigate = () => {
+        this.props.navigation.navigate('Membership');
+    };
+
     render() {
         return (
-            <MembershipContainer onLoginPress={this.onLoginPress} />
+            <MembershipContainer onLoginPress={this.onLoginPress} logoutNavigate={this.logoutNavigate} />
         )
     }
 }