refs #872 Update favourited toot in all timelines

src/renderer/components/molecules/Toot.vue

@@ -2,7 +2,23 @@
   <div
     class="status"
     tabIndex="0"
-  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p'], image: ['i'], cw: ['x']} : {}"
+    v-shortkey="
+      shortcutEnabled
+        ? {
+            next: ['j'],
+            prev: ['k'],
+            right: ['l'],
+            left: ['h'],
+            reply: ['r'],
+            boost: ['b'],
+            fav: ['f'],
+            open: ['o'],
+            profile: ['p'],
+            image: ['i'],
+            cw: ['x']
+          }
+        : {}
+    "
     @shortkey="handleTootControl"
     ref="status"
     @click="$emit('selectToot')"
@@ -50,7 +66,13 @@
             {{ $t('cards.toot.sensitive') }}
           </el-button>
           <div v-show="isShowAttachments">
-          <el-button v-show="sensitive && isShowAttachments" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
+            <el-button
+              v-show="sensitive && isShowAttachments"
+              class="hide-sensitive"
+              type="text"
+              @click="showAttachments = false"
+              :title="$t('cards.toot.hide')"
+            >
               <icon name="eye" class="hide"></icon>
             </el-button>
             <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
@@ -64,11 +86,14 @@
         <div class="reblogger" v-show="message.reblog !== null">
           <icon name="retweet"></icon>
           <span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
-          <FailoverImg
+            <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
-            :src="message.account.avatar"
-            :alt="`Avatar of ${message.account.username}`" />
           </span>
-        <span class="reblogger-name" @click="openUser(message.account)" :title="`Reblogged by ${message.account.username}`" :aria-label="`Reblogged by ${message.account.username}`">
+          <span
+            class="reblogger-name"
+            @click="openUser(message.account)"
+            :title="`Reblogged by ${message.account.username}`"
+            :aria-label="`Reblogged by ${message.account.username}`"
+          >
             <bdi v-html="username(message.account)"></bdi>
           </span>
         </div>
@@ -82,13 +107,25 @@
           <el-button v-show="directed" type="text" class="directed">
             <icon name="envelope" scale="0.9"></icon>
           </el-button>
-        <el-button v-show="!locked&&!directed" type="text" @click="changeReblog(originalMessage)" :class="originalMessage.reblogged ? 'reblogged' : 'reblog'" :title="$t('cards.toot.reblog')">
+          <el-button
+            v-show="!locked && !directed"
+            type="text"
+            @click="changeReblog(originalMessage)"
+            :class="originalMessage.reblogged ? 'reblogged' : 'reblog'"
+            :title="$t('cards.toot.reblog')"
+          >
             <icon name="retweet" scale="0.9"></icon>
           </el-button>
           <span class="count">
             {{ reblogsCount }}
           </span>
-        <el-button type="text" @click="changeFavourite(originalMessage)" :class="originalMessage.favourited ? 'favourited animated bounceIn' : 'favourite'" :title="$t('cards.toot.fav')" :aria-label="$t('cards.toot.fav')">
+          <el-button
+            type="text"
+            @click="changeFavourite(originalMessage)"
+            :class="originalMessage.favourited ? 'favourited animated bounceIn' : 'favourite'"
+            :title="$t('cards.toot.fav')"
+            :aria-label="$t('cards.toot.fav')"
+          >
             <icon name="star" scale="0.9"></icon>
           </el-button>
           <span class="count">
