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"
- >
+ >
+
+ {{ likes }}
+
{{ $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);
});