refs #11 Show username in sidemneu

src/main/account.js

@@ -36,6 +36,21 @@ export default class Account {
       )
     })
   }
+
+  getAccount (id) {
+    return new Promise((resolve, reject) => {
+      this.db.findOne(
+        {
+          _id: id
+        },
+        (err, doc) => {
+          if (err) return reject(err)
+          if (empty(doc)) return reject(new EmptyRecordError('empty'))
+          resolve(doc)
+        }
+      )
+    })
+  }
 }
 
 class EmptyRecordError {

src/main/index.js

@@ -125,6 +125,17 @@ ipcMain.on('get-instance', (event, id) => {
     })
 })
 
+ipcMain.on('get-local-account', (event, id) => {
+  const account = new Account(db)
+  account.getAccount(id)
+    .catch((err) => {
+      event.sender.send('error-get-local-account', err)
+    })
+    .then((token) => {
+      event.sender.send('response-get-local-account', token)
+    })
+})
+
 /**
  * Auto Updater
  *

src/renderer/components/TimelineSpace.vue

@@ -22,6 +22,6 @@ export default {
 <style lang="scss" scoped>
 
 .content {
-  margin-left: 145px;
+  margin-left: 180px;
 }
 </style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -2,7 +2,8 @@
   <div id="side_menu">
     <div class="profile-wrapper">
       <div class="profile">
-        {{ instance.baseURL }}
+        <span>@{{ username }}</span>
+        <span>{{ instance.baseURL }}</span>
       </div>
     </div>
     <el-menu
@@ -43,11 +44,13 @@ export default {
   name: 'side-menu',
   computed: {
     ...mapState({
-      instance: state => state.TimelineSpace.SideMenu.instance
+      instance: state => state.TimelineSpace.SideMenu.instance,
+      username: state => state.TimelineSpace.SideMenu.username
     })
   },
   created () {
     this.$store.dispatch('TimelineSpace/SideMenu/fetchInstance', this.$route.params.id)
+    this.$store.dispatch('TimelineSpace/SideMenu/username', this.$route.params.id)
   },
   methods: {
     id () {
@@ -64,8 +67,8 @@ export default {
     position: fixed;
     top: 0;
     left: 65px;
-    width: 144px;
+    width: 180px;
-    height: 40px;
+    height: 60px;
 
     .profile {
       color: #ffffff;
@@ -76,10 +79,10 @@ export default {
 
   .timeline-menu {
     position: fixed;
-    top: 40px;
+    top: 60px;
     left: 65px;
     height: 100%;
-    width: 144px;
+    width: 180px;
   }
 }
 </style>

src/renderer/store/TimelineSpace/SideMenu.js

@@ -1,4 +1,5 @@
 import { ipcRenderer } from 'electron'
+import Mastodon from 'mastodon-api'
 
 const SideMenu = {
   namespaced: true,
@@ -6,11 +7,15 @@ const SideMenu = {
     instance: {
       baseURL: '',
       id: ''
-    }
+    },
+    username: ''
   },
   mutations: {
     updateInstance (state, instance) {
       state.instance = instance
+    },
+    updateUsername (state, body) {
+      state.username = body.username
     }
   },
   actions: {
@@ -23,6 +28,27 @@ const SideMenu = {
       ipcRenderer.on('response-get-instance', (event, instance) => {
         commit('updateInstance', instance)
       })
+    },
+    username ({ commit }, id) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-local-account', id)
+        ipcRenderer.on('error-get-local-account', (event, err) => {
+          reject(err)
+        })
+        ipcRenderer.on('response-get-local-account', (event, account) => {
+          const client = new Mastodon(
+            {
+              access_token: account.accessToken,
+              api_url: account.baseURL + '/api/v1'
+
+            })
+          client.get('/accounts/verify_credentials', {})
+            .then((res) => {
+              commit('updateUsername', res.data)
+              resolve(res)
+            })
+        })
+      })
     }
   }
 }