Delete link/#57 (#63)

* fix: #57; add handleRemoveList() click handler for delete from child * fix: #57; cleanup
cch5ng · Mar 30, 2017 · d0ad3f1 · d0ad3f1
1 parent 125312c
commit d0ad3f1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/src/components/Child.js b/src/components/Child.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import { Button, FormGroup, Checkbox, ControlLabel, FormControl } from 'react-bootstrap';
 import uuid from 'node-uuid';
 import localforage from 'localforage';
-//import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-//import {  } from 'react-bootstrap';
+import createHistory from 'history/createBrowserHistory'
 import '../App.css';
 import h5bp_interview from '../utilities/h5bp_interview.json';
 import { CATEGORIES } from '../utilities/constants';
@@ -36,7 +35,7 @@ class Child extends Component {
     // this.removeArrayItem = this.removeArrayItem.bind(this);
     this.handleViewMenu = this.handleViewMenu.bind(this);
     this.isChecked = this.isChecked.bind(this);
-
+    this.handleRemoveList = this.handleRemoveList.bind(this);
     // var maxQuestionsObj = this.getMaxCountObj();
     // maxQuestionsObj.display = 'all';
     // this.state = maxQuestionsObj;
@@ -90,7 +89,7 @@ class Child extends Component {
       <div>
         <h3>{this.state.name} List</h3>
           <div>
-            {this.state.viewState === 'read' ? <div className="right" onClick={this.handleViewMenu}><span id="edit-link">Edit</span> | <span id="delete-link">Delete</span></div> : <div className="right" onClick={this.handleViewMenu}><span id="read-link">Read</span> | <span id="delete-link">Delete</span></div>}
+            {this.state.viewState === 'read' ? <div className="right" onClick={this.handleViewMenu}><span id="edit-link">Edit</span> | <span id="delete-link" onClick={this.handleViewMenu}>Delete</span></div> : <div className="right" onClick={this.handleViewMenu}><span id="read-link">Read</span> | <span id="delete-link" onClick={this.handleViewMenu}>Delete</span></div>}
             {this.state.viewState === 'edit' ? <Button className="button" onClick={this.handleSaveButton}>Save List</Button> : null}
             {this.state.viewState === 'read' ? questionsList : this.renderEditQuestions()}
             {this.state.viewState === 'edit' ? <Button className="button" onClick={this.handleSaveButton}>Save List</Button> : null}
@@ -114,6 +113,8 @@ class Child extends Component {
         })
         break;
       case 'delete-link':
+        console.log('clicked delete menu');
+        this.handleRemoveList();
         break;
       case 'read-link':
         this.setState({
@@ -186,6 +187,40 @@ class Child extends Component {
 
   }
 
+  /**
+   * @param {}
+   * @return {}
+   *
+   *
+   */
+  handleRemoveList() {
+    const keyRemove = this.listId;
+    let that = this;
+
+    localforage.removeItem(keyRemove).then(function() {
+        var savedLists = [];
+        var renderSavedLists = [];
+
+        localforage.iterate(function(value, key, iterationNumber) {
+            savedLists.push([key, value]);
+        }).then(function() {
+            console.log('list deleted');
+            const history = createHistory();
+            history.push('/favorites');
+            // need reload latest lists content
+            window.location.reload();
+        }).catch(function(err) {
+            // This code runs if there were any errors
+            console.log(err);
+        });
+
+    }).catch(function(err) {
+        // This code runs if there were any errors
+        console.log(err);
+    });
+
+  }
+
   /**
    * @param {}
    * @return {}

diff --git a/src/components/Favorites.js b/src/components/Favorites.js
@@ -83,21 +83,14 @@ class Favorites extends Component {
    *
    */
   handleRemoveList(e) {
-    console.log('clicked remove icon');
-    console.log('e.target.id: ' + e.target.id);
     const keyRemove = e.target.id;
     let that = this;
 
     localforage.removeItem(keyRemove).then(function() {
-        // Run this code once the key has been removed.
-        console.log('Key is cleared!');
-
         var savedLists = [];
         var renderSavedLists = [];
 
-        // The same code, but using ES6 Promises.
         localforage.iterate(function(value, key, iterationNumber) {
-
             savedLists.push([key, value]);
         }).then(function() {
             renderSavedLists = savedLists.map((list) => {