Remove ListTile

src/components/Board.js

@@ -24,6 +24,16 @@ class Board extends Component {
     }));
   }
 
+  handleRemoveList = (listId) => {
+    let array = [...this.state.lists]; // Make a separate copy of the array
+    const index = array.findIndex(l => l.id === listId); // find the index of the list item I want to remove
+
+    if (index > -1) { // item found?
+      array.splice(index, 1); // remove item
+      this.setState({ lists: array }); // update state without that item
+    }
+  }
+
   render() {
     return (
       <div className="Board">
@@ -37,7 +47,7 @@ class Board extends Component {
             <div className="Board-canvas-content">
               {
                 this.state.lists.map((list) => {
-                  return <ListTile key={list.id} id={list.id} name={list.name} boardId={this.boardId} cards={list.cards}/>
+                  return <ListTile key={list.id} id={list.id} name={list.name} boardId={this.boardId} cards={list.cards} onListDeletion={this.handleRemoveList}/>
                 })
               }
               <NewList boardId={this.boardId} onListCreation={this.handleAddList.bind(this)}/>

src/components/ListTile.js

@@ -16,6 +16,16 @@ class ListTile extends Component {
     }));
   }
 
+  deleteList = () => {
+    fetch(`/boards/${this.props.boardId}/lists/${this.props.id}`, {
+      method: 'DELETE'
+    }).then(res => {
+      if (res.ok && res.status === 204) {
+        this.props.onListDeletion(this.props.id);
+      }
+    });
+  }
+
   newCardTextChange = (e) => {
     this.setState({
       newCardText: e.target.value
@@ -52,6 +62,8 @@ class ListTile extends Component {
           <div className="ListTile-header">
             <div className="ListTile-header-title">
               {this.props.name}
+
+              <a style={{float: 'right', color: 'red'}} onClick={this.deleteList}>Delete</a>
             </div>
           </div>
           <div className="ListTile-cards">