From fb9c0398fddfda1e8092c2a97a13557dccb849ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diogo=20Silv=C3=A9rio?= <dblsilverio@gmail.com>
Date: Mon, 22 Jan 2018 23:52:45 -0200
Subject: [PATCH] FEATURE: Navigating to DeckDetails

Action to navigate to deck details screen is working
---
 components/flashcards/DeckDetails.js       | 12 +++++++++++-
 components/flashcards/DeckList.js          |  4 +---
 components/navigators/FlashTabNavigator.js |  4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/flashcards/DeckDetails.js b/components/flashcards/DeckDetails.js
index b228de8..758267f 100644
--- a/components/flashcards/DeckDetails.js
+++ b/components/flashcards/DeckDetails.js
@@ -1,12 +1,22 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
+
 export default class DeckDetails extends Component {
 
+    static navigationOptions = ({ navigation }) => {
+        const { deckKey } = navigation.state.params;
+
+        return {
+            title: `'${deckKey}' Details`,
+        }
+    }
+
     render() {
+
         return (
             <View>
-                <Text>DeckDetails</Text>
+                <Text>DeckDetails: {this.props.navigation.state.params.deckKey}</Text>
             </View>
         );
     }
diff --git a/components/flashcards/DeckList.js b/components/flashcards/DeckList.js
index bbfcc8b..dded962 100644
--- a/components/flashcards/DeckList.js
+++ b/components/flashcards/DeckList.js
@@ -37,8 +37,6 @@ class DeckList extends Component {
             routeName
         });
 
-        console.log(navigation);
-
         this.props.navigation.dispatch(navigation);
     }
 
@@ -64,7 +62,7 @@ class DeckList extends Component {
             return (
                 <ScrollView style={styles.container}>
                     {this.props.decks.map((deck) => (
-                        <TouchableOpacity key={deck.name}>
+                        <TouchableOpacity key={deck.name} onPress={() => this.props.screenProps.rootNavigation.navigate('DeckDetails', { deckKey: deck.name })}>
                             <DeckItem deck={deck} />
                         </TouchableOpacity>
                     ))}
diff --git a/components/navigators/FlashTabNavigator.js b/components/navigators/FlashTabNavigator.js
index dabd9a8..8f2cc3b 100644
--- a/components/navigators/FlashTabNavigator.js
+++ b/components/navigators/FlashTabNavigator.js
@@ -14,7 +14,7 @@ export default class FlashTabNavigator extends Component {
     }
 
     render() {
-
+        
         const tabBarOptions = {
             inactiveTintColor: COLOR_B_1,
             activeTintColor: COLOR_A_1,
@@ -39,7 +39,7 @@ export default class FlashTabNavigator extends Component {
             });
 
         return (
-            <FlashTab />
+            <FlashTab screenProps={{rootNavigation: this.props.navigation}}  />
         );
     }