Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (14) コメント投稿機能

{
  "id": "abcd1234EFGH",
  "url": "https://s3-ap-northeast-1.amazonaws.com/backet-name/abcd1234EFGH.jpeg",
  "owner": {
    "name": "John Lennon"
  },
  "comments": [
    {
      "content": "Nice picture!",
      "author": {
        "name": "George Harrison"
      }
    },
    {
      "content": "Thanks for sharing.",
      "author": {
        "name": "Ringo Starr"
      }
    }
  ]
}

{
  "content": "Thanks for sharing.",
  "author": {
    "name": "Ringo Starr"
  }
}

$ php artisan make:factory CommentFactory

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use Faker\Generator as Faker;

$factory->define(App\Comment::class, function (Faker $faker) {
    return [
        'content' => substr($faker->text, 0, 500),
        'user_id' => fn() => factory(App\User::class)->create()->id,
    ];
});

<?php

namespace Tests\Feature;

use App\Comment;
use App\Photo;
use Tests\TestCase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Foundation\Testing\RefreshDatabase;

class PhotoDetailApiTest extends TestCase
{
    use RefreshDatabase;

    /**
     * @test
     */
    public function should_正しい構造のJSONを返却する()
    {
        factory(Photo::class)->create()->each(function ($photo) {
            $photo->comments()->saveMany(factory(Comment::class, 3)->make());
        });
        $photo = Photo::first();

        $response = $this->json('GET', route('photo.show', [
            'id' => $photo->id,
        ]));

        $response->assertStatus(200)
            ->assertJsonFragment([
                'id' => $photo->id,
                'url' => $photo->url,
                'owner' => [
                    'name' => $photo->owner->name,
                ],
                'comments' => $photo->comments
                    ->sortByDesc('id')
                    ->map(function ($comment) {
                        return [
                            'author' => [
                                'name' => $comment->author->name,
                            ],
                            'content' => $comment->content,
                        ];
                    })
                    ->all(),
            ]);
    }
}

$ php artisan make:test AddCommentApiTest

<?php

namespace Tests\Feature;

use App\Photo;
use App\User;
use Tests\TestCase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Foundation\Testing\RefreshDatabase;

class AddCommentApiTest extends TestCase
{
    use RefreshDatabase;

    public function setUp(): void
    {
        parent::setUp();

        // テストユーザー作成
        $this->user = factory(User::class)->create();
    }

    /**
     * @test
     */
    public function should_コメントを追加できる()
    {
        factory(Photo::class)->create();
        $photo = Photo::first();

        $content = 'sample content';

        $response = $this->actingAs($this->user)
            ->json('POST', route('photo.comment', [
                'photo' => $photo->id,
            ]), compact('content'));

        $comments = $photo->comments()->get();

        $response->assertStatus(201)
            // JSONフォーマットが期待通りであること
            ->assertJsonFragment([
                "author" => [
                    "name" => $this->user->name,
                ],
                "content" => $content,
            ]);

        // DBにコメントが1件登録されていること
        $this->assertEquals(1, $comments->count());
        // 内容がAPIでリクエストしたものであること
        $this->assertEquals($content, $comments[0]->content);
    }
}

// コメント
Route::post('/photos/{photo}/comments', 'PhotoController@addComment')->name('photo.comment');

$ php artisan make:model Comment

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model
{
    /** JSONに含める属性 */
    protected $visible = [
        'author', 'content',
    ];

    /**
     * リレーションシップ - usersテーブル
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function author()
    {
        return $this->belongsTo('App\User', 'user_id', 'id', 'users');
    }
}

/**
 * リレーションシップ - commentsテーブル
 * @return \Illuminate\Database\Eloquent\Relations\HasMany
 */
public function comments()
{
    return $this->hasMany('App\Comment')->orderBy('id', 'desc');
}

/** JSONに含める属性 */
protected $visible = [
    'id', 'owner', 'url', 'comments',
];

$ php artisan make:request StoreComment

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreComment extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'content' => 'required|max:500',
        ];
    }
}

