refs #6 Start streaming in home timeline

src/main/index.js

@@ -7,6 +7,7 @@ import empty from 'is-empty'
 
 import Authentication from './auth'
 import Account from './account'
+import Streaming from './streaming'
 
 /**
  * Set `__static` path to static files in production
@@ -126,6 +127,28 @@ ipcMain.on('get-local-account', (event, id) => {
     })
 })
 
+// streaming
+ipcMain.on('start-user-streaming', (event, ac) => {
+  const account = new Account(db)
+  account.getAccount(ac._id)
+    .catch((err) => {
+      event.sender.send('error-start-user-streaming', err)
+    })
+    .then((account) => {
+      const streaming = new Streaming(account)
+      streaming.startUserStreaming(
+        (update) => {
+          event.sender.send('update-start-user-streaming', update)
+        },
+        (notification) => {
+          event.sender.send('notification-start-user-streaming', notification)
+        },
+        (err) => {
+          event.sender.send('error-start-user-streaming', err)
+        }
+      )
+    })
+})
 /**
  * Auto Updater
  *

src/main/streaming.js

@@ -0,0 +1,40 @@
+import Mastodon from 'mastodon-api'
+
+export default class Streaming {
+  constructor (account) {
+    this.account = account
+    this.client = new Mastodon(
+      {
+        access_token: account.accessToken,
+        api_url: account.baseURL + '/api/v1'
+      }
+    )
+    this.listener = null
+  }
+
+  startUserStreaming (updateCallback, notificationCallback, errCallback) {
+    this.listener = this.client.stream('/streaming/user')
+
+    this.listener.on('message', (msg) => {
+      switch (msg.event) {
+        case 'update':
+          updateCallback(msg.data)
+          break
+        case 'notification':
+          notificationCallback(msg.data)
+          break
+        default:
+          console.log(msg)
+          break
+      }
+    })
+
+    this.listener.on('error', (err) => {
+      errCallback(err)
+    })
+  }
+
+  stop () {
+    this.listener.stop()
+  }
+}

src/renderer/components/TimelineSpace.vue

@@ -16,6 +16,7 @@ export default {
   created () {
     this.$store.dispatch('TimelineSpace/fetchAccount', this.$route.params.id)
       .then((account) => {
+        this.$store.dispatch('TimelineSpace/startUserStreaming', account)
         this.$store.dispatch('TimelineSpace/username', account)
       })
       .catch(() => {

src/renderer/components/TimelineSpace/Home.vue

@@ -1,11 +1,31 @@
 <template>
   <div id="home">
-    home
+    <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
+      <toot :message="message"></toot>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import Toot from './Toot'
+
 export default {
-  name: 'home'
+  name: 'home',
+  components: { Toot },
+  computed: {
+    ...mapState({
+      timeline: state => state.TimelineSpace.homeTimeline
+    })
+  },
+  created () {
+    // TODO: Get recent timeline and concat timeline before stream
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.home-timeline {
+  margin-left: 16px;
+}
+</style>

src/renderer/components/TimelineSpace/Toot.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="toot">
+    <div class="icon">
+      <img :src="message.account.avatar" />
+    </div>
+    <div class="detail">
+      <div class="toot-header">
+        <div class="account">
+          {{ message.account.display_name }}
+        </div>
+        <div class="timestamp">
+          {{ message.created_at }}
+        </div>
+      </div>
+      <div class="content" v-html="message.content"></div>
+      <div class="tool-box">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'toot',
+  props: ['message']
+}
+</script>

src/renderer/store/TimelineSpace.js

@@ -12,7 +12,9 @@ const TimelineSpace = {
       domain: '',
       id: ''
     },
-    username: ''
+    username: '',
+    homeTimeline: [],
+    notification: []
   },
   mutations: {
     updateAccount (state, account) {
@@ -20,6 +22,12 @@ const TimelineSpace = {
     },
     updateUsername (state, username) {
       state.username = username
+    },
+    appendHomeTimeline (state, update) {
+      state.homeTimeline = state.homeTimeline.concat([update])
+    },
+    appendNotification (state, notification) {
+      state.notification = state.notification.concat([notification])
     }
   },
   actions: {
@@ -51,6 +59,19 @@ const TimelineSpace = {
             resolve(res)
           })
       })
+    },
+    startUserStreaming ({ commit }, account) {
+      ipcRenderer.send('start-user-streaming', account)
+      // TODO: when get notification, create notify and display badge in sidemenu
+      ipcRenderer.once('error-start-userstreaming', (event, err) => {
+        console.log(err)
+      })
+      ipcRenderer.on('update-start-user-streaming', (event, update) => {
+        commit('appendHomeTimeline', update)
+      })
+      ipcRenderer.on('notification-start-user-streaming', (event, notification) => {
+        commit('appendNotification', notification)
+      })
     }
   }
 }