From cfb69f4d2e729385bdca1afee11d34a096b0659d Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Wed, 29 May 2019 23:32:16 +0900
Subject: [PATCH] refs #630 Handle delete event for user streaming

---
 .../store/TimelineSpace/Contents/Home.spec.ts |   4 +-
 .../TimelineSpace/Contents/Mentions.spec.ts   | 109 ++++++++++-
 .../Contents/Notifications.spec.ts            | 185 ++++++++++++++++++
 .../TimelineSpace/Contents/Home.vue           | 124 ++++++------
 src/renderer/store/TimelineSpace.ts           |   6 +
 .../store/TimelineSpace/Contents/Home.ts      |   6 +-
 .../store/TimelineSpace/Contents/Mentions.ts  |  50 +++--
 .../TimelineSpace/Contents/Notifications.ts   |  14 ++
 8 files changed, 400 insertions(+), 98 deletions(-)
 create mode 100644 spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts

diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
index 8abb77c5..fba72068 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
@@ -277,7 +277,7 @@ describe('TimelineSpace/Contents/Home', () => {
           }
         })
         it('should be deleted', () => {
-          Home.mutations![MUTATION_TYPES.DELETE_TOOT](state, status1)
+          Home.mutations![MUTATION_TYPES.DELETE_TOOT](state, status1.id)
           expect(state.timeline).toEqual([status2])
         })
       })
@@ -325,7 +325,7 @@ describe('TimelineSpace/Contents/Home', () => {
           }
         })
         it('should be deleted', () => {
-          Home.mutations![MUTATION_TYPES.DELETE_TOOT](state, status1)
+          Home.mutations![MUTATION_TYPES.DELETE_TOOT](state, status1.id)
           expect(state.timeline).toEqual([status2])
         })
       })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
index 628355b5..d696a22d 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
@@ -45,7 +45,7 @@ const account2: Account = {
   bot: false
 }
 
-const status: Status = {
+const status1: Status = {
   id: '1',
   uri: 'http://example.com',
   url: 'http://example.com',
@@ -76,19 +76,81 @@ const status: Status = {
   pinned: null
 }
 
+const status2: Status = {
+  id: '2',
+  uri: 'http://example.com',
+  url: 'http://example.com',
+  account: account1,
+  in_reply_to_id: null,
+  in_reply_to_account_id: null,
+  reblog: null,
+  content: 'hoge',
+  created_at: '2019-03-26T21:40:32',
+  emojis: [],
+  replies_count: 0,
+  reblogs_count: 0,
+  favourites_count: 0,
+  reblogged: null,
+  favourited: null,
+  muted: null,
+  sensitive: false,
+  spoiler_text: '',
+  visibility: 'public',
+  media_attachments: [],
+  mentions: [],
+  tags: [],
+  card: null,
+  application: {
+    name: 'Web'
+  } as Application,
+  language: null,
+  pinned: null
+}
+
+const rebloggedStatus: Status = {
+  id: '3',
+  uri: 'http://example.com',
+  url: 'http://example.com',
+  account: account1,
+  in_reply_to_id: null,
+  in_reply_to_account_id: null,
+  reblog: status2,
+  content: 'hoge',
+  created_at: '2019-03-26T21:40:32',
+  emojis: [],
+  replies_count: 0,
+  reblogs_count: 0,
+  favourites_count: 0,
+  reblogged: null,
+  favourited: null,
+  muted: null,
+  sensitive: false,
+  spoiler_text: '',
+  visibility: 'public',
+  media_attachments: [],
+  mentions: [],
+  tags: [],
+  card: null,
+  application: {
+    name: 'Web'
+  } as Application,
+  language: null,
+  pinned: null
+}
+
 const notification1: Notification = {
   id: '1',
   account: account2,
-  status: status,
-  type: 'favourite',
+  status: status1,
+  type: 'mention',
   created_at: '2019-04-01T17:01:32'
 }
 
 const notification2: Notification = {
   id: '2',
   account: account2,
-  status: status,
-  type: 'reblog',
+  status: rebloggedStatus,
+  type: 'mention',
   created_at: '2019-04-01T17:01:32'
 }
 
@@ -184,13 +246,46 @@ describe('TimelineSpace/Contents/Mentions', () => {
         }
       })
       it('should be updated', () => {
-        const favourited: Status = Object.assign(status, {
+        const favourited: Status = Object.assign(status1, {
           favourited: true
         })
         Mentions.mutations![MUTATION_TYPES.UPDATE_TOOT](state, favourited)
-        expect(state.mentions[0].status!.favourited).toEqual(true)
+        expect(state.mentions[0].status!.favourited).toEqual(null)
         expect(state.mentions[1].status!.favourited).toEqual(true)
       })
     })
+
+    describe('deleteToot', () => {
+      describe('message is not reblogged', () => {
+        beforeEach(() => {
+          state = {
+            lazyLoading: false,
+            heading: true,
+            mentions: [notification2, notification1],
+            unreadMentions: [],
+            filter: ''
+          }
+        })
+        it('should be deleted', () => {
+          Mentions.mutations![MUTATION_TYPES.DELETE_TOOT](state, notification1.status!.id)
+          expect(state.mentions.length).toEqual(1)
+        })
+      })
+      describe('message is reblogged', () => {
+        beforeEach(() => {
+          state = {
+            lazyLoading: false,
+            heading: true,
+            mentions: [notification2, notification1],
+            unreadMentions: [],
+            filter: ''
+          }
+        })
+        it('should be deleted', () => {
+          Mentions.mutations![MUTATION_TYPES.DELETE_TOOT](state, notification2.status!.id)
+          expect(state.mentions.length).toEqual(1)
+        })
+      })
+    })
   })
 })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
