FEATURE: Deleting decks

Decks may be deleted by the user.
dblsilverio · Jan 27, 2018 · d15c3fb · d15c3fb
1 parent 0f5b44f
commit d15c3fb
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 : [];