refs #872 Update favourited toot in all timelines

2019-05-18 22:28:53 +09:00 · 2019-05-18 22:28:53 +09:00 · a97c5feae6
parent 891877519d
commit a97c5feae6
4 changed files with 276 additions and 240 deletions
--- a/src/renderer/components/molecules/Toot.vue
+++ b/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
-            :src="message.account.avatar"
-            :alt="`Avatar of ${message.account.username}`" />
+            <FailoverImg :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 &&
-          msg.application !== null) {
+      if (msg.application !== undefined && 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)
-          .then((account) => {
+        this.$store
+          .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)
-          .then((data) => {
+        this.$store
+          .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)
-          .then((data) => {
+        this.$store
+          .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)
-          .then((data) => {
+        this.$store
+          .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)
-          .then((data) => {
+        this.$store
+          .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(
-        'TimelineSpace/Modals/ImageViewer/openModal',
-        {
+      this.$store.dispatch('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)
-        .then((message) => {
+      this.$store
+        .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;

--- a/src/renderer/store/TimelineSpace.ts
+++ b/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
  }
 }

--- a/src/renderer/store/TimelineSpace/Contents/Notifications.ts
+++ b/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,
-  heading: boolean,
-  notifications: Array<Notification>,
-  unreadNotifications: Array<Notification>,
+  lazyLoading: boolean
+  heading: boolean
+  notifications: 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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+    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 })

    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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
-    return client.get<Array<Notification>>('/notifications', { max_id: lastNotification.id, limit: 30 })
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
+    return client
+      .get<Array<Notification>>('/notifications', { max_id: lastNotification.id, limit: 30 })
      .then(res => {
        commit(MUTATION_TYPES.INSERT_NOTIFICATIONS, res.data)
        return res.data
--- a/src/renderer/store/molecules/Toot.ts
+++ b/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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+    const client = new Mastodon(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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+    const client = new Mastodon(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) => {
-    const client = new Mastodon(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+  addFavourite: async ({ rootState, dispatch }, message: Status) => {
+    const client = new Mastodon(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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+    const client = new Mastodon(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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+    const client = new Mastodon(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(
-      rootState.TimelineSpace.account.accessToken!,
-      rootState.TimelineSpace.account.baseURL + '/api/v1'
-    )
+    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
    return client.post(`/accounts/${account.id}/block`)
  }
 }