Added delete functionality

client/src/app.service.js

@@ -55,6 +55,18 @@ const appService = {
         })
      })
    },
+   deleteBook(book) {
+     return new Promise((resolve, reject) => {
+       axios.delete(`/books/${book.id}`)
+         .then(response => {
+             resolve(response.data)
+         })
+         .catch(error => {
+             console.log(`appService: Error in deleting book: ${error}`)
+             reject(error.status)
+         })
+     })
+   },
 }
 
 export default appService

client/src/components/Books.vue

@@ -27,7 +27,7 @@
                         </td>
                         <td>
                             <button type="button" class="btn btn-warning btn-sm" v-b-modal.book-update-modal @click="editBook(book)">Update</button>
-                            <button type="button" class="btn btn-danger btn-sm">Delete</button>
+                            <button type="button" class="btn btn-danger btn-sm" @click="onDeleteBook(book)">Delete</button>
                         </td>
                     </tr>
                     </tbody>
@@ -141,7 +141,7 @@ export default {
         }
     },
     methods:{
-        ...mapActions(['LOAD_BOOKS_LIST', 'POST_BOOK', 'PUT_BOOK']),
+        ...mapActions(['LOAD_BOOKS_LIST', 'POST_BOOK', 'PUT_BOOK', 'DELETE_BOOK']),
         initForm(){
             this.addBookForm.title = ''
             this.addBookForm.author = ''
@@ -211,7 +211,19 @@ export default {
           this.$refs.editBookModal.hide()
           this.initForm()
         },
-
+        onDeleteBook(book) {
+          this.DELETE_BOOK(book)
+            .then((response) => {
+              this.message = "Book deleted"
+              this.alertVariant = "success"
+              this.showMessage = true
+            })
+            .catch(error => {
+              this.message = "Error in deleting book"
+              this.alertVariant = "danger"
+              this.showMessage = true
+            })
+        },
     },
     computed:{
         ...mapState(['books'])

client/src/store.js

@@ -28,6 +28,16 @@ export default new Vuex.Store({
         throw "No book was found by that id"
 
     },
+    REMOVE_BOOK: (state, book) => {
+      for (let item of state.books) {
+        if (item.id == book.id) {
+          let index = state.books.indexOf(item)
+          state.books.splice(index, 1)
+          return
+        }
+      }
+      throw "No book was found by that id"
+    },
   }, //mutations
   actions: {
     LOAD_BOOKS_LIST({commit}) {
@@ -51,8 +61,8 @@ export default new Vuex.Store({
                     context.commit('ADD_BOOK', book)
                     resolve()
                     })
-                .catch((data) => {
+                .catch((error) => {
-                    console.log(data)
+                    console.log(error)
                     reject()
                 })
         })
@@ -64,11 +74,24 @@ export default new Vuex.Store({
             context.commit('UPDATE_BOOK', book)
             resolve()
           })
-          .catch(data => {
+          .catch(error => {
-            console.log(data)
+            console.log(error)
             reject()
           })
       })
-    }
+    },
+    DELETE_BOOK(context, book){
+      return new Promise((resolve, reject) => {
+        appService.deleteBook(book)
+          .then(data => {
+            context.commit('REMOVE_BOOK', book)
+            resolve()
+          })
+          .catch(error => {
+            console.log(error)
+            reject()
+          })
+      })
+    },
   },//actions
 })

server/booker/app.py

@@ -66,25 +66,20 @@ def all_books():
     return jsonify(response_object)
 
 
-@app.route('/books/<book_id>', methods=['PUT'])
+@app.route('/books/<book_id>', methods=['PUT', 'DELETE'])
 def single_book(book_id):
     response_object = {'status': 'success'}
     if request.method == 'PUT':
         post_data = request.get_json()
-        # print(post_data)
-        #remove_book(book_id)
-        # BOOKS.append({
-        #     'id': uuid.uuid4().hex,
-        #     'title': post_data.get('title'),
-        #     'author': post_data.get('author'),
-        #     'read': post_data.get('read')
-        # })
         for item in BOOKS:
             print(item['id'])
             if item['id'] == post_data['id']:
                 item.update(**post_data)
                 break
         response_object['message'] = 'Book updated!'
+    if request.method == 'DELETE':
+        remove_book(book_id)
+        response_object['message'] = 'Book removed!'
     return jsonify(response_object)