From 931fed93e4502cf5daeb5344939bda49bbbc88d7 Mon Sep 17 00:00:00 2001
From: "L. E. Segovia" <13498015+amyspark@users.noreply.github.com>
Date: Thu, 1 Nov 2018 17:01:04 +0000
Subject: [PATCH] Enable Direct Messages timeline

---
 .../locales/de/translation.missing.json       |   5 +
 src/config/locales/en/translation.json        |   1 +
 .../locales/fr/translation.missing.json       |   5 +
 .../locales/ja/translation.missing.json       |   5 +
 .../locales/ko/translation.missing.json       |   5 +
 .../locales/pl/translation.missing.json       |   5 +
 .../TimelineSpace/Contents/DirectMessages.vue | 242 ++++++++++++++++++
 .../components/TimelineSpace/HeaderMenu.vue   |  12 +
 .../components/TimelineSpace/SideMenu.vue     |   7 +
 src/renderer/router/index.js                  |   5 +
 src/renderer/store/TimelineSpace/Contents.js  |   2 +
 .../TimelineSpace/Contents/DirectMessages.js  | 111 ++++++++
 .../store/TimelineSpace/Modals/Jump.js        |   4 +
 src/renderer/store/TimelineSpace/SideMenu.js  |   5 +
 14 files changed, 414 insertions(+)
 create mode 100644 src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
 create mode 100644 src/renderer/store/TimelineSpace/Contents/DirectMessages.js

diff --git a/src/config/locales/de/translation.missing.json b/src/config/locales/de/translation.missing.json
index e69de29b..d99b79c3 100644
--- a/src/config/locales/de/translation.missing.json
+++ b/src/config/locales/de/translation.missing.json
@@ -0,0 +1,5 @@
+{
+  "side_menu": {
+    "direct": "Direct messages"
+  }
+}
\ No newline at end of file
diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index eaa35367..afb61b17 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -47,6 +47,7 @@
     "expand": "Expand",
     "home": "Home",
     "notification": "Notification",
+    "direct": "Direct messages",
     "favourite": "Favourite",
     "local": "Local timeline",
     "public": "Public timeline",
