From d15c3fb4605ea3d40b459f81f7ca38e98098a5f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diogo=20Silv=C3=A9rio?= <dblsilverio@gmail.com>
Date: Sat, 27 Jan 2018 18:22:41 -0200
Subject: [PATCH] FEATURE: Deleting decks

Decks may be deleted by the user.
---
 actions/index.js                     |  8 ++++++
 components/flashcards/DeckDetails.js | 39 +++++++++++++++++++++++++++-
 reducers/index.js                    | 14 ++++++++--
 services/index.js                    |  7 +++++
 4 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/actions/index.js b/actions/index.js
index 823c73a..676d4b2 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -1,5 +1,6 @@
 export const LOAD_DECKS = "LOAD_DECKS";
 export const NEW_DECK = "NEW_DECK";
+export const DELETE_DECK = "DELETE_DECK";
 
 export const ADD_CARD = "ADD_CARD";
 
@@ -17,6 +18,13 @@ export function newDeck(deck){
     }
 }
 
+export function deleteDeck(deckKey){
+    return {
+        type: DELETE_DECK,
+        deckKey
+    }
+}
+
 export function addCard(deckKey, card){
     return {
         type: ADD_CARD,
diff --git a/components/flashcards/DeckDetails.js b/components/flashcards/DeckDetails.js
index fa0e47b..e8a1eaa 100644
--- a/components/flashcards/DeckDetails.js
+++ b/components/flashcards/DeckDetails.js
@@ -4,6 +4,9 @@ import { connect } from 'react-redux';
 
 import DifficultyMeter from '../ui/DifficultyMeter';
 
+import * as actions from '../../actions';
+import * as services from '../../services';
+
 import { COLOR_B_4, COLOR_A_1, COLOR_B_5, COLOR_FAILURE } from '../../utils/colors';
 
 
@@ -25,6 +28,40 @@ class DeckDetails extends Component {
         this.setState({});
     }
 
+    async deleteDeck() {
+        const { deck } = this.props;
+
+        Alert.alert(
+            'Delete deck?',
+            `Do you confirm the deletion of '${deck.name}' deck?`,
+            [
+                {
+                    text: 'Yes',
+                    onPress: async () => {
+                        try {
+                            await services.deleteDeck(deck.name);
+                            this.props.dispatch(actions.deleteDeck(deck.name));
+                            this.props.navigation.goBack();
+                        } catch (e) {
+                            console.error(e);
+                        }
+                    }
+                },
+                {
+                    text: 'No',
+                    onPress: () => { }
+                }
+            ]);
+    }
+
+    shouldComponentUpdate(nextProps, nextState){
+        if(nextProps.deck === null){
+            return false;
+        }
+        
+        return true;
+    }
+
     render() {
         const { deck } = this.props;
         if (typeof deck === 'undefined') {
@@ -65,7 +102,7 @@ class DeckDetails extends Component {
                         </TouchableOpacity>
                     </View>
                     <View style={styles.subSubContainerBtn}>
-                        <TouchableOpacity style={styles.btnAlert}>
+                        <TouchableOpacity style={styles.btnAlert} onPress={this.deleteDeck.bind(this)}>
                             <Text style={styles.btnText}>Delete Deck</Text>
                         </TouchableOpacity>
                     </View>
diff --git a/reducers/index.js b/reducers/index.js
index 480cff4..c5d935e 100644
--- a/reducers/index.js
+++ b/reducers/index.js
@@ -1,7 +1,8 @@
 import {
     LOAD_DECKS,
     NEW_DECK,
-    ADD_CARD
+    ADD_CARD,
+    DELETE_DECK
 } from '../actions';
 
 function decks(state = { decks: {} }, action) {
@@ -27,10 +28,19 @@ function decks(state = { decks: {} }, action) {
                 decks
             }
         }
+        case DELETE_DECK: {
+            const { deckKey } = action;
+            delete decks[deckKey];
+
+            const refreshedDecks = decks;
+            return {
+                decks: refreshedDecks
+            }
+        }
         case ADD_CARD: {
             const { card, deckKey } = action;
             const freshDeck = decks[deckKey];
-            
+
             freshDeck.cards.push(card);
 
             const freshDecks = {
diff --git a/services/index.js b/services/index.js
index f67180f..d9c8bf7 100644
--- a/services/index.js
+++ b/services/index.js
@@ -8,6 +8,13 @@ export async function persistDeck(deck){
     }))
 }
 
+export async function deleteDeck(deckKey){
+    let decks = await loadDecks();
+    delete decks[deckKey];
+
+    await AsyncStorage.setItem(FLASHCARDS_STORAGE_KEY, JSON.stringify(decks));
+}
+
 export async function loadDecks() {
     const decks = JSON.parse(await AsyncStorage.getItem(FLASHCARDS_STORAGE_KEY));
     return decks !== null ? decks : [];