refs #1804 Add posts and replies column under account timeline

package.json

@@ -181,7 +181,7 @@
     "emojilib": "^2.4.0",
     "i18next": "^19.6.3",
     "lodash": "^4.17.20",
-    "megalodon": "3.3.0",
+    "megalodon": "3.3.1",
     "moment": "^2.28.0",
     "mousetrap": "^1.6.5",
     "nedb": "^1.8.0",

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue

@@ -2,7 +2,7 @@
   <div class="tabs">
     <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
       <el-tab-pane label="Posts" name="posts"><Posts :account="account" /></el-tab-pane>
-      <el-tab-pane label="Posts and replies" name="posts_and_replies">Posts and replies</el-tab-pane>
+      <el-tab-pane label="Posts and replies" name="posts_and_replies"><PostsAndReplies :account="account" /></el-tab-pane>
       <el-tab-pane label="Media" name="media">Media</el-tab-pane>
     </el-tabs>
   </div>
@@ -10,12 +10,14 @@
 
 <script>
 import Posts from './Timeline/Posts'
+import PostsAndReplies from './Timeline/PostsAndReplies'
 
 export default {
   name: 'timeline',
   props: ['account'],
   components: {
-    Posts
+    Posts,
+    PostsAndReplies
   },
   data() {
     return {

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="timeline">
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
+      <template v-slot="{ item, index, active }">
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
+          <toot
+            :message="item"
+            :key="item.id"
+            :focused="item.uri + item.id === focusedId"
+            :overlaid="modalOpened"
+            v-on:update="updateToot"
+            v-on:delete="deleteToot"
+            @focusNext="focusNext"
+            @focusPrev="focusPrev"
+            @focusLeft="focusTimeline"
+            @selectToot="focusToot(item)"
+          >
+          </toot>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import Toot from '~/src/renderer/components/organisms/Toot'
+import { Event } from '~/src/renderer/components/event'
+
+export default {
+  name: 'posts-and-replies',
+  props: ['account'],
+  components: { Toot },
+  data() {
+    return {
+      focusedId: null
+    }
+  },
+  computed: {
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies', {
+      timeline: state => state.timeline,
+      lazyLoading: state => state.lazyLoading
+    }),
+    ...mapState('App', {
+      backgroundColor: state => state.theme.background_color
+    }),
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
+  },
+  created() {
+    this.load()
+  },
+  mounted() {
+    this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
+    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
+    Event.$on('focus-sidebar', () => {
+      this.focusedId = 0
+      this.$nextTick(function () {
+        this.focusedId = this.timeline[0].uri + this.timeline[0].id
+      })
+    })
+  },
+  beforeDestroy() {
+    Event.$emit('focus-timeline')
+    Event.$off('focus-sidebar')
+  },
+  destroyed() {
+    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
+    }
+  },
+  watch: {
+    account: function (_newAccount, _oldAccount) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
+      this.load()
+    }
+  },
+  methods: {
+    load() {
+      this.$store
+        .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline', this.account)
+        .catch(() => {
+          this.$message({
+            message: this.$t('message.timeline_fetch_error'),
+            type: 'error'
+          })
+        })
+    },
+    updateToot(message) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/updateToot', message)
+    },
+    deleteToot(message) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/deleteToot', message)
+    },
+    onScroll(event) {
+      // for lazyLoading
+      if (
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
+        !this.lazyloading
+      ) {
+        this.$store
+          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/lazyFetchTimeline', {
+            account: this.account,
+            status: this.timeline[this.timeline.length - 1]
+          })
+          .catch(err => {
+            console.error(err)
+            this.$message({
+              message: this.$t('message.timeline_fetch_error'),
+              type: 'error'
+            })
+          })
+      }
+    },
+    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 - 1) {
+        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 = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
+      }
+    },
+    focusToot(message) {
+      this.focusedId = message.uri + message.id
+    },
+    focusTimeline() {
+      this.focusedId = 0
+      Event.$emit('focus-timeline')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.loading-card {
+  height: 60px;
+}
+
+.loading-card:empty {
+  height: 0;
+}
+</style>

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts

@@ -127,7 +127,8 @@ const actions: ActionTree<AccountProfileState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
     Promise.all([
       dispatch('fetchRelationship', state.account),
-      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', state.account, { root: true }),
+      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', state.account, { root: true }),
+      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline', state.account, { root: true }),
       dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers', state.account, { root: true }),
       dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', state.account, { root: true })
     ]).finally(() => {

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts

@@ -2,11 +2,13 @@ import { Module } from 'vuex'
 import { RootState } from '@/store'
 
 import Posts, { PostsState } from './Timeline/Posts'
+import PostsAndReplies, { PostsAndRepliesState } from './Timeline/PostsAndReplies'
 
 export type TimelineState = {}
 
 type TimelineModule = {
   Posts: PostsState
+  PostsAndReplies: PostsAndRepliesState
 }
 
 export type TimelineModuleState = TimelineModule & TimelineState
@@ -16,7 +18,8 @@ const state = (): TimelineState => ({})
 const Timeline: Module<TimelineState, RootState> = {
   namespaced: true,
   modules: {
-    Posts
+    Posts,
+    PostsAndReplies
   },
   state: state
 }

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.ts

@@ -91,7 +91,7 @@ const actions: ActionTree<PostsState, RootState> = {
       rootState.TimelineSpace.account.accessToken,
       rootState.App.userAgent
     )
-    const pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10 })
+    const pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10, exclude_replies: true })
     commit(MUTATION_TYPES.UPDATE_PINNED_TOOTS, pinned.data)
     const res = await client.getAccountStatuses(account.id, { limit: 40, pinned: false })
     commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false, { root: true })

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.ts

