Implement post deletion and add animation to timeline list

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/TimelineEntry.vue

@@ -32,7 +32,7 @@
 				</div>
 				<div v-click-outside="hidePopoverMenu" class="post-actions">
 					<a class="icon-more" @click.prevent="togglePopoverMenu" />
-					<div :class="{open: menuOpened}" class="popovermenu menu-center">
+					<div :class="{open: menuOpened}" class="popovermenu">
 						<popover-menu :menu="popoverMenu" />
 					</div>
 				</div>
@@ -48,6 +48,7 @@ import pluginTag from 'linkifyjs/plugins/hashtag'
 import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'
 import popoverMenu from './../mixins/popoverMenu'
+import currentUser from './../mixins/currentUserMixin'
 
 pluginTag(linkify)
 pluginMention(linkify)
@@ -57,7 +58,7 @@ export default {
 	components: {
 		Avatar
 	},
-	mixins: [popoverMenu],
+	mixins: [popoverMenu, currentUser],
 	props: {
 		item: { type: Object, default: () => {} }
 	},
@@ -74,13 +75,18 @@ export default {
 					text: t('social', 'Reply to post')
 				}
 			]
-			actions.push(
-				{
-					action: () => { },
-					icon: 'icon-delete',
-					text: t('social', 'Delete post')
-				}
-			)
+			if (this.item.actor_info.account === this.cloudId) {
+				actions.push(
+					{
+						action: () => {
+							this.$store.dispatch('postDelete', this.item)
+							this.hidePopoverMenu()
+						},
+						icon: 'icon-delete',
+						text: t('social', 'Delete post')
+					}
+				)
+			}
 			return actions
 		},
 		relativeTimestamp() {

src/components/TimelineList.vue

@@ -22,7 +22,9 @@
 
 <template>
 	<div class="social__timeline">
-		<timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" />
+		<transition-group name="list" tag="div">
+			<timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" />
+		</transition-group>
 		<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
 			<div slot="spinner">
 				<div class="icon-loading" />
@@ -37,6 +39,22 @@
 	</div>
 </template>
 
+<style scoped>
+	.list-item {
+	}
+	.list-enter-active, .list-leave-active {
+		transition: all .5s;
+	}
+	.list-enter {
+		opacity: 0;
+		transform: translateY(-30px);
+	}
+	.list-leave-to {
+		opacity: 0;
+		transform: translateX(-100px);
+	}
+</style>
+
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
 import TimelineEntry from './../components/TimelineEntry'

src/store/timeline.js

@@ -37,6 +37,9 @@ const mutations = {
 			Vue.set(state.timeline, data[item].id, data[item])
 		}
 	},
+	removePost(state, post) {
+		Vue.delete(state.timeline, post.id)
+	},
 	resetTimeline(state) {
 		state.timeline = {}
 		state.since = Math.floor(Date.now() / 1000) + 1
@@ -83,6 +86,16 @@ const actions = {
 			})
 		})
 	},
+	postDelete(context, post) {
+		return axios.delete(OC.generateUrl(`apps/social/api/v1/post?id=${post.id}`)).then((response) => {
+			context.commit('removePost', post)
+			// eslint-disable-next-line no-console
+			console.log('Post deleted with token ' + response.data.result.token)
+		}).catch((error) => {
+			OC.Notification.showTemporary('Failed to delete the post')
+			console.error('Failed to delete the post', error)
+		})
+	},
 	refreshTimeline(context) {
 		return this.dispatch('fetchTimeline', { sinceTimestamp: Math.floor(Date.now() / 1000) + 1 })
 	},