Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (15) いいね機能

{
  "photo_id": "abcd1234EFGH"
}

$ php artisan make:test LikeApiTest

<?php

namespace Tests\Feature;

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

class LikeApiTest extends TestCase
{
    use RefreshDatabase;

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

        $this->user = factory(User::class)->create();

        factory(Photo::class)->create();
        $this->photo = Photo::first();
    }

    /**
     * @test
     */
    public function should_いいねを追加できる()
    {
        $response = $this->actingAs($this->user)
            ->json('PUT', route('photo.like', [
                'id' => $this->photo->id,
            ]));

        $response->assertStatus(200)
            ->assertJsonFragment([
                'photo_id' => $this->photo->id,
            ]);

        $this->assertEquals(1, $this->photo->likes()->count());
    }

    /**
     * @test
     */
    public function should_2回同じ写真にいいねしても1個しかいいねがつかない()
    {
        $param = ['id' => $this->photo->id];
        $this->actingAs($this->user)->json('PUT', route('photo.like', $param));
        $this->actingAs($this->user)->json('PUT', route('photo.like', $param));

        $this->assertEquals(1, $this->photo->likes()->count());
    }

    /**
     * @test
     */
    public function should_いいねを解除できる()
    {
        $this->photo->likes()->attach($this->user->id);

        $response = $this->actingAs($this->user)
            ->json('DELETE', route('photo.like', [
                'id' => $this->photo->id,
            ]));

        $response->assertStatus(200)
            ->assertJsonFragment([
                'photo_id' => $this->photo->id,
            ]);

        $this->assertEquals(0, $this->photo->likes()->count());
    }
}

// いいね
Route::put('/photos/{id}/like', 'PhotoController@like')->name('photo.like');

// いいね解除
Route::delete('/photos/{id}/like', 'PhotoController@unlike');

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

/**
 * いいね
 * @param string $id
 * @return array
 */
public function like(string $id)
{
    $photo = Photo::where('id', $id)->with('likes')->first();

    if (! $photo) {
        abort(404);
    }

    $photo->likes()->detach(Auth::user()->id);
    $photo->likes()->attach(Auth::user()->id);

    return ["photo_id" => $id];
}

/**
 * いいね解除
 * @param string $id
 * @return array
 */
public function unlike(string $id)
{
    $photo = Photo::where('id', $id)->with('likes')->first();

    if (! $photo) {
        abort(404);
    }

    $photo->likes()->detach(Auth::user()->id);

    return ["photo_id" => $id];
}

$ ./vendor/bin/phpunit --testdox

{
  "data": [
    {
      "id": "abcd1234EFGH",
      "url": "https://s3-ap-northeast-1.amazonaws.com/backet-name/abcd1234EFGH.jpeg",
      "owner": {
        "name": "John Lennon"
      },
      "likes_count": 12,
      "liked_by_user": true
    }
  ]
}

{
  "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"
      }
    }
  ],
  "likes_count": 12,
  "liked_by_user": true
}

'liked_by_user' => false,
'likes_count' => 0,

/**
 * アクセサ - likes_count
 * @return int
 */
public function getLikesCountAttribute()
{
    return $this->likes->count();
}

use Illuminate\Support\Facades\Auth; // ★ 追記

/**
 * アクセサ - liked_by_user
 * @return boolean
 */
public function getLikedByUserAttribute()
{
    if (Auth::guest()) {
        return false;
    }

    return $this->likes->contains(function ($user) {
        return $user->id === Auth::user()->id;
    });
}

 /** JSONに含めるアクセサ */
 protected $appends = [
     'url', 'likes_count', 'liked_by_user',
 ];

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

public function index()
{
    $photos = Photo::with(['owner', 'likes'])
        ->orderBy(Photo::CREATED_AT, 'desc')->paginate();

    return $photos;
}

public function show(string $id)
{
    $photo = Photo::where('id', $id)
        ->with(['owner', 'comments.author', 'likes'])->first();

    return $photo ?? abort(404);
}

$ ./vendor/bin/phpunit --testdox

<button
  class="photo__action photo__action--like"
  :class="{ 'photo__action--liked': item.liked_by_user }"
  title="Like photo"
  @click.prevent="like"
>
  <i class="icon ion-md-heart"></i>{{ item.likes_count }}
</button>

like () {
  this.$emit('like', {
    id: this.item.id,
    liked: this.item.liked_by_user
  })
}

<Photo
  class="grid__item"
  v-for="photo in photos"
  :key="photo.id"
  :item="photo"
  @like="onLikeClick"
/>

onLikeClick ({ id, liked }) {
  if (! this.$store.getters['auth/check']) {
    alert('いいね機能を使うにはログインしてください。')
    return false
  }

  if (liked) {
    this.unlike(id)
  } else {
    this.like(id)
  }
},

async like (id) {
  const response = await axios.put(`/api/photos/${id}/like`)

  if (response.status !== OK) {
    this.$store.commit('error/setCode', response.status)
    return false
  }

  this.photos = this.photos.map(photo => {
    if (photo.id === response.data.photo_id) {
      photo.likes_count += 1
      photo.liked_by_user = true
    }
    return photo
  })
},

async unlike (id) {
  const response = await axios.delete(`/api/photos/${id}/like`)

  if (response.status !== OK) {
    this.$store.commit('error/setCode', response.status)
    return false
  }

  this.photos = this.photos.map(photo => {
    if (photo.id === response.data.photo_id) {
      photo.likes_count -= 1
      photo.liked_by_user = false
    }
    return photo
  })
}

<button
  class="button button--like"
  :class="{ 'button--liked': photo.liked_by_user }"
  title="Like photo"
  @click="onLikeClick"
>
  <i class="icon ion-md-heart"></i>{{ photo.likes_count }}
</button>

onLikeClick () {
  if (! this.isLogin) {
    alert('いいね機能を使うにはログインしてください。')
    return false
  }

  if (this.photo.liked_by_user) {
    this.unlike()
  } else {
    this.like()
  }
},

async like () {
  const response = await axios.put(`/api/photos/${this.id}/like`)

  if (response.status !== OK) {
    this.$store.commit('error/setCode', response.status)
    return false
  }

  this.photo.likes_count = this.photo.likes_count + 1
  this.photo.liked_by_user = true
},

async unlike () {
  const response = await axios.delete(`/api/photos/${this.id}/like`)

  if (response.status !== OK) {
    this.$store.commit('error/setCode', response.status)
    return false
  }

  this.photo.likes_count = this.photo.likes_count - 1
  this.photo.liked_by_user = false
}