Episode 33

app/Http/Controllers/RepliesController.php

@@ -60,6 +60,10 @@ public function destroy(Reply $reply)
 
         $reply->delete();
 
+        if (request()->expectsJson()) {
+            return response(['status' => 'Reply deleted']);
+        }
+
         return back();
     }
 }

public/js/app.js

@@ -1960,6 +1960,13 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             this.editing = false;
 
             flash('Updated!');
+        },
+        destroy: function destroy() {
+            axios.delete('/replies/' + this.attributes.id);
+
+            $(this.$el).fadeOut(300, function () {
+                flash('Your reply has been deleted.');
+            });
         }
     }
 });

resources/assets/js/components/Reply.vue

@@ -18,6 +18,14 @@
                 this.editing = false;
 
                 flash('Updated!');
+            },
+
+            destroy() {
+                axios.delete('/replies/' + this.attributes.id);
+
+                $(this.$el).fadeOut(300, () => {
+                    flash('Your reply has been deleted.');
+                });
             }
         }
     }

resources/views/threads/reply.blade.php

@@ -36,13 +36,7 @@
         @can ('update', $reply)
             <div class="panel-footer level">
                 <button class="btn btn-xs mr-1" @click="editing = true">Edit</button>
-
-                <form method="POST" action="/replies/{{ $reply->id }}">
-                    {{ csrf_field() }}
-                    {{ method_field('DELETE') }}
-
-                    <button type="submit" class="btn btn-danger btn-xs">Delete</button>
-                </form>
+                <button class="btn btn-xs btn-danger mr-1" @click="destroy">Delete</button>
             </div>
         @endcan
     </div>