Minimum viable product; thread creation and deletion, post creation and deletion

app/Http/Controllers/PostController.php

@@ -74,11 +74,11 @@ class PostController extends Controller
     /**
      * Remove the specified resource from storage.
      *
-     * @param  \App\Post  $post
+     * @param  int $id
      * @return \Illuminate\Http\Response
      */
-    public function destroy(Post $post)
+    public function destroy(int $id)
     {
-        $post->delete();
+        Post::find($id)->delete();
     }
 }

app/Http/Controllers/ThreadController.php

@@ -58,7 +58,7 @@ class ThreadController extends Controller
     public function store(Request $request)
     {
         $thread = new Thread;
-        
+//dd($request);
         $thread->thread_title = $request->thread_title;
         $thread->thread_creator_id = $request->user_id;
 
@@ -95,11 +95,11 @@ class ThreadController extends Controller
     /**
      * Remove the specified resource from storage.
      *
-     * @param  \App\Thread  $thread
+     * @param  int $int
      * @return \Illuminate\Http\Response
      */
-    public function destroy(Thread $thread)
+    public function destroy(int $id)
     {
-        $thread->delete();
+        Thread::find($id)->delete();
     }
 }

public/js/app.js

@@ -1752,6 +1752,65 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CreatePostComponent.vue?vue&type=script&lang=js&":
+/*!******************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CreatePostComponent.vue?vue&type=script&lang=js& ***!
+  \******************************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['user_id', 'thread_id'],
+  data: function data() {
+    return {
+      content: '',
+      edit: true
+    };
+  },
+  methods: {
+    addPost: function addPost() {
+      var _this = this;
+
+      fetch("../api/post/store", {
+        method: "post",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          "content": this.content,
+          "thread_id": this.thread_id,
+          "user_id": this.user_id
+        })
+      }).then(function (res) {
+        _this.content = '';
+
+        _this.$emit("submitted");
+      }).catch(function (err) {
+        return console.log(err);
+      });
+    }
+  }
+});
+
 /***/ }),
 
 /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CreateThreadComponent.vue?vue&type=script&lang=js&":
@@ -1774,6 +1833,9 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: ['user_id'],
   data: function data() {
@@ -1788,18 +1850,19 @@ __webpack_require__.r(__webpack_exports__);
 
       fetch("api/thread/store", {
         method: "post",
-        body: {
+        credentials: "same-origin",
-          thread_title: this.thread_title,
-          user_id: this.user_id
-        },
         headers: {
-          'content-type': 'application/json'
+          "Content-Type": "application/json"
-        }
+        },
+        body: JSON.stringify({
+          "thread_title": this.thread_title,
+          "user_id": this.user_id
+        })
       }).then(function (res) {
-        return res.json;
+        console.log(res);
-      }).then(function (data) {
         _this.thread_title = '';
-        alert("it might have worked");
+
+        _this.$emit("submitted");
       }).catch(function (err) {
         return console.log(err);
       });
@@ -1828,18 +1891,27 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['user_id', 'with'],
   data: function data() {
     return {
+      logged_in: this.user_id,
       threads: [],
       thread: {
         id: '',
         thread_title: '',
         creator: {
+          id: '',
           name: ''
         }
       },
       thread_id: '',
+      scroll_flag: true,
       edit: false
     };
   },
@@ -1854,6 +1926,23 @@ __webpack_require__.r(__webpack_exports__);
         return res.json();
       }).then(function (res) {
         _this.threads = res.data;
+
+        if (_this.scroll_flag) {
+          window.scrollTo(0, document.body.scrollHeight);
+        } else _this.scroll_flag = true;
+      });
+    },
+    deleteCheck: function deleteCheck(thread) {
+      return thread.creator != null && this.user_id == thread.creator.id;
+    },
+    destroyThread: function destroyThread(thread_id) {
+      var _this2 = this;
+
+      fetch("api/thread/destroy/" + thread_id) //.then(res => res.json())
+      .then(function (res) {
+        _this2.scroll_flag = false;
+
+        _this2.fetchThreads();
       });
     }
   }
@@ -1881,8 +1970,19 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
-  props: ['thread_id'],
+  props: ['user_id', 'thread_id', 'with'],
   data: function data() {
     return {
       id: '',
@@ -1895,6 +1995,7 @@ __webpack_require__.r(__webpack_exports__);
         id: '',
         content: '',
         poster: {
+          id: '',
           name: ''
         }
       }
@@ -1924,6 +2025,17 @@ __webpack_require__.r(__webpack_exports__);
         return console.log(err);
       });
       ;
