refs #167 Streaming update in list timeline

src/main/index.js

@@ -452,6 +452,36 @@ ipcMain.on('stop-public-streaming', (event, _) => {
   publicStreaming = null
 })
 
+let listStreaming = null
+
+ipcMain.on('start-list-streaming', (event, obj) => {
+  const account = new Account(accountDB)
+  account.getAccount(obj.account._id)
+    .catch((err) => {
+      log.error(err)
+      event.sender.send('error-start-list-streaming', err)
+    })
+    .then((account) => {
+      // Stop old list streaming
+      if (listStreaming !== null) {
+        listStreaming.stop()
+        listStreaming = null
+      }
+
+      listStreaming = new Streaming(account)
+      listStreaming.start(
+        `/streaming/list?list=${obj.list_id}`,
+        (update) => {
+          event.sender.send('update-start-list-streaming', update)
+        },
+        (err) => {
+          log.error(err)
+          event.sendeer.send('error-start-list-streaming', err)
+        }
+      )
+    })
+})
+
 // sounds
 ipcMain.on('fav-rt-action-sound', (event, _) => {
   const preferences = new Preferences(preferencesDBPath)

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

@@ -22,44 +22,64 @@ export default {
     })
   },
   created () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Loading',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
     this.load()
+      .then(() => {
+        loading.close()
+      })
     document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   watch: {
     list_id: function () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
       this.load()
+        .then(() => {
+          loading.close()
+        })
     }
   },
+  beforeDestroy () {
+    this.$store.dispatch('TimelineSpace/Contents/Lists/stopStreaming')
+  },
   destroyed () {
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
     }
   },
   methods: {
-    load () {
+    async load () {
-      const loading = this.$loading({
+      await this.$store.dispatch('TimelineSpace/Contents/Lists/stopStreaming')
-        lock: true,
+      try {
-        text: 'Loading',
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/fetchTimeline', this.list_id)
-        spinner: 'el-icon-loading',
+      } catch (err) {
-        background: 'rgba(0, 0, 0, 0.7)'
+        this.$message({
-      })
+          message: 'Failed to get timeline',
-      this.$store.dispatch('TimelineSpace/Contents/Lists/fetchTimeline', this.list_id)
+          type: 'error'
-        .then(() => {
-          loading.close()
         })
+      }
+      this.$store.dispatch('TimelineSpace/Contents/Lists/startStreaming', this.list_id)
         .catch(() => {
-          loading.close()
           this.$message({
-            message: 'Failed to get timeline',
+            message: 'Failed to start streaming',
             type: 'error'
           })
         })
+      return 'started'
     },
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Lists/updateToot', message)
     },
     onScroll (event) {
-      console.log(document.getElementsByName('lists'))
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('lists')[0].clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Lists/lazyFetchTimeline', {
           list_id: this.list_id,

src/renderer/store/TimelineSpace/Contents/Lists.js

@@ -1,3 +1,4 @@
+import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 
 const Lists = {
@@ -7,6 +8,9 @@ const Lists = {
     lazyLoading: false
   },
   mutations: {
+    appendTimeline (state, update) {
+      state.timeline = [update].concat(state.timeline)
+    },
     updateTimeline (state, timeline) {
       state.timeline = timeline
     },
@@ -48,6 +52,28 @@ const Lists = {
         })
       })
     },
+    startStreaming ({ state, commit, rootState }, listID) {
+      ipcRenderer.on('update-start-list-streaming', (event, update) => {
+        commit('appendTimeline', update)
+      })
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('start-list-streaming', {
+          list_id: listID,
+          account: rootState.TimelineSpace.account
+        })
+        ipcRenderer.once('error-start-list-streaming', (event, err) => {
+          reject(err)
+        })
+      })
+    },
+    stopStreaming ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.removeAllListeners('error-start-list-streaming')
+        ipcRenderer.removeAllListeners('update-start-list-streaming')
+        ipcRenderer.send('stop-list-streaming')
+        resolve()
+      })
+    },
     lazyFetchTimeline ({ state, commit, rootState }, obj) {
       return new Promise((resolve, reject) => {
         if (state.lazyLoading) {