@@ -0,0 +1,111 @@
+import generator, { Entity } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store'
+import { LoadPositionWithAccount } from '@/types/loadPosition'
+
+export type PostsAndRepliesState = {
+  timeline: Array<Entity.Status>
+  lazyLoading: boolean
+}
+
+const state = (): PostsAndRepliesState => ({
+  timeline: [],
+  lazyLoading: false
+})
+
+export const MUTATION_TYPES = {
+  UPDATE_TIMELINE: 'updateTimeline',
+  INSERT_TIMELINE: 'insertTimeline',
+  CHANGE_LAZY_LOADING: 'changeLazyLoading',
+  UPDATE_TOOT: 'updateToot',
+  DELETE_TOOT: 'deleteToot'
+}
+
+const mutations: MutationTree<PostsAndRepliesState> = {
+  [MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
+    state.timeline = timeline
+  },
+  [MUTATION_TYPES.INSERT_TIMELINE]: (state, message: Array<Entity.Status>) => {
+    state.timeline = state.timeline.concat(message)
+  },
+  [MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
+    state.lazyLoading = value
+  },
+  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
+    // Replace target message in timeline
+    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
+      }
+    })
+  },
+  [MUTATION_TYPES.DELETE_TOOT]: (state, message: Entity.Status) => {
+    state.timeline = state.timeline.filter(toot => {
+      if (toot.reblog !== null && toot.reblog.id === message.id) {
+        return false
+      } else {
+        return toot.id !== message.id
+      }
+    })
+  }
+}
+
+const actions: ActionTree<PostsAndRepliesState, RootState> = {
+  fetchTimeline: async ({ commit, rootState }, account: Account) => {
+    commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    const res = await client.getAccountStatuses(account.id, { limit: 40, pinned: false })
+    commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false, { root: true })
+    commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
+    return res.data
+  },
+  lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
+    if (state.lazyLoading) {
+      return Promise.resolve(null)
+    }
+    commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    try {
+      const res = await client.getAccountStatuses(loadPosition.account.id, {
+        max_id: loadPosition.status.id,
+        limit: 40,
+        pinned: false
+      })
+      commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
+    } finally {
+      commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
+    }
+    return null
+  },
+  clearTimeline: ({ commit }) => {
+    commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
+  }
+}
+
+const PostsAndReplies: Module<PostsAndRepliesState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+}
+
+export default PostsAndReplies

yarn.lock

@@ -8530,10 +8530,10 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-megalodon@3.3.0:
+megalodon@3.3.1:
-  version "3.3.0"
+  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/megalodon/-/megalodon-3.3.0.tgz#d8b6aef2858c26196fec9bc8d8e8ee976d5e944a"
+  resolved "https://registry.yarnpkg.com/megalodon/-/megalodon-3.3.1.tgz#0e62c006049790269b0d6ab6ea8f6ca919b4a447"
-  integrity sha512-YDspzWuJ6lqsxaCoEaE4bILNrK8nuk+7rDd+ythNoBcVksJ/2SFqSIeRdkIGPchc7VfKpCn1vpe8URx9FrPnuw==
+  integrity sha512-vdCW6xCc0yp47eZ8SLrTzQKACoIzd3LnYEk62NSyHUzTzpMP6N5s0BuTfBAWnSn8m6Zx1q6865rNp/tBrKTpww==
   dependencies:
     "@types/oauth" "^0.9.0"
     "@types/ws" "^7.2.0"