+    },
+    deleteCheck: function deleteCheck(post) {
+      return post.poster != null && this.user_id == post.poster.id;
+    },
+    destroyPost: function destroyPost(post_id) {
+      var _this2 = this;
+
+      fetch("../api/post/destroy/" + post_id) //.then(res => res.json())
+      .then(function (res) {
+        _this2.fetchThread();
+      });
     }
   }
 });
@@ -36955,6 +37067,83 @@ exports.clearImmediate = (typeof self !== "undefined" && self.clearImmediate) ||
 
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CreatePostComponent.vue?vue&type=template&id=8d68f3f4&":
+/*!**********************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CreatePostComponent.vue?vue&type=template&id=8d68f3f4& ***!
+  \**********************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "form",
+    {
+      staticClass: "mb-3",
+      on: {
+        submit: function($event) {
+          $event.preventDefault()
+          return _vm.addPost($event)
+        }
+      }
+    },
+    [
+      _c("h3", [_vm._v("\n        Write Post\n    ")]),
+      _vm._v(" "),
+      _c("div", { staticClass: "form-group" }, [
+        _c("textarea", {
+          directives: [
+            {
+              name: "model",
+              rawName: "v-model",
+              value: _vm.content,
+              expression: "content"
+            }
+          ],
+          staticClass: "form-control",
+          attrs: { type: "text", placeholder: "Add to your post..." },
+          domProps: { value: _vm.content },
+          on: {
+            input: function($event) {
+              if ($event.target.composing) {
+                return
+              }
+              _vm.content = $event.target.value
+            }
+          }
+        })
+      ]),
+      _vm._v(" "),
+      _vm._m(0)
+    ]
+  )
+}
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "form-group" }, [
+      _c(
+        "button",
+        { staticClass: "btn btn-primary", attrs: { type: "submit" } },
+        [_vm._v("Add")]
+      )
+    ])
+  }
+]
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CreateThreadComponent.vue?vue&type=template&id=69e9049c&":
@@ -36984,6 +37173,8 @@ var render = function() {
       }
     },
     [
+      _c("h3", [_vm._v("\n        Create Thread\n    ")]),
+      _vm._v(" "),
       _c("div", { staticClass: "form-group" }, [
         _c("input", {
           directives: [
@@ -37018,7 +37209,11 @@ var staticRenderFns = [
     var _h = _vm.$createElement
     var _c = _vm._self._c || _h
     return _c("div", { staticClass: "form-group" }, [
-      _c("button", { staticClass: "btn btn-light", attrs: { type: "submit" } })
+      _c(
+        "button",
+        { staticClass: "btn btn-primary", attrs: { type: "submit" } },
+        [_vm._v("Create Thread")]
+      )
     ])
   }
 ]
@@ -37046,15 +37241,46 @@ var render = function() {
   return _c(
     "div",
     [
+      _c(
+        "div",
+        { staticStyle: { padding: "10px" } },
+        [
+          this.with === "true"
+            ? _c("thread-create", {
+                attrs: { user_id: this.user_id },
+                on: { submitted: _vm.fetchThreads }
+              })
+            : _vm._e()
+        ],
+        1
+      ),
+      _vm._v(" "),
       _c("h2", [_vm._v("Browse Threads")]),
       _vm._v(" "),
       _vm._l(_vm.threads, function(thread) {
         return _c("div", { key: thread.id, staticClass: "card card-body" }, [
-          _c("p", [_vm._v(_vm._s(thread.creator.name))]),
+          thread.creator != null
+            ? _c("p", [_vm._v(_vm._s(thread.creator.name))])
+            : _c("p", [_vm._v("[deleted]")]),
           _vm._v(" "),
           _c("a", { attrs: { href: "./test/" + thread.id } }, [
             _c("h3", [_vm._v(_vm._s(thread.thread_title))])
-          ])
+          ]),
+          _vm._v(" "),
+          _vm.deleteCheck(thread)
+            ? _c(
+                "button",
+                {
+                  staticClass: "btn btn-danger",
+                  on: {
+                    click: function($event) {
+                      return _vm.destroyThread(thread.id)
+                    }
+                  }
+                },
+                [_vm._v("Delete")]
+              )
+            : _vm._e()
         ])
       })
     ],
@@ -37088,15 +37314,48 @@ var render = function() {
     [
       _c("h2", [_vm._v(_vm._s(_vm.thread_title))]),
       _vm._v(" "),
-      _c("h3", [_vm._v("By " + _vm._s(_vm.creator.name))]),
+      _vm.creator != null
+        ? _c("h3", [_vm._v("By " + _vm._s(_vm.creator.name))])
+        : _c("h3", [_vm._v("By [deleted]")]),
       _vm._v(" "),
       _vm._l(_vm.posts, function(post) {
         return _c("div", { key: post.id, staticClass: "card card-body" }, [
-          _c("p", [_vm._v(_vm._s(post.poster.name))]),
+          post.poster != null
+            ? _c("p", [_vm._v(_vm._s(post.poster.name))])
+            : _c("p", [_vm._v("[deleted]")]),
           _vm._v(" "),
-          _c("p", [_vm._v(_vm._s(post.content))])
+          _c("p", [_vm._v(_vm._s(post.content))]),
+          _vm._v(" "),
+          _vm.deleteCheck(post)
+            ? _c(
+                "button",
+                {
+                  staticClass: "btn btn-danger",
+                  on: {
+                    click: function($event) {
+                      return _vm.destroyPost(post.id)
+                    }
+                  }
+                },
+                [_vm._v("Delete")]
+              )
+            : _vm._e()
         ])
-      })
+      }),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticStyle: { padding: "10px" } },
+        [
+          this.with === "true"
+            ? _c("post-create", {
+                attrs: { user_id: _vm.user_id, thread_id: _vm.thread_id },
+                on: { submitted: _vm.fetchThread }
+              })
+            : _vm._e()
+        ],
+        1
+      )
     ],
     2
   )
@@ -49269,10 +49528,10 @@ window.Vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.
 // const files = require.context('./', true, /\.vue$/i);
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
 
-Vue.component('thread-component', __webpack_require__(/*! ./components/ThreadComponent.vue */ "./resources/js/components/ThreadComponent.vue").default);
+Vue.component('thread-collection', __webpack_require__(/*! ./components/ThreadComponent.vue */ "./resources/js/components/ThreadComponent.vue").default);
 Vue.component('thread-view', __webpack_require__(/*! ./components/ThreadViewComponent.vue */ "./resources/js/components/ThreadViewComponent.vue").default);