use App\Comment;
use App\Http\Requests\StoreComment;

class PhotoController extends Controller
{
    /* 中略 */

    /**
     * コメント投稿
     * @param Photo $photo
     * @param StoreComment $request
     * @return \Illuminate\Http\Response
     */
    public function addComment(Photo $photo, StoreComment $request)
    {
        $comment = new Comment();
        $comment->content = $request->get('content');
        $comment->user_id = Auth::user()->id;
        $photo->comments()->save($comment);

        // authorリレーションをロードするためにコメントを取得しなおす
        $new_comment = Comment::where('id', $comment->id)->with('author')->first();

        return response($new_comment, 201);
    }
}

$ ./vendor/bin/phpunit --testdox

/**
 * 写真詳細
 * @param string $id
 * @return Photo
 */
public function show(string $id)
{
    $photo = Photo::where('id', $id)
        ->with(['owner', 'comments.author'])->first();

    return $photo ?? abort(404);
}

Photo -[comments]-> Comment -[author]-> User

SELECT * FROM `photos` WHERE `id` = "abcd1234EFGH";
SELECT * FROM `users` WHERE `id` IN (1); -- ownerリレーションを解決する
SELECT * FROM `comments` WHERE `photo_id` = "abcd1234EFGH"; -- commentsリレーションを解決する
SELECT * FROM `users` WHERE `id` IN (2, 3, 4); -- comments.authorリレーションを解決する

$ ./vendor/bin/phpunit --testdox

<h2 class="photo-detail__title">
  <i class="icon ion-md-chatboxes"></i>Comments
</h2>
<form @submit.prevent="addComment" class="form">
  <textarea class="form__item" v-model="commentContent"></textarea>
  <div class="form__button">
    <button type="submit" class="button button--inverse">submit comment</button>
  </div>
</form>

data () {
  return {
    photo: null,
    fullWidth: false,
    commentContent: ''
  }
},

methods: {
  async fetchPhoto () {/* 中略 */},
  async addComment () {
    const response = await axios.post(`/api/photos/${this.id}/comments`, {
      content: this.commentContent
    })

    this.commentContent = ''
  }
}

import { OK, CREATED, UNPROCESSABLE_ENTITY } from '../util'

data () {
  return {
    photo: null,
    commentContent: '',
    commentErrors: null
  }
},

async addComment () {

  const response = await axios.post(`/api/photos/${this.id}/comments`, {
    content: this.commentContent
  })

  // バリデーションエラー
  if (response.status === UNPROCESSABLE_ENTITY) {
    this.commentErrors = response.data.errors
    return false
  }

  this.commentContent = ''
  // エラーメッセージをクリア
  this.commentErrors = null

  // その他のエラー
  if (response.status !== CREATED) {
    this.$store.commit('error/setCode', response.status)
    return false
  }
}

<form @submit.prevent="addComment" class="form">
  <div v-if="commentErrors" class="errors">
    <ul v-if="commentErrors.content">
      <li v-for="msg in commentErrors.content" :key="msg">{{ msg }}</li>
    </ul>
  </div>
  <!-- 中略 -->
</form>

computed: {
  isLogin () {
    return this.$store.getters['auth/check']
  }
},

<form v-if="isLogin" @submit.prevent="addComment" class="form">

<h2 class="photo-detail__title">
  <i class="icon ion-md-chatboxes"></i>Comments
</h2>
<ul v-if="photo.comments.length > 0" class="photo-detail__comments">
  <li
    v-for="comment in photo.comments"
    :key="comment.content"
    class="photo-detail__commentItem"
  >
    <p class="photo-detail__commentBody">
      {{ comment.content }}
    </p>
    <p class="photo-detail__commentInfo">
      {{ comment.author.name }}
    </p>
  </li>
</ul>
<p v-else>No comments yet.</p>
<form v-if="isLogin" @submit.prevent="addComment" class="form">
  <!-- 中略 -->
</form>

async addComment () {
  /* 中略 */

  this.photo.comments = [
    response.data,
    ...this.photo.comments
  ]
}