FEATURE: Working DeckDetails

DEck details now reflects selected deck, displaying name, car numbers and difficulty level.
dblsilverio · Jan 25, 2018 · 35cc9a5 · 35cc9a5
1 parent f758191
commit 35cc9a5
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 6 deletions.
diff --git a/components/flashcards/DeckDetails.js b/components/flashcards/DeckDetails.js
@@ -1,8 +1,13 @@
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
+import { connect } from 'react-redux';
 
+import DifficultyMeter from '../ui/DifficultyMeter';
 
-export default class DeckDetails extends Component {
+import { COLOR_B_4, COLOR_A_1, COLOR_B_5 } from '../../utils/colors';
+
+
+class DeckDetails extends Component {
 
     static navigationOptions = ({ navigation }) => {
         const { deckKey } = navigation.state.params;
@@ -13,13 +18,96 @@ export default class DeckDetails extends Component {
     }
 
     render() {
+        const { deck } = this.props;
+        if (typeof deck === 'undefined') {
+            return (
+                <View style={styles.container}>
+                    <ActivityIndicator size={50} />
+                </View>
+            );
+        } else if (this.deck === null) {
+            Alert.alert(
+                'Invalid deck',
+                'The requested deck does not exists.',
+                [{ text: 'Ok', onPress: () => { } }],
+                { cancelable: false });
+            this.props.navigation.goBack();
+        }
 
         return (
-            <View>
-                <Text>DeckDetails: {this.props.navigation.state.params.deckKey}</Text>
+            <View style={styles.container}>
+                <View style={styles.subContainerCard}>
+                    <View><DifficultyMeter level={deck.difficulty} size={30} /></View>
+                    <Text style={styles.titleText}>{deck.name}</Text>
+                    <Text style={styles.cardText}>{deck.cards.length} Card(s)</Text>
+                </View>
+                <View style={styles.subContainerBtn}>
+                    <TouchableOpacity style={styles.btn}>
+                        <Text style={styles.btnText}>Add Card</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.btn}>
+                        <Text style={styles.btnText}>Start Quiz</Text>
+                    </TouchableOpacity>
+                </View>
             </View>
         );
     }
 
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'space-between'
+    },
+    subContainerCard: {
+        flex: 1,
+        alignItems: 'center',
+        alignContent: 'center',
+        justifyContent: 'center'
+    },
+    subContainerBtn: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignContent: 'center'
+    },
+    btn: {
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: COLOR_B_4,
+        borderRadius: 2,
+        padding: 4,
+        margin: 10,
+        height: 64
+    },
+    btnText: {
+        flex: 1,
+        fontSize: 20,
+        alignSelf: 'center',
+        color: COLOR_A_1,
+        textAlign: 'center'
+    },
+    titleText: {
+        fontSize: 40
+    },
+    cardText: {
+        fontSize: 20
+    }
+});
+
+function mapStateToProps({ decks }, props) {
+    const { deckKey } = props.navigation.state.params;
+    let deck = decks[deckKey];
+
+    if (typeof deck === 'undefined') {
+        deck = null;
+    }
+
+    return {
+        deck
+    }
+}
 
-}
+export default connect(mapStateToProps)(DeckDetails);
diff --git a/components/navigators/FlashStackNavigator.js b/components/navigators/FlashStackNavigator.js
@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import { StackNavigator } from 'react-navigation';
+import { Constants } from 'expo';
 
 import FlashTabNavigator from './FlashTabNavigator';
 
 import AddCard from '../flashcards/AddCard';
 import DeckDetails from '../flashcards/DeckDetails';
 
+import { COLOR_A_1, COLOR_B_5 } from '../../utils/colors';
+
 export default class FlashStackNavigator extends Component {
 
     render() {
@@ -19,7 +22,19 @@ export default class FlashStackNavigator extends Component {
             DeckDetails: {
                 screen: DeckDetails
             }
-        });
+        }, {
+                navigationOptions: {
+                    headerTintColor: COLOR_A_1,
+                    headerTitleStyle: {
+                        color: COLOR_A_1,
+                        textAlignVertical: 'center'
+                    },
+                    headerStyle: {
+                        height: 56 - Constants.statusBarHeight,
+                        backgroundColor: COLOR_B_5,
+                    }
+                }
+            });
 
         return (
             <FlashStack />