@@ -227,8 +264,7 @@ export default {
     },
     application: function() {
       let msg = this.originalMessage
-      if (msg.application !== undefined &&
+      if (msg.application !== undefined && msg.application !== null) {
-          msg.application !== null) {
         return msg.application.name
       }
       return null
@@ -326,12 +362,13 @@ export default {
       const parsedAccount = findAccount(e.target, 'toot')
       if (parsedAccount !== null) {
         this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
-        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
+        this.$store
-          .then((account) => {
+          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
+          .then(account => {
             this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
             this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
           })
-          .catch((err) => {
+          .catch(err => {
             console.error(err)
             this.openLink(e)
             this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
@@ -378,22 +415,26 @@ export default {
     },
     changeReblog(message) {
       if (message.reblogged) {
-        this.$store.dispatch('molecules/Toot/unreblog', message)
+        this.$store
-          .then((data) => {
+          .dispatch('molecules/Toot/unreblog', message)
+          .then(data => {
             this.$emit('update', data)
           })
-          .catch(() => {
+          .catch(err => {
+            console.error(err)
             this.$message({
               message: this.$t('message.unreblog_error'),
               type: 'error'
             })
           })
       } else {
-        this.$store.dispatch('molecules/Toot/reblog', message)
+        this.$store
-          .then((data) => {
+          .dispatch('molecules/Toot/reblog', message)
+          .then(data => {
             this.$emit('update', data)
           })
-          .catch(() => {
+          .catch(err => {
+            console.error(err)
             this.$message({
               message: this.$t('message.reblog_error'),
               type: 'error'
@@ -403,22 +444,26 @@ export default {
     },
     changeFavourite(message) {
       if (message.favourited) {
-        this.$store.dispatch('molecules/Toot/removeFavourite', message)
+        this.$store
-          .then((data) => {
+          .dispatch('molecules/Toot/removeFavourite', message)
+          .then(data => {
             this.$emit('update', data)
           })
-          .catch(() => {
+          .catche(err => {
+            console.error(err)
             this.$message({
               message: this.$t('message.unfavourite_error'),
               type: 'error'
             })
           })
       } else {
-        this.$store.dispatch('molecules/Toot/addFavourite', message)
+        this.$store
-          .then((data) => {
+          .dispatch('molecules/Toot/addFavourite', message)
+          .then(data => {
             this.$emit('update', data)
           })
-          .catch(() => {
+          .catch(err => {
+            console.error(err)
             this.$message({
               message: this.$t('message.favourite_error'),
               type: 'error'
@@ -427,13 +472,11 @@ export default {
       }
     },
     openImage(url, rawMediaList) {
-      const mediaList = rawMediaList.map((media) => {
+      const mediaList = rawMediaList.map(media => {
         return media.url
       })
       const currentIndex = mediaList.indexOf(url)
-      this.$store.dispatch(
+      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', {
-        'TimelineSpace/Modals/ImageViewer/openModal',
-        {
         currentIndex: currentIndex,
         mediaList: rawMediaList
       })
@@ -444,8 +487,9 @@ export default {
       this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
     },
     deleteToot(message) {
-      this.$store.dispatch('molecules/Toot/deleteToot', message)
+      this.$store
-        .then((message) => {
+        .dispatch('molecules/Toot/deleteToot', message)
+        .then(message => {
           this.$emit('delete', message)
         })
         .catch(() => {
@@ -510,7 +554,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .toot {
   padding: 8px 0 0 16px;
 

src/renderer/store/TimelineSpace.ts

@@ -441,6 +441,21 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
   },
   stopDirectMessagesStreaming: () => {
     ipcRenderer.send('stop-directmessages-streaming')
+  },
+  addFavouriteToot: ({ commit, state }, status: Status): boolean => {
+    commit('TimelineSpace/Contents/Home/updateToot', status, { root: true })
+    commit('TimelineSpace/Contents/Notifications/updateToot', status, { root: true })
+    commit('TimelineSpace/Contents/Mentions/updateToot', status, { root: true })
+    if (state.unreadNotification.direct) {
+      commit('TimelineSpace/Contents/DirectMessages/updateToot', status, { root: true })
+    }
+    if (state.unreadNotification.local) {
+      commit('TimelineSpace/Contents/Local/updateToot', state, { root: true })
+    }
+    if (state.unreadNotification.public) {
+      commit('TimelineSpace/Contents/Public/updateToot', state, { root: true })
+    }
+    return true
   }
 }
 

src/renderer/store/TimelineSpace/Contents/Notifications.ts

@@ -4,10 +4,10 @@ import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 
 export interface NotificationsState {
-  lazyLoading: boolean,
+  lazyLoading: boolean
-  heading: boolean,
+  heading: boolean
-  notifications: Array<Notification>,
+  notifications: Array<Notification>
-  unreadNotifications: Array<Notification>,
+  unreadNotifications: Array<Notification>
   filter: string
 }
 
@@ -49,7 +49,7 @@ const mutations: MutationTree<NotificationsState> = {
   [MUTATION_TYPES.UPDATE_NOTIFICATIONS]: (state, notifications: Array<Notification>) => {
     state.notifications = notifications
   },
-  [MUTATION_TYPES.MERGE_NOTIFICATIONS]: (state) => {
+  [MUTATION_TYPES.MERGE_NOTIFICATIONS]: state => {
     state.notifications = state.unreadNotifications.slice(0, 80).concat(state.notifications)
     state.unreadNotifications = []
   },
@@ -57,10 +57,10 @@ const mutations: MutationTree<NotificationsState> = {
     state.notifications = state.notifications.concat(notifications)
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Status) => {
-    state.notifications = state.notifications.map((notification) => {
+    state.notifications = state.notifications.map(notification => {
       // I want to update toot only mention.
       // Because Toot component don't use status information when other patterns.
-      if (notification.status !== null && notification.status.id === message.id) {
+      if (notification.type === 'mention' && notification.status && notification.status.id === message.id) {
         const status = {
           status: message
         }
@@ -70,10 +70,10 @@ const mutations: MutationTree<NotificationsState> = {
       }
     })
   },
-  [MUTATION_TYPES.CLEAR_NOTIFICATIONS]: (state) => {
+  [MUTATION_TYPES.CLEAR_NOTIFICATIONS]: state => {
     state.notifications = []
   },
-  [MUTATION_TYPES.ARCHIVE_NOTIFICATIONS]: (state) => {
+  [MUTATION_TYPES.ARCHIVE_NOTIFICATIONS]: state => {
     state.notifications = state.notifications.slice(0, 30)
   },
   [MUTATION_TYPES.CHANGE_FILTER]: (state, filter: string) => {
@@ -83,10 +83,7 @@ const mutations: MutationTree<NotificationsState> = {
 
 const actions: ActionTree<NotificationsState, RootState> = {
   fetchNotifications: async ({ commit, rootState }): Promise<Array<Notification>> => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     const res: Response<Array<Notification>> = await client.get<Array<Notification>>('/notifications', { limit: 30 })
 
     commit(MUTATION_TYPES.UPDATE_NOTIFICATIONS, res.data)
@@ -97,11 +94,9 @@ const actions: ActionTree<NotificationsState, RootState> = {
       return Promise.resolve(null)
     }
     commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
+    return client
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
+      .get<Array<Notification>>('/notifications', { max_id: lastNotification.id, limit: 30 })
-    )
-    return client.get<Array<Notification>>('/notifications', { max_id: lastNotification.id, limit: 30 })
       .then(res => {
         commit(MUTATION_TYPES.INSERT_NOTIFICATIONS, res.data)
         return res.data

src/renderer/store/molecules/Toot.ts

@@ -9,10 +9,7 @@ const state = (): TootState => ({})
 
 const actions: ActionTree<TootState, RootState> = {
   reblog: async ({ rootState }, message: Status) => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     const res: Response<Status> = await client.post<Status>(`/statuses/${message.id}/reblog`)
     // API returns new status when reblog.
     // Reblog target status is in the data.reblog.
@@ -21,43 +18,29 @@ const actions: ActionTree<TootState, RootState> = {
     return res.data.reblog
   },
   unreblog: async ({ rootState }, message: Status) => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     const res: Response<Status> = await client.post<Status>(`/statuses/${message.id}/unreblog`)
     return res.data
   },
-  addFavourite: async ({ rootState }, message: Status) => {
+  addFavourite: async ({ rootState, dispatch }, message: Status) => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     const res: Response<Status> = await client.post<Status>(`/statuses/${message.id}/favourite`)
     ipcRenderer.send('fav-rt-action-sound')
+    dispatch('TimelineSpace/addFavouriteToot', res.data, { root: true })
     return res.data
   },
   removeFavourite: async ({ rootState }, message: Status) => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     const res: Response<Status> = await client.post<Status>(`/statuses/${message.id}/unfavourite`)
     return res.data
   },
   deleteToot: async ({ rootState }, message: Status) => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     await client.del(`/statuses/${message.id}`)
     return message
   },
   block: async ({ rootState }, account: Account) => {
-    const client = new Mastodon(
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
     return client.post(`/accounts/${account.id}/block`)
   }
 }