-Vue.component('thread-create', __webpack_require__(/*! ./components/CreateThreadComponent.vue */ "./resources/js/components/CreateThreadComponent.vue").default); //Vue.component('tag_selector', require('./components/TagSelectComponent.vue').default);
+Vue.component('thread-create', __webpack_require__(/*! ./components/CreateThreadComponent.vue */ "./resources/js/components/CreateThreadComponent.vue").default);
-
+Vue.component('post-create', __webpack_require__(/*! ./components/CreatePostComponent.vue */ "./resources/js/components/CreatePostComponent.vue").default);
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
@@ -49341,6 +49600,75 @@ if (token) {
 //     encrypted: true
 // });
 
+/***/ }),
+
+/***/ "./resources/js/components/CreatePostComponent.vue":
+/*!*********************************************************!*\
+  !*** ./resources/js/components/CreatePostComponent.vue ***!
+  \*********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _CreatePostComponent_vue_vue_type_template_id_8d68f3f4___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CreatePostComponent.vue?vue&type=template&id=8d68f3f4& */ "./resources/js/components/CreatePostComponent.vue?vue&type=template&id=8d68f3f4&");
+/* harmony import */ var _CreatePostComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CreatePostComponent.vue?vue&type=script&lang=js& */ "./resources/js/components/CreatePostComponent.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _CreatePostComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _CreatePostComponent_vue_vue_type_template_id_8d68f3f4___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _CreatePostComponent_vue_vue_type_template_id_8d68f3f4___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/CreatePostComponent.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/CreatePostComponent.vue?vue&type=script&lang=js&":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/components/CreatePostComponent.vue?vue&type=script&lang=js& ***!
+  \**********************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CreatePostComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./CreatePostComponent.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CreatePostComponent.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CreatePostComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/CreatePostComponent.vue?vue&type=template&id=8d68f3f4&":
+/*!****************************************************************************************!*\
+  !*** ./resources/js/components/CreatePostComponent.vue?vue&type=template&id=8d68f3f4& ***!
+  \****************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_CreatePostComponent_vue_vue_type_template_id_8d68f3f4___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./CreatePostComponent.vue?vue&type=template&id=8d68f3f4& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CreatePostComponent.vue?vue&type=template&id=8d68f3f4&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_CreatePostComponent_vue_vue_type_template_id_8d68f3f4___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_CreatePostComponent_vue_vue_type_template_id_8d68f3f4___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/CreateThreadComponent.vue":

resources/js/app.js

@@ -20,10 +20,10 @@ window.Vue = require('vue');
 // const files = require.context('./', true, /\.vue$/i);
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
 
-Vue.component('thread-component', require('./components/ThreadComponent.vue').default);
+Vue.component('thread-collection', require('./components/ThreadComponent.vue').default);
 Vue.component('thread-view', require('./components/ThreadViewComponent.vue').default);
 Vue.component('thread-create', require('./components/CreateThreadComponent.vue').default);
-//Vue.component('tag_selector', require('./components/TagSelectComponent.vue').default);
+Vue.component('post-create', require('./components/CreatePostComponent.vue').default);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/CreatePostComponent.vue

@@ -0,0 +1,48 @@
+<template>
+<form @submit.prevent="addPost" class="mb-3">
+    <h3>
+        Write Post
+    </h3>
+    <div class="form-group">
+        <textarea type="text" class="form-control" placeholder="Add to your post..." v-model="content"></textarea>
+    </div>
+    <div class="form-group">
+        <button type="submit" class="btn btn-primary">Add</button>
+    </div>
+</form>
+</template>
+
+<script>
+export default {
+    props: ['user_id', 'thread_id'],
+
+    data() {
+        return {
+            content: '',
+            edit: true
+        }
+    },
+
+    methods: {
+        addPost() {
+            fetch("../api/post/store", {
+                method: "post",
+                credentials: "same-origin",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    "content": this.content,
+                    "thread_id": this.thread_id,
+                    "user_id": this.user_id
+                })
+            })
+            .then(res => {
+                this.content = '';
+                this.$emit("submitted");
+            })
+            .catch(err => console.log(err));
+        }
+    }
+}
+</script>

resources/js/components/CreateThreadComponent.vue

@@ -1,10 +1,13 @@
 <template>
 <form @submit.prevent="createThread" class="mb-3">
+    <h3>
+        Create Thread
+    </h3>
     <div class="form-group">
         <input type="text" class="form-control" placeholder="Title" v-model="thread_title">
     </div>
     <div class="form-group">
-        <button type="submit" class="btn btn-light"></button>
+        <button type="submit" class="btn btn-primary">Create Thread</button>
     </div>
 </form>
 </template>
@@ -24,18 +27,19 @@ export default {
         createThread() {
             fetch("api/thread/store", {
                 method: "post",
-                body: {
+                credentials: "same-origin",
-                    thread_title: this.thread_title,
-                    user_id: this.user_id
-                },
                 headers: {
-                    'content-type': 'application/json'
+                    "Content-Type": "application/json"
-                }
+                },
+                body: JSON.stringify({
+                    "thread_title": this.thread_title,
+                    "user_id": this.user_id
+                })
             })
-            .then(res => res.json)
+            .then(res => {
-            .then(data => {
+                console.log(res);
                 this.thread_title = '';
-                alert("it might have worked");
+                this.$emit("submitted");
             })
             .catch(err => console.log(err));
         }

resources/js/components/ThreadComponent.vue

@@ -1,26 +1,36 @@
 <template>
     <div>
+        <div style="padding: 10px;">
+            <thread-create v-if="this.with === 'true'" :user_id="this.user_id" @submitted="fetchThreads"></thread-create>
+        </div>
         <h2>Browse Threads</h2>
         <div class="card card-body" v-for="thread in threads" v-bind:key="thread.id">
-            <p>{{ thread.creator.name }}</p>
+            <p v-if="thread.creator != null">{{ thread.creator.name }}</p>
+            <p v-else>[deleted]</p>
             <a v-bind:href="'./test/' + thread.id"><h3>{{ thread.thread_title }}</h3></a>
+            <button v-if="deleteCheck(thread)" v-on:click="destroyThread(thread.id)" class="btn btn-danger">Delete</button>
         </div>
     </div>
 </template>
 
 <script>
 export default {
+    props: ['user_id', 'with'],
+    
     data() {
         return {
+            logged_in: this.user_id,
             threads: [],
             thread: {
                 id: '',
                 thread_title: '',
                 creator: {
+                    id: '',
                     name: ''
                 },
             },
             thread_id: '',
+            scroll_flag: true,
             edit: false
         }
     },
@@ -35,7 +45,21 @@ export default {
                 .then(res => res.json())
                 .then(res => {
                     this.threads = res.data;
+                    if(this.scroll_flag) {
+                        window.scrollTo(0,document.body.scrollHeight);
+                    } else this.scroll_flag = true;
                 });
+        },
+        deleteCheck(thread) {
+            return thread.creator != null && this.user_id == thread.creator.id;   
+        },
+        destroyThread(thread_id) {
+            fetch("api/thread/destroy/" + thread_id)
+            //.then(res => res.json())
+            .then(res => {
+                this.scroll_flag = false;
+                this.fetchThreads();
+            });
         }
     }
 }

resources/js/components/ThreadViewComponent.vue

@@ -1,17 +1,28 @@
 <template>
 <div>
     <h2>{{ thread_title }}</h2>
-    <h3>By {{ creator.name }}</h3>
+    <h3 v-if="creator != null">By {{ creator.name }}</h3>
+    <h3 v-else>By [deleted]</h3>
     <div class="card card-body" v-for="post in posts" v-bind:key="post.id">
-        <p>{{ post.poster.name }}</p>
+        <p v-if="post.poster != null">{{ post.poster.name }}</p>
+        <p v-else>[deleted]</p>
         <p>{{ post.content }}</p>
+        <button v-if="deleteCheck(post)" v-on:click="destroyPost(post.id)" class="btn btn-danger">Delete</button>
+    </div>
+    <div style="padding: 10px">
+        <post-create 
+        v-if="this.with === 'true'" 
+        :user_id="user_id" 
+        :thread_id="thread_id" 
+        @submitted="fetchThread">
+        </post-create>
     </div>
 </div>
 </template>
 
 <script>
 export default {
-    props: ['thread_id'],
+    props: ['user_id', 'thread_id', 'with'],
 
     data() {
         return {
@@ -25,6 +36,7 @@ export default {
                 id: '',
                 content: '',
                 poster: {
+                    id: '',
                     name: ''
                 }
             }
@@ -52,6 +64,16 @@ export default {
                 this.posts = res.data;
             })
             .catch(err => console.log(err));;
+        },
+        deleteCheck(post) {
+            return post.poster != null && this.user_id == post.poster.id;   
+        },
+        destroyPost(post_id) {
+            fetch("../api/post/destroy/" + post_id)
+            //.then(res => res.json())
+            .then(res => {
+                this.fetchThread();
+            });
         }
     }
 }

resources/views/thread.blade.php

@@ -3,7 +3,11 @@
 @section('content') 
 <div class="app">
     <div class="container">
-        <thread-view thread_id="<?php echo $thread_id; ?>">
+@guest
+        <thread-view thread_id="<?php echo $thread_id; ?>" with="false"> 
+@else
+        <thread-view user_id="{{ Auth::user()->id }}" thread_id="<?php echo $thread_id; ?>" with="true">
+@endguest
     </div>
 </div>
 @endsection

resources/views/threads.blade.php

@@ -3,7 +3,13 @@
 @section('content')
 <div id="app">
     <div class="container">
-        <thread-component></thread-component>
+    <div>
+@guest
+        <thread-collection with=false></thread-collection>
+@else
+        <thread-collection user_id="{{ Auth::user()->id }}" with=true></thread-collection>
+@endguest
+    </div>
     </div>
 </div>
 @endsection

routes/api.php

@@ -25,11 +25,11 @@ $thread_prefix = "thread";
 //Gets
 Route::get('threads', 'ThreadController@index');
 Route::get($thread_prefix . '/{id}', 'ThreadController@show');
+Route::get($thread_prefix  . '/destroy/{id}', 'ThreadController@destroy');
 
 //Posts
 Route::post($thread_prefix . '/update/{thread}', 'ThreadController@update');
 Route::post($thread_prefix . '/store', 'ThreadController@store');
-Route::post($thread_prefix  . '/destroy/{thread}', 'ThreadController@destroy');
 
 /**
  * Post routes
@@ -37,11 +37,11 @@ Route::post($thread_prefix  . '/destroy/{thread}', 'ThreadController@destroy');
 $post_prefix = "post";
 //Gets
 Route::get($post_prefix . '/thread/{thread_id}', 'PostController@show');
+Route::get($post_prefix  . '/destroy/{id}', 'PostController@destroy');
 
 //Posts
 Route::post($post_prefix . '/update/{post}', 'PostController@update');
 Route::post($post_prefix . '/store', 'PostController@store');
-Route::post($post_prefix  . '/destroy/{post}', 'PostController@destroy');
 
  /**
   * Tag routes
@@ -53,4 +53,4 @@ Route::get($tag_prefix . '/{id}', 'TagController@show');
 //Posts
 Route::post($tag_prefix . '/update/{tag}', 'TagController@update');
 Route::post($tag_prefix . '/store', 'TagController@store');
-Route::post($tag_prefix  . '/destroy/{tag}', 'TagController@destroy');
+Route::post($tag_prefix  . '/destroy/{tag}', 'TagController@destroy');

routes/web.php

@@ -12,7 +12,7 @@
 */
 
 Route::get('/', function () {
-    return redirect('/home');
+    return redirect('/threads');
 });
 
 Auth::routes();