From 167095bc7eb0c5dfd69f55500f1150c836e6a43c Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 23 Oct 2020 01:08:30 +0900
Subject: [PATCH] refs #1804 Move user timeline under nested directory

---
 .../SideBar/AccountProfile/Timeline.vue       | 163 +++--------------
 .../SideBar/AccountProfile/Timeline/Posts.vue | 166 ++++++++++++++++++
 .../Contents/SideBar/AccountProfile.ts        |   4 +-
 .../SideBar/AccountProfile/Timeline.ts        | 138 ++-------------
 .../SideBar/AccountProfile/Timeline/Posts.ts  | 136 ++++++++++++++
 5 files changed, 337 insertions(+), 270 deletions(-)
 create mode 100644 src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
 create mode 100644 src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
index 74b69273..8115eb09 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
@@ -1,166 +1,43 @@
 <template>
-  <div id="account_timeline">
-    <template v-for="message in pinnedToots">
-      <toot
-        :message="message"
-        :key="message.id"
-        :focused="message.uri + message.id === focusedId"
-        :pinned="true"
-        :overlaid="modalOpened"
-        v-on:update="updatePinnedToot"
-        v-on:delete="deleteToot"
-        @focusNext="focusNext"
-        @focusPrev="focusPrev"
-        @focusLeft="focusTimeline"
-        @selectToot="focusToot(message)"
-      >
-      </toot>
-    </template>
-    <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 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="Media" name="media">Media</el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import Toot from '~/src/renderer/components/organisms/Toot'
-import { Event } from '~/src/renderer/components/event'
+import Posts from './Timeline/Posts'
 
 export default {
   name: 'timeline',
   props: ['account'],
-  components: { Toot },
+  components: {
+    Posts
+  },
   data() {
     return {
-      focusedId: null
-    }
-  },
-  computed: {
-    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', {
-      timeline: state => state.timeline,
-      pinnedToots: state => state.pinnedToots,
-      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/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/clearTimeline')
-      this.load()
+      activeName: 'posts'
     }
   },
   methods: {
-    load() {
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', this.account).catch(() => {
-        this.$message({
-          message: this.$t('message.timeline_fetch_error'),
-          type: 'error'
-        })
-      })
-    },
-    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/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'
-            })
-          })
-      }
-    },
-    updatePinnedToot(message) {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updatePinnedToot', message)
-    },
-    updateToot(message) {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updateToot', message)
-    },
-    deleteToot(message) {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/deleteToot', message)
-    },
-    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')
+    handleClick(tab, event) {
+      console.log(tab, event)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.loading-card {
-  height: 60px;
-}
+.tabs /deep/ {
+  .el-tabs__item {
+    color: unset;
+  }
 
-.loading-card:empty {
-  height: 0;
+  .el-tabs__item.is-active {
+    color: #409eff;
+  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
new file mode 100644
index 00000000..6df171ef
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
@@ -0,0 +1,166 @@
+<template>
+  <div id="timeline">
+    <template v-for="message in pinnedToots">
+      <toot
+        :message="message"
+        :key="message.id"
+        :focused="message.uri + message.id === focusedId"
+        :pinned="true"
+        :overlaid="modalOpened"
+        v-on:update="updatePinnedToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @focusLeft="focusTimeline"
+        @selectToot="focusToot(message)"
+      >
+      </toot>
+    </template>
+    <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',
+  props: ['account'],
+  components: { Toot },
+  data() {
+    return {
+      focusedId: null
+    }
+  },
+  computed: {
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts', {
+      timeline: state => state.timeline,
+      pinnedToots: state => state.pinnedToots,
+      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/Posts/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/Posts/clearTimeline')
+      this.load()
+    }
+  },
+  methods: {
+    load() {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', this.account).catch(() => {
+        this.$message({
+          message: this.$t('message.timeline_fetch_error'),
+          type: 'error'
+        })
+      })
+    },
+    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/Posts/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'
+            })
+          })
+      }
+    },
+    updatePinnedToot(message) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updatePinnedToot', message)
+    },
+    updateToot(message) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updateToot', message)
+    },
+    deleteToot(message) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/deleteToot', message)
+    },
+    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>
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
index 0fb37d81..a29ae6cc 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
@@ -227,9 +227,9 @@ const getters: GetterTree<AccountProfileState, RootState> = {
 const AccountProfile: Module<AccountProfileState, RootState> = {
   namespaced: true,
   modules: {
-    Timeline,
     Follows,
-    Followers
+    Followers,
+    Timeline
   },
   state: state,
   mutations: mutations,
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
index 576240ae..6425dc4b 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
@@ -1,136 +1,24 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
+import { Module } from 'vuex'
 import { RootState } from '@/store'
-import { LoadPositionWithAccount } from '@/types/loadPosition'
 
-export type TimelineState = {
-  timeline: Array<Entity.Status>
-  pinnedToots: Array<Entity.Status>
-  lazyLoading: boolean
+import Posts, { PostsState } from './Timeline/Posts'
+
+export type TimelineState = {}
+
+type TimelineModule = {
+  Posts: PostsState
 }
 
-const state = (): TimelineState => ({
-  timeline: [],
-  pinnedToots: [],
-  lazyLoading: false
-})
+export type TimelineModuleState = TimelineModule & TimelineState
 
-export const MUTATION_TYPES = {
-  UPDATE_TIMELINE: 'updateTimeline',
-  INSERT_TIMELINE: 'insertTimeline',
-  UPDATE_PINNED_TOOTS: 'updatePinnedToots',
-  CHANGE_LAZY_LOADING: 'changeLazyLoading',
-  UPDATE_PINNED_TOOT: 'updatePinnedToot',
-  UPDATE_TOOT: 'updateToot',
-  DELETE_TOOT: 'deleteToot'
-}
-
-const mutations: MutationTree<TimelineState> = {
-  [MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
-    state.timeline = timeline
-  },
-  [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
-    state.timeline = state.timeline.concat(messages)
-  },
-  [MUTATION_TYPES.UPDATE_PINNED_TOOTS]: (state, messages: Array<Entity.Status>) => {
-    state.pinnedToots = messages
-  },
-  [MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
-    state.lazyLoading = value
-  },
-  [MUTATION_TYPES.UPDATE_PINNED_TOOT]: (state, message: Entity.Status) => {
-    state.pinnedToots = state.pinnedToots.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.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<TimelineState, 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 pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10 })
-    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 })
-    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 state = (): TimelineState => ({})
 
 const Timeline: Module<TimelineState, RootState> = {
   namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
+  modules: {
+    Posts
+  },
+  state: state
 }
 
 export default Timeline
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.ts
new file mode 100644
index 00000000..f08f702a
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.ts
@@ -0,0 +1,136 @@
+import generator, { Entity } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store'
+import { LoadPositionWithAccount } from '@/types/loadPosition'
+
+export type PostsState = {
+  timeline: Array<Entity.Status>
+  pinnedToots: Array<Entity.Status>
+  lazyLoading: boolean
+}
+
+const state = (): PostsState => ({
+  timeline: [],
+  pinnedToots: [],
+  lazyLoading: false
+})
+
+export const MUTATION_TYPES = {
+  UPDATE_TIMELINE: 'updateTimeline',
+  INSERT_TIMELINE: 'insertTimeline',
+  UPDATE_PINNED_TOOTS: 'updatePinnedToots',
+  CHANGE_LAZY_LOADING: 'changeLazyLoading',
+  UPDATE_PINNED_TOOT: 'updatePinnedToot',
+  UPDATE_TOOT: 'updateToot',
+  DELETE_TOOT: 'deleteToot'
+}
+
+const mutations: MutationTree<PostsState> = {
+  [MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
+    state.timeline = timeline
+  },
+  [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
+    state.timeline = state.timeline.concat(messages)
+  },
+  [MUTATION_TYPES.UPDATE_PINNED_TOOTS]: (state, messages: Array<Entity.Status>) => {
+    state.pinnedToots = messages
+  },
+  [MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
+    state.lazyLoading = value
+  },
+  [MUTATION_TYPES.UPDATE_PINNED_TOOT]: (state, message: Entity.Status) => {
+    state.pinnedToots = state.pinnedToots.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.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<PostsState, 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 pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10 })
+    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 })
+    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 Posts: Module<PostsState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+}
+
+export default Posts