Style MembershipProof

Fix crash on no previous memberships
Add purchase button
Minor style to Login and Membership components

src/modules/login/Login.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, Text as NBText, Icon} from 'native-base';
+import {Body, Card, CardItem, Container, Header, Content, Form, Item, Input, Label, Spinner, Button, Text as NBText,
+    Icon} from 'native-base';
 
 export default class Login extends Component {
     constructor(props) {
@@ -73,15 +74,22 @@ export default class Login extends Component {
     render() {
         return (
             <Container style={styles.container}>
-                <Content>
-                    <Form>
-                        {this.emailInput()}
-                        {this.passwordInput()}
-                        {this.showError()}
-                        <Button full onPress={this.onLoginPress} style={styles.loginButton}><NBText>Logg
-                            inn</NBText></Button>
-                        {this.showSpinner()}
-                    </Form>
+                <Content style={{margin: 8}}>
+                    <Card>
+                        <Form>
+                            {this.emailInput()}
+                            {this.passwordInput()}
+                            {this.showError()}
+                            <CardItem>
+                                <Body>
+                                    <Button full onPress={this.onLoginPress} style={styles.loginButton}>
+                                        <NBText>Logg inn</NBText>
+                                    </Button>
+                                </Body>
+                            </CardItem>
+                            {this.showSpinner()}
+                        </Form>
+                    </Card>
                 </Content>
             </Container>
         );
@@ -123,7 +131,6 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        backgroundColor: 'white'
     },
     input: {
         width: 320,

src/modules/membership/Membership.js

@@ -16,7 +16,7 @@ export default class Membership extends Component {
                     <Text style={styles.paragraph}>Vi setter pris på felleskapet som er med på å bygge Chateau Neuf. DNS er en organisasjon av og for medlemmene. Derfor sørger vi for at det blir litt lettere å være student ved å ta en del av kaka for medlemmene våre. Med medlemskap får billigere inngang og servering på alt som skjer på Chateau Neuf.</Text>
 
                     <View style={styles.button}>
-                        <Button onPress={this.onPurchasePress} full><NBText>Kjøp medlemskap</NBText></Button>
+                        <Button onPress={() => { Linking.openURL(Config.DUSKEN_PURCHASE_URL); } } full><NBText>Kjøp medlemskap</NBText></Button>
                     </View>
 
                     <Text style={styles.paragraph}>Vi gir medlemmer:{"\n"}
@@ -30,10 +30,6 @@ export default class Membership extends Component {
         )
     };
 
-    onPurchasePress() {
-        Linking.openURL(Config.DUSKEN_PURCHASE_URL);
-    };
-
     onLoginPress = () => {
         this.props.onLoginPress();
     };

src/modules/membership/MembershipProof.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
-import {StyleSheet, Platform, RefreshControl, View} from "react-native";
-import {Button, Card, CardItem, Text, Content} from 'native-base';
+import {Linking, StyleSheet, Platform, RefreshControl, View} from "react-native";
+import {Button, Body, Card, CardItem, Text, Content} from 'native-base';
+import Config from 'react-native-config';
 
 export default class MembershipProof extends Component {
     constructor(props) {
@@ -17,34 +18,6 @@ export default class MembershipProof extends Component {
         }
     }
 
-    validTo() {
-        if (this.state.user.last_membership.membership_type === 'lifelong') {
-            return 'Livsvarig'
-        }
-        return this.state.user.last_membership.end_date;
-    }
-
-    membershipStatus() {
-        if (!this.state.user.is_member) {
-            if (!this.state.user.last_membership) {
-                // TODO: purchase membership button
-                return <View style={styles.notMember}><Text style={styles.notMemberText}>Ikke medlem</Text></View>
-            }
-
-            return <View style={styles.expired}><Text style={styles.expiredText}>Utløpt</Text></View>
-        }
-
-        if (this.state.user.is_volunteer) {
-            return <View style={styles.valid}><Text style={styles.validText}>Aktiv frivillig</Text></View>
-        }
-
-        return <View style={styles.valid}><Text style={styles.validText}>Medlem</Text></View>
-    }
-
-    fetchUser = () => {
-        this.props.fetchUser()
-    };
-
     // fetchUser = () => {
     //     this.props.fetchUser().then(() => {
     //         this.setState({refreshing: false});
@@ -65,29 +38,103 @@ export default class MembershipProof extends Component {
     //         />)
     // }
 
+    membershipValidTo() {
+        if( !this.state.user.last_membership) {
+            return;
+        }
+
+        let validTo = this.state.user.last_membership.end_date;
+        if (this.state.user.last_membership.membership_type === 'lifelong') {
+            validTo = 'Livsvarig'
+        }
+
+        return (
+            <CardItem>
+                <View style={{alignItems: 'center', flex: 1}}>
+                    <Text>Gyldig til: </Text>
+                    <Text style={styles.validToValue}>{validTo}</Text>
+                </View>
+            </CardItem>
+        )
+    }
+
+    membershipStatus() {
+        if (!this.state.user.is_member) {
+            // TODO: purchase membership button
+            if ( !this.state.user.last_membership ) {
+                return (
+                    <CardItem>
+                        <View style={styles.notMember}>
+                            <Text style={styles.notMemberText}>Ikke medlem</Text>
+                        </View>
+                    </CardItem>)
+            }
+
+            return <View style={styles.expired}><Text style={styles.expiredText}>Utløpt</Text></View>
+        }
+
+        let statusText = 'Medlem';
+        if (this.state.user.is_volunteer) {
+            statusText = 'Aktiv frivillig';
+        }
+
+        return <CardItem><View style={styles.valid}><Text style={styles.validText}>{statusText}</Text></View></CardItem>
+    }
+
+    purchaseButton() {
+        if (this.state.user.is_member) {
+            return;
+        }
+        return <CardItem>
+            <Body>
+                <Button
+                    onPress={() => {
+                        Linking.openURL(Config.DUSKEN_PURCHASE_URL);
+                    }}
+                    full
+                    style={styles.purchaseButton}
+                >
+                    <Text>Kjøp medlemskap</Text>
+                </Button>
+            </Body>
+        </CardItem>
+    }
+
+    fetchUser = () => {
+        this.props.fetchUser()
+    };
+
     render() {
         return (
-            <Content>
+            <Content style={{margin: 8}}>
+                <Card>
+                    {this.membershipName()}
+                    {this.membershipStatus()}
+                    {this.purchaseButton()}
+                    {this.membershipValidTo()}
+                </Card>
                 <Card>
                     <CardItem>
-                        <Text style={styles.nameText}>{this.state.user.first_name} {this.state.user.last_name}</Text>
-                    </CardItem>
-                    <CardItem>
-                        {this.membershipStatus()}
-                    </CardItem>
-                    <CardItem>
-                        <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>
+                        <Body>
+                            <Button onPress={this.props.onLogoutPress} style={styles.logoutButton} small>
+                                <Text>Logg ut</Text>
+                            </Button>
+                        </Body>
                     </CardItem>
                 </Card>
             </Content>
         )
     };
+
+    membershipName() {
+        let name = `${this.state.user.first_name} ${this.state.user.last_name}`;
+        if(name === ' ') {
+            name = this.state.user.email;
+        }
+        return <CardItem>
+            <Text style={styles.nameText}>{name}</Text>
+        </CardItem>
+    }
 }
 
 const styles = StyleSheet.create({
@@ -97,9 +144,6 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: 'bold',
     },
-    logoutButton: {
-        marginTop: 16,
-    },
     valid: {
         backgroundColor: '#5cb85c',
         flex: 1,
@@ -123,6 +167,7 @@ const styles = StyleSheet.create({
         fontSize: 24
     },
     notMember: {
+        backgroundColor: '#62B1F6',
         flex: 1,
         marginHorizontal: -16,
         padding: 16
@@ -136,4 +181,10 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         fontSize: 18,
     },
+    purchaseButton: {
+        marginTop: 16,
+    },
+    logoutButton: {
+        marginVertical: 8,
+    },
 });