diff --git a/src/config/locales/fr/translation.missing.json b/src/config/locales/fr/translation.missing.json
index e69de29b..d99b79c3 100644
--- a/src/config/locales/fr/translation.missing.json
+++ b/src/config/locales/fr/translation.missing.json
@@ -0,0 +1,5 @@
+{
+  "side_menu": {
+    "direct": "Direct messages"
+  }
+}
\ No newline at end of file
diff --git a/src/config/locales/ja/translation.missing.json b/src/config/locales/ja/translation.missing.json
index e69de29b..d99b79c3 100644
--- a/src/config/locales/ja/translation.missing.json
+++ b/src/config/locales/ja/translation.missing.json
@@ -0,0 +1,5 @@
+{
+  "side_menu": {
+    "direct": "Direct messages"
+  }
+}
\ No newline at end of file
diff --git a/src/config/locales/ko/translation.missing.json b/src/config/locales/ko/translation.missing.json
index e69de29b..d99b79c3 100644
--- a/src/config/locales/ko/translation.missing.json
+++ b/src/config/locales/ko/translation.missing.json
@@ -0,0 +1,5 @@
+{
+  "side_menu": {
+    "direct": "Direct messages"
+  }
+}
\ No newline at end of file
diff --git a/src/config/locales/pl/translation.missing.json b/src/config/locales/pl/translation.missing.json
index e69de29b..d99b79c3 100644
--- a/src/config/locales/pl/translation.missing.json
+++ b/src/config/locales/pl/translation.missing.json
@@ -0,0 +1,5 @@
+{
+  "side_menu": {
+    "direct": "Direct messages"
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
new file mode 100644
index 00000000..5480093d
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -0,0 +1,242 @@
+<template>
+<div id="directmessages" 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">
+    <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"
+      @selectToot="focusToot(message)"
+      v-for="message in timeline"
+      :key="message.uri + message.id"
+      >
+    </toot>
+  </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>
+import { mapState, mapGetters } from 'vuex'
+import Toot from './Cards/Toot'
+import scrollTop from '../../utils/scroll'
+
+export default {
+  name: 'directmessages',
+  components: { Toot },
+  data () {
+    return {
+      focusedId: null
+    }
+  },
+  computed: {
+    ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
+      backgroundColor: state => state.App.theme.background_color,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload,
+      timeline: state => state.TimelineSpace.Contents.DirectMessages.timeline,
+      lazyLoading: state => state.TimelineSpace.Contents.DirectMessages.lazyLoading,
+      heading: state => state.TimelineSpace.Contents.DirectMessages.heading,
+      unread: state => state.TimelineSpace.Contents.DirectMessages.unreadTimeline,
+      filter: state => state.TimelineSpace.Contents.DirectMessages.filter
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      if (this.modalOpened) {
+        return false
+      }
+      if (!this.focusedId) {
+        return true
+      }
+      // Sometimes toots are deleted, so perhaps focused toot don't exist.
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
+      return currentIndex === -1
+    }
+  },
+  mounted () {
+    this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
+  },
+  beforeUpdate () {
+    if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
+      this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
+    }
+  },
+  destroyed () {
+    this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
+    this.$store.commit('TimelineSpace/Contents/DirectMessages/archiveTimeline')
+    if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
+      document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
+    }
+  },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    },
+    focusedId: function (newState, oldState) {
+      if (newState && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
+      }
+    }
+  },
+  methods: {
+    onScroll (event) {
+      // for lazyLoading
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('directmessages').clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Contents/DirectMessages/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) {
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
+      }
+    },
+    updateToot (message) {
+      this.$store.commit('TimelineSpace/Contents/DirectMessages/updateToot', message)
+    },
+    deleteToot (message) {
+      this.$store.commit('TimelineSpace/Contents/DirectMessages/deleteToot', message)
+    },
+    async reload () {
+      this.$store.commit('TimelineSpace/changeLoading', true)
+      try {
+        const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
+          this.$message({
+            message: this.$t('message.account_load_error'),
+            type: 'error'
+          })
+          throw err
+        })
+        await this.$store.dispatch('TimelineSpace/stopUserStreaming')
+        await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
+
+        await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline', account)
+          .catch(() => {
+            this.$message({
+              message: this.$t('message.timeline_fetch_error'),
+              type: 'error'
+            })
+          })
+        await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
+
+        this.$store.dispatch('TimelineSpace/startUserStreaming', account)
+          .catch(() => {
+            this.$message({
+              message: this.$t('message.start_streaming_error'),
+              type: 'error'
+            })
+          })
+        this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
+      } finally {
+        this.$store.commit('TimelineSpace/changeLoading', false)
+      }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
+      this.focusedId = null
+    },
+    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
+      } else if (currentIndex < this.timeline.length) {
+        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
+      if (currentIndex === 0) {
+        this.focusedId = null
+      } else if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri + message.id
+    },
+    handleKey (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.focusedId = this.timeline[0].uri + this.timeline[0].id
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#directmessages {
+  .unread {
+    position: fixed;
+    right: 24px;
+    top: 48px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #ffffff;
+    padding: 4px 8px;
+    border-radius: 0 0 2px 2px;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
+
+  .loading-card:empty {
+    height: 0;
+  }
+
+  .upper {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    transition: all 0.5s;
+  }
+
+  .upper-with-side-bar {
+    position: fixed;
+    bottom: 20px;
+    right: -webkit-calc(20px + 320px);
+    transition: all 0.5s;
+  }
+}
+</style>
+<style src="@/assets/timeline-transition.scss"></style>
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index 26dcb7ae..c3763d51 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -96,6 +96,9 @@ export default {
         case 'lists':
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.lists'))
           break
+        case 'direct-messages':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Direct Messages')
+          break
         case 'edit-list':
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.members'))
           break
@@ -120,6 +123,7 @@ export default {
         case 'public':
         case 'tag':
         case 'list':
+        case 'direct-messages':
           this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
           break
         default:
@@ -135,6 +139,7 @@ export default {
         case 'public':
         case 'tag':
         case 'list':
+        case 'direct-messages':
           return true
         default:
           return false
@@ -163,6 +168,9 @@ export default {
         case 'list':
           this.filter = this.$store.state.TimelineSpace.Contents.Lists.Show.filter
           break
+        case 'direct-messages':
+          this.filter = this.$store.state.TimelineSpace.Contents.DirectMessages.filter
+          break
         default:
           console.log('Not implemented')
       }
@@ -190,6 +198,9 @@ export default {
         case 'list':
           this.$store.commit('TimelineSpace/Contents/Lists/Show/changeFilter', filter)
           break
+        case 'direct-messages':
+          this.$store.commit('TimelineSpace/Contents/DirectMessages/changeFilter', filter)
+          break
         default:
           console.log('Not implemented')
       }
@@ -204,6 +215,7 @@ export default {
         case 'public':
         case 'tag':
         case 'list':
+        case 'direct-messages':
           return true
         default:
           return false
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index 31cca14c..43e9facc 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -53,6 +53,12 @@
         <icon name="star"></icon>
         <span>{{ $t("side_menu.favourite") }}</span>
       </el-menu-item>
+      <el-menu-item :index="`/${id()}/direct-messages`" role="menuitem">
+        <icon name="envelope"></icon>
+        <span>{{ $t("side_menu.direct") }}</span>
+        <el-badge is-dot :hidden="!unreadDirectMessagesTimeline">
+        </el-badge>
+      </el-menu-item>
       <el-menu-item :index="`/${id()}/local`" role="menuitem" :title="$t('side_menu.local')">
         <icon name="users"></icon>
         <span>{{ $t("side_menu.local") }}</span>
@@ -108,6 +114,7 @@ export default {
       unreadHomeTimeline: state => state.unreadHomeTimeline,
       unreadNotifications: state => state.unreadNotifications,
       unreadLocalTimeline: state => state.unreadLocalTimeline,
+      unreadDirectMessagesTimeline: state => state.unreadDirectMessagesTimeline,
       lists: state => state.lists,
       tags: state => state.tags,
       collapse: state => state.collapse
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index 35681f9e..6c7b4d4c 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -115,6 +115,11 @@ export default new Router({
               name: 'search',
               component: require('@/components/TimelineSpace/Contents/Search').default
             },
+            {
+              path: 'direct-messages',
+              name: 'direct-messages',
+              component: require('@/components/TimelineSpace/Contents/DirectMessages').default
+            },
             {
               path: 'lists',
               name: 'lists',
diff --git a/src/renderer/store/TimelineSpace/Contents.js b/src/renderer/store/TimelineSpace/Contents.js
index 7c25e7a4..c76dbc34 100644
--- a/src/renderer/store/TimelineSpace/Contents.js
+++ b/src/renderer/store/TimelineSpace/Contents.js
@@ -8,6 +8,7 @@ import Search from './Contents/Search'
 import Lists from './Contents/Lists'
 import Cards from './Contents/Cards'
 import Hashtag from './Contents/Hashtag'
+import DirectMessages from './Contents/DirectMessages'
 
 const Contents = {
   namespaced: true,
@@ -17,6 +18,7 @@ const Contents = {
     Notifications,
     Favourites,
     Local,
+    DirectMessages,
     Public,
     Search,
     Lists,
diff --git a/src/renderer/store/TimelineSpace/Contents/DirectMessages.js b/src/renderer/store/TimelineSpace/Contents/DirectMessages.js
new file mode 100644
index 00000000..829d65b8
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Contents/DirectMessages.js
@@ -0,0 +1,111 @@
+import Mastodon from 'megalodon'
+
+const DirectMessages = {
+  namespaced: true,
+  state: {
+    lazyLoading: false,
+    heading: true,
+    timeline: [],
+    unreadTimeline: [],
+    filter: ''
+  },
+  mutations: {
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
+    },
+    changeHeading (state, value) {
+      state.heading = value
+    },
+    appendTimeline (state, update) {
+      if (state.heading) {
+        state.timeline = [update].concat(state.timeline)
+      } else {
+        state.unreadTimeline = [update].concat(state.unreadTimeline)
+      }
+    },
+    updateTimeline (state, messages) {
+      state.timeline = messages
+    },
+    mergeTimeline (state) {
+      state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
+      state.unreadTimeline = []
+    },
+    insertTimeline (state, messages) {
+      state.timeline = state.timeline.concat(messages)
+    },
+    archiveTimeline (state) {
+      state.timeline = state.timeline.slice(0, 40)
+    },
+    clearTimeline (state) {
+      state.timeline = []
+      state.unreadTimeline = []
+    },
+    updateToot (state, message) {
+      // Replace target message in DirectMessagesTimeline and notifications
+      state.timeline = state.timeline.map((toot) => {
+        if (toot.id === message.id) {
+          return message
+        } else if (toot.reblog !== null && toot.reblog.id === message.id) {
+          // When user reblog/favourite a reblogged toot, target message is a original toot.
+          // So, a message which is received now is original toot.
+          const reblog = {
+            reblog: message
+          }
+          return Object.assign(toot, reblog)
+        } else {
+          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
+        }
+      })
+    },
+    changeFilter (state, filter) {
+      state.filter = filter
+    }
+  },
+  actions: {
+    fetchTimeline ({ state, commit, rootState }, account) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/timelines/direct', { limit: 40 })
+        .then(res => {
+          commit('updateTimeline', res.data)
+          return res.data
+        })
+    },
+    lazyFetchTimeline ({ state, commit, rootState }, last) {
+      if (last === undefined || last === null) {
+        return Promise.resolve(null)
+      }
+      if (state.lazyLoading) {
+        return Promise.resolve(null)
+      }
+      commit('changeLazyLoading', true)
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/timelines/direct', { max_id: last.id, limit: 40 })
+        .then(res => {
+          commit('changeLazyLoading', false)
+          commit('insertTimeline', res.data)
+          return res.data
+        })
+        .catch(err => {
+          commit('changeLazyLoading', false)
+          throw err
+        })
+    }
+  }
+}
+
+export default DirectMessages
diff --git a/src/renderer/store/TimelineSpace/Modals/Jump.js b/src/renderer/store/TimelineSpace/Modals/Jump.js
index ff103a42..214acc54 100644
--- a/src/renderer/store/TimelineSpace/Modals/Jump.js
+++ b/src/renderer/store/TimelineSpace/Modals/Jump.js
@@ -34,6 +34,10 @@ const Jump = {
       {
         name: i18n.t('side_menu.search'),
         path: 'search'
+      },
+      {
+        name: i18n.t('side_menu.direct'),
+        path: 'direct-messages'
       }
     ],
     listChannelList: [],
diff --git a/src/renderer/store/TimelineSpace/SideMenu.js b/src/renderer/store/TimelineSpace/SideMenu.js
index 85b8ec43..4a5d13f2 100644
--- a/src/renderer/store/TimelineSpace/SideMenu.js
+++ b/src/renderer/store/TimelineSpace/SideMenu.js
@@ -7,6 +7,7 @@ const SideMenu = {
     unreadHomeTimeline: false,
     unreadNotifications: false,
     unreadLocalTimeline: false,
+    unreadDirectMessagesTimeline: false,
     lists: [],
     tags: [],
     collapse: false
@@ -21,6 +22,9 @@ const SideMenu = {
     changeUnreadLocalTimeline (state, value) {
       state.unreadLocalTimeline = value
     },
+    changeUnreadDirectMessagesTimeline (state, value) {
+      state.unreadDirectMessagesTimeline = value
+    },
     updateLists (state, lists) {
       state.lists = lists
     },
@@ -48,6 +52,7 @@ const SideMenu = {
       commit('changeUnreadHomeTimeline', false)
       commit('changeUnreadNotifications', false)
       commit('changeUnreadLocalTimeline', false)
+      commit('changeUnreadDirectMessagesTimeline', false)
     },
     changeCollapse ({ commit }, value) {
       commit('changeCollapse', value)