Add screen for creating new cards

Author: falloutcoder

api.js

@@ -25,19 +25,21 @@ export const saveDeckTitle = title =>
 
 export const getDeck = id =>
     AsyncStorage.getItem(STORAGE_KEY)
-        .then(d => d.json())
-        .then(data => data[id])
+        .then(data => {
+            data = JSON.parse(data);
+            return data[id];
+        })
         .catch(err => {
             console.log(err);
             return null;
         });
 
 export const addCardToDeck = (title, card) =>
     AsyncStorage.getItem(STORAGE_KEY)
-        .then(d => d.json())
         .then(data => {
-            data[title].questions.concat(card);
-            AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+            data = JSON.parse(data);
+            data[title].questions = data[title].questions.concat(card);
+            return AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data));
         })
         .catch(err => {
             console.log(err);

components/AddCard.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, TouchableOpacity } from 'react-native';
 import { black, white } from '../utils/colors';
+import { styles } from './AddDeck';
+import { addCardToDeck } from '../api';
 
 export default class AddCard extends React.Component {
     static navigationOptions = ({ navigation }) => ({
@@ -11,22 +13,47 @@ export default class AddCard extends React.Component {
         title: `Add Card for ${navigation.state.params.deckId}`
     });
 
+    onSubmit = () => {
+        const { question, answer } = this.state;
+        const { deckId } = this.props.navigation.state.params;
+        this.setState({ question: '', answer: '' }, () =>
+            addCardToDeck(deckId, { question, answer }).then(() => this.props.navigation.goBack())
+        );
+    };
+
+    state = {
+        question: '',
+        answer: ''
+    };
+
     render() {
         return (
             <View style={styles.container}>
-                <Text style={styles.deckTitle}>Add Card {this.props.navigation.state.params.deckId}</Text>
+                <TextInput
+                    style={styles.input}
+                    placeholder="Question"
+                    onChangeText={text => {
+                        this.setState({ question: text });
+                    }}
+                    value={this.state.question}
+                    spellCheck={false}
+                    underlineColorAndroid={black}
+                />
+                <TextInput
+                    style={styles.input}
+                    placeholder="Answer"
+                    onChangeText={text => {
+                        this.setState({ answer: text });
+                    }}
+                    value={this.state.answer}
+                    spellCheck={false}
+                    underlineColorAndroid={black}
+                />
+                <TouchableOpacity onPress={this.onSubmit}>
+                    <Text style={styles.submitBtn}>Submit</Text>
+                </TouchableOpacity>
+                <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={100} />
             </View>
         );
     }
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    deckTitle: {
-        fontSize: 20
-    }
-});

components/AddDeck.js

@@ -12,7 +12,7 @@ export default class AddDeck extends React.Component {
     onSubmit = () => {
         const title = this.state.title;
         this.setState({ title: '' }, () =>
-            saveDeckTitle(title).then(() => this.props.navigation.navigate('DecksList'))
+            saveDeckTitle(title).then(() => this.props.navigation.goBack())
         );
     };
 
@@ -39,7 +39,7 @@ export default class AddDeck extends React.Component {
     }
 }
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',

components/DeckDetail.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { black, white } from '../utils/colors';
+import { getDeck } from '../api';
+import { gray } from '../utils/colors';
 
 export default class DeckDetail extends React.Component {
     static navigationOptions = ({ navigation }) => ({
@@ -11,16 +13,35 @@ export default class DeckDetail extends React.Component {
         title: navigation.state.params.deckId
     });
 
+    state = {};
+
+    getDeckDetails = () =>
+        getDeck(this.props.navigation.state.params.deckId).then(data => this.setState({ ...data }));
+
+    componentDidMount() {
+        this.getDeckDetails();
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.screenProps.currentScreen === 'DeckDetail') {
+            this.getDeckDetails();
+        }
+    }
+
     render() {
         const id = this.props.navigation.state.params.deckId;
         return (
             <View style={styles.container}>
-                <TouchableOpacity
-                    onPress={() => this.props.navigation.navigate('AddCard', { deckId: id })}
-                >
+                <Text style={styles.deckTitle}>{id}</Text>
+                <Text style={styles.cardsCount}>
+                    {this.state.questions && this.state.questions.length} Cards
+                </Text>
+                <TouchableOpacity onPress={() => this.props.navigation.navigate('AddCard', { deckId: id })}>
                     <Text style={styles.addCardBtn}>Add Card</Text>
                 </TouchableOpacity>
-                <Text style={styles.deckTitle}>Details - {id}</Text>
+                <TouchableOpacity onPress={() => this.props.navigation.navigate('AddCard', { deckId: id })}>
+                    <Text style={styles.quizStartBtn}>Start Quiz</Text>
+                </TouchableOpacity>
             </View>
         );
     }
@@ -30,12 +51,27 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        backgroundColor: white
     },
     deckTitle: {
         fontSize: 20
     },
+    cardsCount: {
+        fontSize: 16,
+        color: gray,
+        margin: 5
+    },
     addCardBtn: {
+        backgroundColor: white,
+        color: black,
+        fontWeight: 'bold',
+        padding: 20,
+        borderWidth: 1,
+        borderColor: black,
+        margin: 10
+    },
+    quizStartBtn: {
         backgroundColor: black,
         color: white,
         fontWeight: 'bold',