refs #363 Open account profile when click account name in toot

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -100,7 +100,7 @@
 import moment from 'moment'
 import { shell, clipboard } from 'electron'
 import { mapState } from 'vuex'
-import { findLink, isTag } from '../../../utils/link'
+import { findAccount, findLink, isTag } from '../../../utils/link'
 
 export default {
   name: 'toot',
@@ -161,6 +161,23 @@ export default {
         this.$router.push({ path: tag })
         return tag
       }
+      const accountURL = findAccount(e.target)
+      if (accountURL !== null) {
+        this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', accountURL)
+          .then((account) => {
+            this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+            this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+          })
+          .catch(() => {
+            this.$message({
+              message: 'Account not found',
+              type: 'error'
+            })
+            this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
+          })
+        return accountURL
+      }
       const link = findLink(e.target)
       if (link !== null) {
         return shell.openExternal(link)

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

@@ -8,6 +8,14 @@
     <div id="sidebar_scrollable">
       <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
       <toot-detail v-if="component === 2"></toot-detail>
+      <div
+        class="loading"
+        v-loading="true"
+        element-loading-text="Loading..."
+        element-loading-spinner="el-icon-loading"
+        :element-loading-background="backgroundColor"
+        v-else>
+      </div>
     </div>
   </div>
 </transition>
@@ -32,7 +40,8 @@ export default {
   computed: {
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
-      component: state => state.TimelineSpace.Contents.SideBar.component
+      component: state => state.TimelineSpace.Contents.SideBar.component,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   beforeDestroy () {
@@ -76,6 +85,10 @@ export default {
     overflow: auto;
     height: calc(100% - 30px);
   }
+
+  .loading {
+    height: 100%;
+  }
 }
 
 .slide-detail-enter-active, .slide-detail-leave-active {

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

@@ -31,7 +31,7 @@ export default {
     load () {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers', this.account)
         .catch(() => {
-          this.message({
+          this.$message({
             message: 'Could not get followers',
             type: 'error'
           })

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

@@ -31,7 +31,7 @@ export default {
     load () {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', this.account)
         .catch(() => {
-          this.message({
+          this.$message({
             message: 'Could not get follows',
             type: 'error'
           })

src/renderer/components/utils/link.js

@@ -23,3 +23,16 @@ export function isTag (target) {
   }
   return isTag(target.parentNode)
 }
+
+export function findAccount (target) {
+  if (target.getAttribute('class') && target.getAttribute('class').includes('u-url')) {
+    return target.href
+  }
+  if (target.parentNode === undefined || target.parentNode === null) {
+    return null
+  }
+  if (target.parentNode.getAttribute('class') === 'toot') {
+    return null
+  }
+  return findAccount(target.parentNode)
+}

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

@@ -27,6 +27,21 @@ const AccountProfile = {
     }
   },
   actions: {
+    searchAccount ({ commit, rootState }, accountURL) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          }
+        )
+        client.get('/search', { q: accountURL }, (err, data, res) => {
+          if (err) return reject(err)
+          if (data.accounts.length <= 0) return reject(new AccountNotFound('not found'))
+          resolve(data.accounts[0])
+        })
+      })
+    },
     changeAccount ({ commit, dispatch }, account) {
       dispatch('fetchRelationship', account)
       commit('changeAccount', account)
@@ -84,4 +99,10 @@ const AccountProfile = {
   }
 }
 
+class AccountNotFound {
+  constructor (msg) {
+    this.msg = msg
+  }
+}
+
 export default AccountProfile