Part 2 - Created Comments Model and API Endpoints

Author: jacurtis

app/Comment.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Comment extends Model
+{
+  protected $fillable = [
+    'body', 'user_id', 'post_id'
+  ];
+
+  public function post()
+  {
+    return $this->belongsTo('App\Post');
+  }
+
+  public function user()
+  {
+    return $this->belongsTo('App\User');
+  }
+}

app/Http/Controllers/CommentController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Post;
+use App\Comment;
+use Auth;
+
+class CommentController extends Controller
+{
+  public function index(Post $post)
+  {
+    return response()->json($post->comments()->with('user')->latest()->get());
+  }
+
+  public function store(Request $request, Post $post)
+  {
+    $comment = $post->comments()->create([
+      'body' => $request->body,
+      'user_id' => Auth::id()
+    ]);
+
+    $comment = Comment::where('id', $comment->id)->with('user')->first();
+
+    return $comment->toJson();
+  }
+}

app/Post.php

@@ -14,4 +14,9 @@ public function user()
   {
     return $this->belongsTo('App\User');
   }
+
+  public function comments()
+  {
+    return $this->hasMany('App\Comment');
+  }
 }

app/User.php

@@ -34,4 +34,9 @@ public function accounts() {
     public function posts() {
       return $this->hasMany('App\Post');
     }
+
+    public function comments()
+    {
+      return $this->hasMany('App\Comment');
+    }
 }

database/migrations/2017_12_12_235022_create_comments_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateCommentsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('comments', function (Blueprint $table) {
+            $table->increments('id');
+            $table->integer('user_id')->unsigned();
+            $table->integer('post_id')->unsigned();
+            $table->text('body');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('comments');
+    }
+}

resources/views/posts/show.blade.php

@@ -17,24 +17,68 @@
 
     <h3>Comments:</h3>
     <div style="margin-bottom:50px;">
-      <textarea class="form-control" rows="3" name="body" placeholder="Leave a comment"></textarea>
-      <button class="btn btn-success" style="margin-top:10px">Save Comment</button>
+      <textarea class="form-control" rows="3" name="body" placeholder="Leave a comment" v-model="commentBox"></textarea>
+      <button class="btn btn-success" style="margin-top:10px" @click.prevent="postComment">Save Comment</button>
     </div>
 
 
-    <div class="media" style="margin-top:20px;">
+    <div class="media" style="margin-top:20px;" v-for="comment in comments">
       <div class="media-left">
         <a href="#">
           <img class="media-object" src="http://placeimg.com/80/80" alt="...">
         </a>
       </div>
       <div class="media-body">
-        <h4 class="media-heading">John Doe said...</h4>
+        <h4 class="media-heading">@{{comment.user.name}} said...</h4>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          @{{comment.body}}
         </p>
-        <span style="color: #aaa;">on Dec 15, 2017</span>
+        <span style="color: #aaa;">on @{{comment.created_at}}</span>
       </div>
     </div>
   </div>
 @endsection
+
+
+@section('scripts')
+  <script>
+
+    const app = new Vue({
+      el: '#app',
+      data: {
+        comments: {},
+        commentBox: '',
+        post: {!! $post->toJson() !!},
+        user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!}
+      },
+      mounted() {
+        this.getComments();
+      },
+      methods: {
+        getComments() {
+          axios.get('/api/posts/'+this.post.id+'/comments')
+                .then((response) => {
+                  this.comments = response.data
+                })
+                .catch(function (error) {
+                  console.log(error);
+                });
+        },
+        postComment() {
+          axios.post('/api/posts/'+this.post.id+'/comment', {
+            api_token: this.user.api_token,
+            body: this.commentBox
+          })
+          .then((response) => {
+            this.comments.unshift(response.data);
+            this.commentBox = '';
+          })
+          .catch((error) => {
+            console.log(error);
+          })
+        }
+      }
+    })
+
+  </script>
+@endsection

routes/api.php

@@ -12,7 +12,8 @@
 | is assigned the "api" middleware group. Enjoy building your API!
 |
 */
+Route::get('/posts/{post}/comments', 'CommentController@index');
 
-Route::middleware('auth:api')->get('/user', function (Request $request) {
-    return $request->user();
+Route::middleware('auth:api')->group(function () {
+    Route::post('/posts/{post}/comment', 'CommentController@store');
 });