From 1c2e3a19caf28d2578a060dd6d8fbc64ee8a85c7 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Mon, 20 Aug 2018 23:30:05 +0800
Subject: [PATCH] Add likes count to items on skinlib page

---
 resources/assets/src/components/skinlib/List.vue        | 2 ++
 resources/assets/src/components/skinlib/SkinLibItem.vue | 6 +++++-
 resources/assets/tests/components/skinlib/List.test.js  | 7 ++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/assets/src/components/skinlib/List.vue b/resources/assets/src/components/skinlib/List.vue
index 10d45ae6..450ce26e 100644
--- a/resources/assets/src/components/skinlib/List.vue
+++ b/resources/assets/src/components/skinlib/List.vue
@@ -113,6 +113,7 @@
                                 :name="item.name"
                                 :type="item.type"
                                 :liked="item.liked"
+                                :likes="item.likes"
                                 :isPublic="item.public"
                                 :anonymous="anonymous"
                                 @like-toggled="onLikeToggled(index, $event)"
@@ -244,6 +245,7 @@ export default {
         },
         onLikeToggled(index, action) {
             this.items[index].liked = action;
+            this.items[index].likes += action ? 1 : -1;
         }
     }
 };
diff --git a/resources/assets/src/components/skinlib/SkinLibItem.vue b/resources/assets/src/components/skinlib/SkinLibItem.vue
index cc69406c..ea043608 100644
--- a/resources/assets/src/components/skinlib/SkinLibItem.vue
+++ b/resources/assets/src/components/skinlib/SkinLibItem.vue
@@ -18,7 +18,10 @@
                     :class="{ liked, anonymous }"
                     href="#"
                     @click.stop="toggleLiked"
-                ><i class="fas fa-heart"></i></a>
+                >
+                    <i class="fas fa-heart"></i>
+                    <span>{{ likes }}</span>
+                </a>
 
                 <small v-if="!isPublic" class="more private-label">
                     {{ $t('skinlib.private') }}
@@ -41,6 +44,7 @@ export default {
             validator: value => ['steve', 'alex', 'cape'].includes(value)
         },
         liked: Boolean,
+        likes: Number,
         anonymous: Boolean,
         isPublic: Boolean  // `public` is a reserved keyword
     },
diff --git a/resources/assets/tests/components/skinlib/List.test.js b/resources/assets/tests/components/skinlib/List.test.js
index 915c9686..be6f32e4 100644
--- a/resources/assets/tests/components/skinlib/List.test.js
+++ b/resources/assets/tests/components/skinlib/List.test.js
@@ -172,10 +172,15 @@ test('on page changed', () => {
 
 test('on like toggled', async () => {
     Vue.prototype.$http.get.mockResolvedValue({
-        items: [{ tid: 1, liked: false }], total_pages: 1, current_uid: 0
+        items: [{ tid: 1, liked: false, likes: 0 }], total_pages: 1, current_uid: 0
     });
     const wrapper = mount(List);
     await wrapper.vm.$nextTick();
     wrapper.vm.onLikeToggled(0, true);
     expect(wrapper.vm.items[0].liked).toBeTrue();
+    expect(wrapper.vm.items[0].likes).toBe(1);
+
+    wrapper.vm.onLikeToggled(0, false);
+    expect(wrapper.vm.items[0].liked).toBeFalse();
+    expect(wrapper.vm.items[0].likes).toBe(0);
 });