new file mode 100644
index 00000000..0cc9d5b6
--- /dev/null
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
@@ -0,0 +1,185 @@
+import { Account, Notification, Status, Application } from 'megalodon'
+import Notifications, { NotificationsState, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Notifications'
+
+const account1: Account = {
+  id: '1',
+  username: 'h3poteto',
+  acct: 'h3poteto@pleroma.io',
+  display_name: 'h3poteto',
+  locked: false,
+  created_at: '2019-03-26T21:30:32',
+  followers_count: 10,
+  following_count: 10,
+  statuses_count: 100,
+  note: 'engineer',
+  url: 'https://pleroma.io',
+  avatar: '',
+  avatar_static: '',
+  header: '',
+  header_static: '',
+  emojis: [],
+  moved: null,
+  fields: null,
+  bot: false
+}
+
+const account2: Account = {
+  id: '2',
+  username: 'h3poteto',
+  acct: 'h3poteto@mstdn.io',
+  display_name: 'h3poteto',
+  locked: false,
+  created_at: '2019-03-26T21:30:32',
+  followers_count: 10,
+  following_count: 10,
+  statuses_count: 100,
+  note: 'engineer',
+  url: 'https://mstdn.io',
+  avatar: '',
+  avatar_static: '',
+  header: '',
+  header_static: '',
+  emojis: [],
+  moved: null,
+  fields: null,
+  bot: false
+}
+
+const status1: Status = {
+  id: '1',
+  uri: 'http://example.com',
+  url: 'http://example.com',
+  account: account1,
+  in_reply_to_id: null,
+  in_reply_to_account_id: null,
+  reblog: null,
+  content: 'hoge',
+  created_at: '2019-03-26T21:40:32',
+  emojis: [],
+  replies_count: 0,
+  reblogs_count: 0,
+  favourites_count: 0,
+  reblogged: null,
+  favourited: null,
+  muted: null,
+  sensitive: false,
+  spoiler_text: '',
+  visibility: 'public',
+  media_attachments: [],
+  mentions: [],
+  tags: [],
+  card: null,
+  application: {
+    name: 'Web'
+  } as Application,
+  language: null,
+  pinned: null
+}
+
+const status2: Status = {
+  id: '2',
+  uri: 'http://example.com',
+  url: 'http://example.com',
+  account: account1,
+  in_reply_to_id: null,
+  in_reply_to_account_id: null,
+  reblog: null,
+  content: 'hoge',
+  created_at: '2019-03-26T21:40:32',
+  emojis: [],
+  replies_count: 0,
+  reblogs_count: 0,
+  favourites_count: 0,
+  reblogged: null,
+  favourited: null,
+  muted: null,
+  sensitive: false,
+  spoiler_text: '',
+  visibility: 'public',
+  media_attachments: [],
+  mentions: [],
+  tags: [],
+  card: null,
+  application: {
+    name: 'Web'
+  } as Application,
+  language: null,
+  pinned: null
+}
+
+const rebloggedStatus: Status = {
+  id: '3',
+  uri: 'http://example.com',
+  url: 'http://example.com',
+  account: account1,
+  in_reply_to_id: null,
+  in_reply_to_account_id: null,
+  reblog: status2,
+  content: 'hoge',
+  created_at: '2019-03-26T21:40:32',
+  emojis: [],
+  replies_count: 0,
+  reblogs_count: 0,
+  favourites_count: 0,
+  reblogged: null,
+  favourited: null,
+  muted: null,
+  sensitive: false,
+  spoiler_text: '',
+  visibility: 'public',
+  media_attachments: [],
+  mentions: [],
+  tags: [],
+  card: null,
+  application: {
+    name: 'Web'
+  } as Application,
+  language: null,
+  pinned: null
+}
+
+const notification1: Notification = {
+  id: '1',
+  account: account2,
+  status: status1,
+  type: 'favourite',
+  created_at: '2019-04-01T17:01:32'
+}
+
+const notification2: Notification = {
+  id: '2',
+  account: account2,
+  status: rebloggedStatus,
+  type: 'mention',
+  created_at: '2019-04-01T17:01:32'
+}
+
+describe('TimelineSpace/Contents/Notifications', () => {
+  describe('mutations', () => {
+    let state: NotificationsState
+
+    describe('deleteToot', () => {
+      beforeEach(() => {
+        state = {
+          lazyLoading: false,
+          heading: true,
+          notifications: [notification2, notification1],
+          unreadNotifications: [],
+          filter: ''
+        }
+      })
+      describe('message is not reblogged', () => {
+        it('should be deleted', () => {
+          Notifications.mutations![MUTATION_TYPES.DELETE_TOOT](state, notification1.status!.id)
+          expect(state.notifications.length).toEqual(1)
+        })
+      })
+      describe('message is reblogged', () => {
+        it('should be deleted', () => {
+          Notifications.mutations![MUTATION_TYPES.DELETE_TOOT](state, notification2.status!.id)
+          expect(state.notifications.length).toEqual(1)
+        })
+      })
+    })
+  })
+})
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 961055f7..80e4e2a8 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -1,32 +1,29 @@
 <template>
-<div id="home" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
-  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-  </div>
-  <transition-group name="timeline" tag="div">
-    <div class="home-timeline" v-for="message in filteredTimeline" :key="message.uri + message.id">
-      <toot
-        :message="message"
-        :filter="filter"
-        :focused="message.uri + message.id === focusedId"
-        :overlaid="modalOpened"
-        v-on:update="updateToot"
-        v-on:delete="deleteToot"
-        @focusNext="focusNext"
-        @focusPrev="focusPrev"
-        @focusRight="focusSidebar"
-        @selectToot="focusToot(message)"
+  <div id="home" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+    <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
+    <transition-group name="timeline" tag="div">
+      <div class="home-timeline" v-for="message in filteredTimeline" :key="message.uri + message.id">
+        <toot
+          :message="message"
+          :filter="filter"
+          :focused="message.uri + message.id === focusedId"
+          :overlaid="modalOpened"
+          v-on:update="updateToot"
+          v-on:delete="deleteToot"
+          @focusNext="focusNext"
+          @focusPrev="focusPrev"
+          @focusRight="focusSidebar"
+          @selectToot="focusToot(message)"
         >
-      </toot>
+        </toot>
+      </div>
+    </transition-group>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+    <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
+      <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
     </div>
-  </transition-group>
-  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
-    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
-    </el-button>
-  </div>
-</div>
 </template>
 
 <script>
@@ -40,7 +37,7 @@ export default {
   name: 'home',
   components: { Toot },
   mixins: [reloadable],
-  data () {
+  data() {
     return {
       focusedId: null
     }
@@ -58,10 +55,8 @@ export default {
       showReblogs: state => state.TimelineSpace.Contents.Home.showReblogs,
       showReplies: state => state.TimelineSpace.Contents.Home.showReplies
     }),
-    ...mapGetters('TimelineSpace/Modals', [
-      'modalOpened'
-    ]),
-    shortcutEnabled: function () {
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    shortcutEnabled: function() {
       if (this.modalOpened) {
         return false
       }
@@ -72,8 +67,8 @@ export default {
       const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
       return currentIndex === -1
     },
-    filteredTimeline () {
-      return this.timeline.filter((toot) => {
+    filteredTimeline() {
+      return this.timeline.filter(toot => {
         if (toot.in_reply_to_id) {
           return this.showReplies
         } else if (toot.reblog) {
@@ -84,27 +79,27 @@ export default {
       })
     }
   },
-  mounted () {
+  mounted() {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
     Event.$on('focus-timeline', () => {
       // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
       const previousFocusedId = this.focusedId
       this.focusedId = 0
-      this.$nextTick(function () {
+      this.$nextTick(function() {
         this.focusedId = previousFocusedId
       })
     })
   },
-  beforeUpdate () {
+  beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     Event.$off('focus-timeline')
   },
-  destroyed () {
+  destroyed() {
     this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
     this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
     this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
@@ -114,15 +109,14 @@ export default {
     }
   },
   watch: {
-    startReload: function (newState, oldState) {
+    startReload: function(newState, oldState) {
       if (!oldState && newState) {
-        this.reload()
-          .finally(() => {
-            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
-          })
+        this.reload().finally(() => {
+          this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+        })
       }
     },
-    focusedId: function (newState, _oldState) {
+    focusedId: function(newState, _oldState) {
       if (newState && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
       } else if (newState === null && !this.heading) {
@@ -132,32 +126,31 @@ export default {
     }
   },
   methods: {
-    onScroll (event) {
+    onScroll(event) {
       // for lazyLoading
-      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
-          .catch(() => {
-            this.$message({
-              message: this.$t('message.timeline_fetch_error'),
-              type: 'error'
-            })
+      if (event.target.clientHeight + event.target.scrollTop >= document.getElementById('home').clientHeight - 10 && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => {
+          this.$message({
+            message: this.$t('message.timeline_fetch_error'),
+            type: 'error'
           })
+        })
       }
       // for unread control
-      if ((event.target.scrollTop > 10) && this.heading) {
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
-      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
       }
     },
-    updateToot (message) {
+    updateToot(message) {
       this.$store.commit('TimelineSpace/Contents/Home/updateToot', message)
     },
-    deleteToot (message) {
-      this.$store.commit('TimelineSpace/Contents/Home/deleteToot', message)
+    deleteToot(message) {
+      this.$store.commit('TimelineSpace/Contents/Home/deleteToot', message.id)
     },
-    async reload () {
+    async reload() {
       this.$store.commit('TimelineSpace/changeLoading', true)
       try {
         await this.reloadable()
@@ -165,14 +158,11 @@ export default {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
     },
-    upper () {
-      scrollTop(
-        document.getElementById('scrollable'),
-        0
-      )
+    upper() {
+      scrollTop(document.getElementById('scrollable'), 0)
       this.focusedId = null
     },
-    focusNext () {
+    focusNext() {
       const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
       if (currentIndex === -1) {
         this.focusedId = this.timeline[0].uri + this.timeline[0].id
@@ -180,7 +170,7 @@ export default {
         this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
       }
     },
-    focusPrev () {
+    focusPrev() {
       const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
       if (currentIndex === 0) {
         this.focusedId = null
@@ -188,13 +178,13 @@ export default {
         this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
       }
     },
-    focusToot (message) {
+    focusToot(message) {
       this.focusedId = message.uri + message.id
     },
-    focusSidebar () {
+    focusSidebar() {
       Event.$emit('focus-sidebar')
     },
-    handleKey (event) {
+    handleKey(event) {
       switch (event.srcKey) {
         case 'next':
           this.focusedId = this.timeline[0].uri + this.timeline[0].id
diff --git a/src/renderer/store/TimelineSpace.ts b/src/renderer/store/TimelineSpace.ts
index 9d402b70..e33f7260 100644
--- a/src/renderer/store/TimelineSpace.ts
+++ b/src/renderer/store/TimelineSpace.ts
@@ -334,6 +334,11 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
       }
       commit('TimelineSpace/SideMenu/changeUnreadMentions', true, { root: true })
     })
+    ipcRenderer.on('delete-start-user-streaming', (_, id: string) => {
+      commit('TimelineSpace/Contents/Home/deleteToot', id, { root: true })
+      commit('TimelineSpace/Contents/Notifications/deleteToot', id, { root: true })
+      commit('TimelineSpace/Contents/Mentions/deleteToot', id, { root: true })
+    })
   },
   startUserStreaming: ({ state }): Promise<{}> => {
     // @ts-ignore
@@ -418,6 +423,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
     ipcRenderer.removeAllListeners('update-start-user-streaming')
     ipcRenderer.removeAllListeners('mention-start-user-streaming')
     ipcRenderer.removeAllListeners('notification-start-user-streaming')
+    ipcRenderer.removeAllListeners('delete-start-user-streaming')
     ipcRenderer.removeAllListeners('error-start-user-streaming')
   },
   stopUserStreaming: () => {
diff --git a/src/renderer/store/TimelineSpace/Contents/Home.ts b/src/renderer/store/TimelineSpace/Contents/Home.ts
index 022d5b8f..575f379d 100644
--- a/src/renderer/store/TimelineSpace/Contents/Home.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Home.ts
@@ -86,12 +86,12 @@ const mutations: MutationTree<HomeState> = {
       }
     })
   },
-  [MUTATION_TYPES.DELETE_TOOT]: (state, message: Status) => {
+  [MUTATION_TYPES.DELETE_TOOT]: (state, messageId: string) => {
     state.timeline = state.timeline.filter(toot => {
-      if (toot.reblog !== null && toot.reblog.id === message.id) {
+      if (toot.reblog !== null && toot.reblog.id === messageId) {
         return false
       } else {
-        return toot.id !== message.id
+        return toot.id !== messageId
       }
     })
   },
diff --git a/src/renderer/store/TimelineSpace/Contents/Mentions.ts b/src/renderer/store/TimelineSpace/Contents/Mentions.ts
index 441b9c97..4adcd34b 100644
--- a/src/renderer/store/TimelineSpace/Contents/Mentions.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Mentions.ts
@@ -3,10 +3,10 @@ import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
 import { RootState } from '@/store'
 
 export interface MentionsState {
-  lazyLoading: boolean,
-  heading: boolean,
-  mentions: Array<Notification>,
-  unreadMentions: Array<Notification>,
+  lazyLoading: boolean
+  heading: boolean
+  mentions: Array<Notification>
+  unreadMentions: Array<Notification>
   filter: string
 }
 
@@ -28,6 +28,7 @@ export const MUTATION_TYPES = {
   ARCHIVE_MENTIONS: 'archiveMentions',
   CLEAR_MENTIONS: 'clearMentions',
   UPDATE_TOOT: 'updateToot',
+  DELETE_TOOT: 'deleteToot',
   CHANGE_FILTER: 'changeFilter'
 }
 
@@ -48,22 +49,22 @@ const mutations: MutationTree<MentionsState> = {
   [MUTATION_TYPES.UPDATE_MENTIONS]: (state, messages: Array<Notification>) => {
     state.mentions = messages
   },
-  [MUTATION_TYPES.MERGE_MENTIONS]: (state) => {
+  [MUTATION_TYPES.MERGE_MENTIONS]: state => {
     state.mentions = state.unreadMentions.slice(0, 80).concat(state.mentions)
     state.unreadMentions = []
   },
   [MUTATION_TYPES.INSERT_MENTIONS]: (state, messages: Array<Notification>) => {
     state.mentions = state.mentions.concat(messages)
   },
-  [MUTATION_TYPES.ARCHIVE_MENTIONS]: (state) => {
+  [MUTATION_TYPES.ARCHIVE_MENTIONS]: state => {
     state.mentions = state.mentions.slice(0, 40)
   },
-  [MUTATION_TYPES.CLEAR_MENTIONS]: (state) => {
+  [MUTATION_TYPES.CLEAR_MENTIONS]: state => {
     state.mentions = []
     state.unreadMentions = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Notification) => {
-    state.mentions = state.mentions.map((mention) => {
+    state.mentions = state.mentions.map(mention => {
       if (mention.status !== null && mention.status.id === message.id) {
         const status = {
           status: message
@@ -74,6 +75,19 @@ const mutations: MutationTree<MentionsState> = {
       }
     })
   },
+  [MUTATION_TYPES.DELETE_TOOT]: (state, id: string) => {
+    state.mentions = state.mentions.filter(mention => {
+      if (mention.status) {
+        if (mention.status.reblog && mention.status.reblog.id === id) {
+          return false
+        } else {
+          return mention.status.id !== id
+        }
+      } else {
+        return true
+      }
+    })
+  },
   [MUTATION_TYPES.CHANGE_FILTER]: (state, filter: string) => {
     state.filter = filter
   }
@@ -81,11 +95,11 @@ const mutations: MutationTree<MentionsState> = {
 
 const actions: ActionTree<MentionsState, RootState> = {
   fetchMentions: async ({ commit, rootState }): Promise<Array<Notification>> => {
-    const client = new Mastodon(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
-    const res: Response<Array<Notification>> = await client.get<Array<Notification>>('/notifications', { limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
+    const res: Response<Array<Notification>> = await client.get<Array<Notification>>('/notifications', {
+      limit: 30,
+      exclude_types: ['follow', 'favourite', 'reblog']
+    })
     commit(MUTATION_TYPES.UPDATE_MENTIONS, res.data)
     return res.data
   },
@@ -94,11 +108,9 @@ const actions: ActionTree<MentionsState, RootState> = {
       return Promise.resolve(null)
     }
     commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
-    const client = new Mastodon(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
-    return client.get<Array<Notification>>('/notifications', { max_id: lastMention.id, limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
+    return client
+      .get<Array<Notification>>('/notifications', { max_id: lastMention.id, limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
       .then(res => {
         commit(MUTATION_TYPES.INSERT_MENTIONS, res.data)
         return res.data
@@ -110,7 +122,7 @@ const actions: ActionTree<MentionsState, RootState> = {
 }
 
 const getters: GetterTree<MentionsState, RootState> = {
-  mentions: (state) => {
+  mentions: state => {
     return state.mentions.filter(mention => mention.type === 'mention')
   }
 }
diff --git a/src/renderer/store/TimelineSpace/Contents/Notifications.ts b/src/renderer/store/TimelineSpace/Contents/Notifications.ts
index 04bf2059..1ba45e80 100644
--- a/src/renderer/store/TimelineSpace/Contents/Notifications.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Notifications.ts
@@ -27,6 +27,7 @@ export const MUTATION_TYPES = {
   MERGE_NOTIFICATIONS: 'mergeNotifications',
   INSERT_NOTIFICATIONS: 'insertNotifications',
   UPDATE_TOOT: 'updateToot',
+  DELETE_TOOT: 'deleteToot',
   CLEAR_NOTIFICATIONS: 'clearNotifications',
   ARCHIVE_NOTIFICATIONS: 'archiveNotifications',
   CHANGE_FILTER: 'changeFilter'
@@ -70,6 +71,19 @@ const mutations: MutationTree<NotificationsState> = {
       }
     })
   },
+  [MUTATION_TYPES.DELETE_TOOT]: (state, id: string) => {
+    state.notifications = state.notifications.filter(notification => {
+      if (notification.status) {
+        if (notification.status.reblog && notification.status.reblog.id === id) {
+          return false
+        } else {
+          return notification.status.id !== id
+        }
+      } else {
+        return true
+      }
+    })
+  },
   [MUTATION_TYPES.CLEAR_NOTIFICATIONS]: state => {
     state.notifications = []
   },