Re-implement user follows in profile

src/renderer/components/TimelineSpace/Detail/Profile.vue

@@ -97,7 +97,9 @@
       <el-tab-pane :label="precision(user.statuses_count) + ' Posts'" name="posts"
         ><Posts :user="user" :account="account.account" :server="account.server"
       /></el-tab-pane>
-      <el-tab-pane :label="precision(user.following_count) + ' Following'" name="following">Following</el-tab-pane>
+      <el-tab-pane :label="precision(user.following_count) + ' Following'" name="following"
+        ><Following :user="user" :account="account.account" :server="account.server"
+      /></el-tab-pane>
       <el-tab-pane :label="precision(user.followers_count) + ' Followers'" name="followers">Followers</el-tab-pane>
     </el-tabs>
   </div>
@@ -117,12 +119,14 @@ import { ACTION_TYPES as LIST_MEMBERSHIP_ACTION } from '@/store/TimelineSpace/Mo
 import { ACTION_TYPES as MUTE_ACTION } from '@/store/TimelineSpace/Modals/MuteConfirm'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import Posts from './Profile/Posts.vue'
+import Following from './Profile/Following.vue'
 
 export default defineComponent({
   name: 'Profile',
   components: {
     FailoverImg,
-    Posts
+    Posts,
+    Following
   },
   setup() {
     const win = (window as any) as MyWindow

src/renderer/components/TimelineSpace/Detail/Profile/Following.vue

@@ -0,0 +1,102 @@
+<template>
+  <DynamicScroller :items="following" :min-item-size="53" class="scroller" page-mode>
+    <template v-slot="{ item, index, active }">
+      <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.item]" :data-index="index" :watchData="true">
+        <User :user="item" :relationship="targetRelationship(item.id)" @follow-account="follow" @unfollow-account="unfollow" />
+      </DynamicScrollerItem>
+    </template>
+  </DynamicScroller>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs, ref, computed, onMounted, watch } from 'vue'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { useStore } from '@/store'
+import User from '@/components/molecules/User.vue'
+
+export default defineComponent({
+  name: 'Following',
+  components: { User },
+  props: {
+    user: {
+      type: Object as PropType<Entity.Account>,
+      required: true
+    },
+    account: {
+      type: Object as PropType<LocalAccount>,
+      required: true
+    },
+    server: {
+      type: Object as PropType<LocalServer>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { user, account, server } = toRefs(props)
+    const store = useStore()
+
+    const following = ref<Array<Entity.Account>>([])
+    const relationships = ref<Array<Entity.Relationship>>([])
+    const client = ref<MegalodonInterface | null>(null)
+    const userAgent = computed(() => store.state.App.userAgent)
+
+    onMounted(async () => {
+      client.value = generator(server.value.sns, server.value.baseURL, account.value.accessToken, userAgent.value)
+      const res = await client.value.getAccountFollowing(user.value.id)
+      const ids = res.data.map(a => a.id)
+      const rel = await client.value.getRelationships(ids)
+      following.value = res.data
+      relationships.value = rel.data
+    })
+
+    watch(user, async current => {
+      if (client.value) {
+        const res = await client.value.getAccountFollowing(current.id)
+        const ids = res.data.map(a => a.id)
+        const rel = await client.value.getRelationships(ids)
+        following.value = res.data
+        relationships.value = rel.data
+      }
+    })
+
+    const targetRelationship = (id: string) => {
+      return relationships.value.find(r => r.id === id)
+    }
+
+    const follow = async (acct: Entity.Account) => {
+      if (client.value) {
+        const res = await client.value.followAccount(acct.id)
+        relationships.value = relationships.value.map(r => {
+          if (r.id === res.data.id) {
+            return res.data
+          }
+          return r
+        })
+      }
+    }
+
+    const unfollow = async (acct: Entity.Account) => {
+      if (client.value) {
+        const res = await client.value.unfollowAccount(acct.id)
+        relationships.value = relationships.value.map(r => {
+          if (r.id === res.data.id) {
+            return res.data
+          }
+          return r
+        })
+      }
+    }
+
+    return {
+      following,
+      targetRelationship,
+      follow,
+      unfollow
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>

src/renderer/components/molecules/User.vue

@@ -51,11 +51,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { Entity } from 'megalodon'
-import { useStore } from '@/store'
-import { ACTION_TYPES as SIDEBAR_ACTION, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/SideBar'
-import { ACTION_TYPES as PROFILE_ACTION } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg.vue'
 import emojify from '~/src/renderer/utils/emojify'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'user',
@@ -81,8 +79,7 @@ export default defineComponent({
     }
   },
   setup(_props, ctx) {
-    const store = useStore()
-
+    const router = useRouter()
     const username = (account: Entity.Account) => {
       if (account.display_name !== '') {
         return emojify(account.display_name, account.emojis)
@@ -91,9 +88,7 @@ export default defineComponent({
       }
     }
     const openUser = (account: Entity.Account) => {
-      store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
-      store.dispatch(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_ACTION.CHANGE_ACCOUNT}`, account)
-      store.commit(`TimelineSpace/Contents/SideBar/${MUTATION_TYPES.CHANGE_OPEN_SIDEBAR}`, true)
+      router.push({ query: { detail: 'true', account_id: account.id } })
     }
     const removeAccount = (account: Entity.Account) => {
       ctx.emit('removeAccount', account)