From 1c75feae601b753f1dd30a15c49794c9de1a05fb Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Wed, 7 Dec 2016 21:50:46 +0100
Subject: [PATCH] Move delete button for status into a component

---
 src/components/delete_button/delete_button.js | 16 +++++++++++++++
 .../delete_button/delete_button.vue           | 20 +++++++++++++++++++
 src/components/status/status.js               | 12 +++--------
 src/components/status/status.vue              | 13 +-----------
 4 files changed, 40 insertions(+), 21 deletions(-)
 create mode 100644 src/components/delete_button/delete_button.js
 create mode 100644 src/components/delete_button/delete_button.vue

diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
new file mode 100644
index 00000000..5f824899
--- /dev/null
+++ b/src/components/delete_button/delete_button.js
@@ -0,0 +1,16 @@
+const DeleteButton = {
+  props: [ 'status' ],
+  methods: {
+    deleteStatus () {
+      const confirmed = confirm('Do you really want to delete this status?')
+      if (confirmed) {
+        this.$store.dispatch('deleteStatus', { id: this.status.id })
+      }
+    }
+  },
+  computed: {
+    canDelete () { return this.status.user.rights.delete_others_notice || this.status.user.id == this.$store.state.users.currentUser.id }
+  }
+}
+
+export default DeleteButton
diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
new file mode 100644
index 00000000..304f8a63
--- /dev/null
+++ b/src/components/delete_button/delete_button.vue
@@ -0,0 +1,20 @@
+<template>
+  <div v-if="canDelete">
+    <a href="#" v-on:click.prevent="deleteStatus()">
+      <i class='fa icon-cancel delete-status'></i>
+    </a>
+  </div>
+</template>
+
+<script src="./delete_button.js" ></script>
+
+<style lang='scss'>
+  @import '../../_variables.scss';
+
+  .icon-cancel,.delete-status {
+    cursor: pointer;
+    &:hover {
+      color: $red;
+    }
+  }
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8b2561cf..27911478 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,6 +1,7 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
+import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const Status = {
@@ -20,25 +21,18 @@ const Status = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
-    },
-    deleted () { return this.statusoid.deleted },
-    canDelete () { return this.statusoid.user.rights.delete_others_notice || this.statusoid.user.id == this.$store.state.users.currentUser.id }
+    }
   },
   components: {
     Attachment,
     FavoriteButton,
     RetweetButton,
+    DeleteButton,
     PostStatusForm
   },
   methods: {
     toggleReplying () {
       this.replying = !this.replying
-    },
-    deleteStatus () {
-      const confirmed = confirm('Do you really want to delete this status?')
-      if (confirmed) {
-        this.$store.dispatch('deleteStatus', { id: this.status.id })
-      }
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6b9bca5b..42499407 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -52,11 +52,7 @@
             </div>
             <retweet-button :status=status></retweet-button>
             <favorite-button :status=status></favorite-button>
-            <div v-if="canDelete">
-              <a href="#" v-on:click.prevent="deleteStatus">
-                <i class='fa icon-cancel delete-status'></i>
-              </a>
-            </div>
+            <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>
@@ -130,11 +126,4 @@
  .status-el:last-child .status {
      border: none
  }
-
- .icon-cancel,.delete-status {
-   cursor: pointer;
-   &:hover {
-    color: $red;
-   }
- }
 </style>