Creates a 'like' button.

The following problems remain:

1- Once a post has been liked (the star icon turned yellow), it is impossible
   to unlike it (the star stays yellow, no matter what)
2- Communication with backend doesn't work; 'got 'failed to like post'

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>

src/components/TimelinePost.vue

@@ -29,6 +29,7 @@
 				<a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')"
 					:class="(isBoosted) ? 'icon-boosted' : 'icon-boost'"
 					@click.prevent="boost" />
+				<a v-tooltip.bottom="t('social', 'Like')" :class="(isLiked) ? 'icon-starred' : 'icon-favorite'" @click.prevent="like" />
 				<div v-if="popoverMenu.length > 0" v-tooltip.bottom="t('social', 'More actions')" class="post-actions-more">
 					<a class="icon-more" @click.prevent="togglePopoverMenu" />
 					<div :class="{open: menuOpened}" class="popovermenu menu-center">
@@ -122,6 +123,12 @@ export default {
 				return false
 			}
 			return !!this.item.action.values.boosted
+		},
+		isLiked() {
+			if (typeof this.item.action === 'undefined') {
+				return false
+			}
+			return !!this.item.action.values.liked
 		}
 	},
 	methods: {
@@ -141,6 +148,17 @@ export default {
 			} else {
 				this.$store.dispatch('postBoost', params)
 			}
+		},
+		like() {
+			let params = {
+				post: this.item,
+				parentAnnounce: this.parentAnnounce
+			}
+			if (this.isBoosted) {
+				this.$store.dispatch('postUnlike', params)
+			} else {
+				this.$store.dispatch('postLike', params)
+			}
 		}
 	}
 }
@@ -184,6 +202,8 @@ export default {
 		.icon-reply,
 		.icon-boost,
 		.icon-boosted,
+		.icon-starred,
+		.icon-favorite,
 		.icon-more {
 			display: inline-block;
 			width: 44px;

src/store/timeline.js

@@ -54,6 +54,22 @@ const mutations = {
 	setAccount(state, account) {
 		state.account = account
 	},
+	likePost(state, { post, parentAnnounce }) {
+		if (typeof state.timeline[post.id] !== 'undefined') {
+			Vue.set(state.timeline[post.id].action.values, 'liked', true)
+		}
+		if (typeof parentAnnounce.id !== 'undefined') {
+			Vue.set(state.timeline[parentAnnounce.id].cache[parentAnnounce.object].object.action.values, 'liked', true)
+		}
+	},
+	unlikePost(state, { post, parentAnnounce }) {
+		if (typeof state.timeline[post.id] !== 'undefined') {
+			Vue.set(state.timeline[post.id].action.values, 'liked', false)
+		}
+		if (typeof parentAnnounce.id !== 'undefined') {
+			Vue.set(state.timeline[parentAnnounce.id].cache[parentAnnounce.object].object.action.values, 'liked', false)
+		}
+	},
 	boostPost(state, { post, parentAnnounce }) {
 		if (typeof state.timeline[post.id] !== 'undefined') {
 			Vue.set(state.timeline[post.id].action.values, 'boosted', true)
@@ -113,6 +129,30 @@ const actions = {
 			console.error('Failed to delete the post', error)
 		})
 	},
+	postLike(context, { post, parentAnnounce }) {
+		return new Promise((resolve, reject) => {
+			axios.post(OC.generateUrl(`apps/social/api/v1/post/like?postId=${post.id}`)).then((response) => {
+				context.commit('likePost', { post, parentAnnounce })
+				// eslint-disable-next-line no-console
+				console.log('Post liked with token ' + response.data.result.token)
+				resolve(response)
+			}).catch((error) => {
+				OC.Notification.showTemporary('Failed to like post')
+				console.error('Failed to like post', error.response)
+				reject(error)
+			})
+		})
+	},
+	postUnlike(context, { post, parentAnnounce }) {
+		return axios.delete(OC.generateUrl(`apps/social/api/v1/post/like?postId=${post.id}`)).then((response) => {
+			context.commit('unlikePost', { post, parentAnnounce })
+			// eslint-disable-next-line no-console
+			console.log('Boost unliked with token ' + response.data.result.token)
+		}).catch((error) => {
+			OC.Notification.showTemporary('Failed to unlike post')
+			console.error('Failed to unlike post', error)
+		})
+	},
 	postBoost(context, { post, parentAnnounce }) {
 		return new Promise((resolve, reject) => {
 			axios.post(OC.generateUrl(`apps/social/api/v1/post/boost?postId=${post.id}`)).then((response) => {