WIP

src/_variables.scss

@@ -3,4 +3,5 @@ $main-background: white;
 $darkened-background: whitesmoke;
 $green: #0fa00f;
 $blue: #0095ff;
+$red: #9f0520
 

src/components/delete_button/delete_button.js

@@ -0,0 +1,10 @@
+const DeleteButton = {
+  props: [ 'status' ],
+  methods: {
+    deleteStatus () {
+      this.$store.dispatch('deleteStatus', {id: this.status.id})
+    }
+  }
+}
+
+export default DeleteButton

src/components/delete_button/delete_button.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <i class='icon-cancel fa' @click.prevent='deleteStatus()'></i>
+  </div>
+</template>
+
+<script src="./delete_button.js" ></script>
+
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .icon-cancel {
+     cursor: pointer;
+     &:hover {
+      color: $red;
+     }
+  }
+</style>

src/components/status/status.js

@@ -2,6 +2,7 @@ import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
+import DeleteButton from '../delete_button/delete_button.vue'
 
 const Status = {
   props: [ 'statusoid' ],
@@ -20,13 +21,15 @@ const Status = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
-    }
+    },
+    deleteStatus () { return !!this.statusoid }
   },
   components: {
     Attachment,
     FavoriteButton,
     RetweetButton,
-    PostStatusForm
+    PostStatusForm,
+    DeleteButton
   },
   methods: {
     toggleReplying () {

src/components/status/status.vue

@@ -46,6 +46,7 @@
             </div>
             <retweet-button :status=status></retweet-button>
             <favorite-button :status=status></favorite-button>
+            <delete-button :status=status></delete-button>
           </div>
 
           <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form>

src/services/api/api.service.js

@@ -6,6 +6,7 @@ const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_time
 const FAVORITE_URL = '/api/favorites/create'
 const UNFAVORITE_URL = '/api/favorites/destroy'
 const RETWEET_URL = '/api/statuses/retweet'
+const STATUS_DELETE_URL = '/api/statuses/destroy'
 const STATUS_UPDATE_URL = '/api/statuses/update.json'
 const STATUS_URL = '/api/statuses/show'
 const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
@@ -103,6 +104,13 @@ const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
   })
 }
 
+const deleteStatus = ({ id, credentials }) => {
+  return fetch(`${STATUS_DELETE_URL}/${id}.json`, {
+    headers: authHeaders(credentials),
+    method: 'POST'
+  })
+}
+
 const uploadMedia = ({formData, credentials}) => {
   return fetch(MEDIA_UPLOAD_URL, {
     body: formData,
@@ -122,6 +130,7 @@ const apiService = {
   unfavorite,
   retweet,
   postStatus,
+  deleteStatus,
   uploadMedia
 }