Merge pull request #279 from h3poteto/iss-254

closes #254 Add toot delete button

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -57,9 +57,11 @@
               <li role="button" @click="copyLink(message)">
                 Copy Link to Toot
               </li>
+              <li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage(message)">
+                Delete
+              </li>
             </ul>
           </div>
-
           <el-button slot="reference" type="text">
             <icon name="ellipsis-h" scale="0.9"></icon>
           </el-button>
@@ -151,7 +153,7 @@ export default {
           })
           .catch(() => {
             this.$message({
-              message: 'Faild to unreblog',
+              message: 'Failed to unreblog',
               type: 'error'
             })
           })
@@ -162,7 +164,7 @@ export default {
           })
           .catch(() => {
             this.$message({
-              message: 'Faild to reblog',
+              message: 'Failed to reblog',
               type: 'error'
             })
           })
@@ -224,6 +226,21 @@ export default {
         return this.originalMessage(message).favourites_count
       }
       return ''
+    },
+    isMyMessage (message) {
+      return this.$store.state.TimelineSpace.account.accountId === this.originalMessage(message).account.id
+    },
+    deleteToot (message) {
+      this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/deleteToot', message)
+        .then((message) => {
+          this.$emit('delete', message)
+        })
+        .catch(() => {
+          this.$message({
+            message: 'Failed to delete the toot',
+            type: 'error'
+          })
+        })
     }
   }
 }
@@ -350,10 +367,9 @@ function findLink (target) {
       }
 
       .toot-menu {
-        padding-right: 8px;
-
         .menu-list {
           padding: 0;
+          margin: 4px 0;
           font-size: 0.8em;
           list-style-type: none;
           line-height: 20px;
@@ -362,13 +378,19 @@ function findLink (target) {
 
           li {
             box-sizing: border-box;
-            padding-left: 0.5em;
+            margin: 0;
-            padding-bottom: 0.5em;
+            padding: 0 1.1em 0.5em;
 
             &:hover {
               background-color: #f2f6fc;
               cursor: pointer;
             }
+
+            &.separate {
+              border-top: 1px solid var(--theme-border-color);
+              padding-top: 4px;
+              margin-top: 2px;
+            }
           }
         }
       }

src/renderer/components/TimelineSpace/Contents/Favourites.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="favourites">
     <div class="fav" v-for="message in favourites" v-bind:key="message.id">
-      <toot :message="message" v-on:update="updateToot"></toot>
+      <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
     </div>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
@@ -56,6 +56,9 @@ export default {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
     },
+    deleteToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Favourites/deleteToot', message)
+    },
     onScroll (event) {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -3,7 +3,7 @@
     <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <transition-group name="timeline" tag="div">
       <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
-        <toot :message="message" :key="message.id" v-on:update="updateToot"></toot>
+        <toot :message="message" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
       </div>
     </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -67,6 +67,9 @@ export default {
     },
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Home/updateToot', message)
+    },
+    deleteToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Home/deleteToot', message)
     }
   }
 }

src/renderer/components/TimelineSpace/Contents/Lists.vue

@@ -3,7 +3,7 @@
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <transition-group name="timeline" tag="div">
     <div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
-      <toot :message="message" v-on:update="updateToot"></toot>
+      <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
@@ -90,6 +90,9 @@ export default {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Lists/updateToot', message)
     },
+    deleteToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Lists/deleteToot', message)
+    },
     onScroll (event) {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('lists')[0].clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Lists/lazyFetchTimeline', {

src/renderer/components/TimelineSpace/Contents/Local.vue

@@ -3,7 +3,7 @@
     <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <transition-group name="timeline" tag="div">
       <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
-        <toot :message="message" v-on:update="updateToot"></toot>
+        <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
       </div>
     </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -77,6 +77,9 @@ export default {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
     },
+    deleteToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Local/deleteToot', message)
+    },
     onScroll (event) {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -3,7 +3,7 @@
     <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <transition-group name="timeline" tag="div">
       <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
-        <toot :message="message" v-on:update="updateToot"></toot>
+        <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
       </div>
     </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -77,6 +77,9 @@ export default {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
     },
+    deleteToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Public/deleteToot', message)
+    },
     onScroll (event) {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])

src/renderer/store/TimelineSpace/Contents/Cards/Toot.js

@@ -66,6 +66,20 @@ const Toot = {
           resolve(data)
         })
       })
+    },
+    deleteToot ({ state, commit, rootState }, message) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          }
+        )
+        client.delete(`/statuses/${message.id}`, {}, (err, data, res) => {
+          if (err) return reject(err)
+          resolve(message)
+        })
+      })
     }
   }
 }

src/renderer/store/TimelineSpace/Contents/Favourites.js

@@ -29,6 +29,15 @@ const Favourites = {
         }
       })
     },
+    deleteToot (state, message) {
+      state.timeline = state.timeline.filter((toot) => {
+        if (toot.reblog !== null && toot.reblog.id === message.id) {
+          return false
+        } else {
+          return toot.id !== message.id
+        }
+      })
+    },
     changeLazyLoading (state, value) {
       state.lazyLoading = value
     }

src/renderer/store/TimelineSpace/Contents/Home.js

@@ -55,6 +55,15 @@ const Home = {
           return toot
         }
       })
+    },
+    deleteToot (state, message) {
+      state.timeline = state.timeline.filter((toot) => {
+        if (toot.reblog !== null && toot.reblog.id === message.id) {
+          return false
+        } else {
+          return toot.id !== message.id
+        }
+      })
     }
   },
   actions: {

src/renderer/store/TimelineSpace/Contents/Lists.js

@@ -53,6 +53,15 @@ const Lists = {
         }
       })
     },
+    deleteToot (state, message) {
+      state.timeline = state.timeline.filter((toot) => {
+        if (toot.reblog !== null && toot.reblog.id === message.id) {
+          return false
+        } else {
+          return toot.id !== message.id
+        }
+      })
+    },
     changeLazyLoading (state, value) {
       state.lazyLoading = value
     }

src/renderer/store/TimelineSpace/Contents/Local.js

@@ -53,6 +53,15 @@ const Local = {
         }
       })
     },
+    deleteToot (state, message) {
+      state.timeline = state.timeline.filter((toot) => {
+        if (toot.reblog !== null && toot.reblog.id === message.id) {
+          return false
+        } else {
+          return toot.id !== message.id
+        }
+      })
+    },
     changeLazyLoading (state, value) {
       state.lazyLoading = value
     }

src/renderer/store/TimelineSpace/Contents/Public.js

@@ -53,6 +53,15 @@ const Public = {
         }
       })
     },
+    deleteToot (state, message) {
+      state.timeline = state.timeline.filter((toot) => {
+        if (toot.reblog !== null && toot.reblog.id === message.id) {
+          return false
+        } else {
+          return toot.id !== message.id
+        }
+      })
+    },
     changeLazyLoading (state, value) {
       state.lazyLoading = value
     }