Improvements

src/App.vue

@@ -35,6 +35,7 @@
       if (item) {
         let loginData = JSON.parse(item)
         this.$store.dispatch('isLoggedIn', loginData)
+        this.$store.dispatch('startEventListening', '?action=events')
       }
     }
   }

src/components/Entry.vue

@@ -27,7 +27,7 @@
               </div>
 
               <h3 class="title is-6" v-if="currentItem.name" v-text="currentItem.name"></h3>
-              <div class="content is-pre" v-html="main_content"></div>
+              <div class="content" v-html="main_content"></div>
 
               <div class="photos">
                 <div class="photo" v-for="photo in photo_rest" :key="photo">

src/components/ShortTimeline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="margin-top: 20px">
+    <div class="short-timeline">
         <div class="box small-item" style="margin-bottom: 4px" v-for="(item, i) in timeline.items" :key="i">
             <div class="name" v-text="text(item)"></div>
             <div class="time" v-text="niceTime(item)"></div>
@@ -36,8 +36,13 @@
 </script>
 
 <style scoped>
+    .short-timeline {
+        margin-top: 20px;
+        position: fixed;
+        max-width: 280px;
+    }
     .small-item {
-        font-size: 10px;
+        font-size: 12px;
     }
     .box {
         padding: 6px;

src/components/Timeline.vue

@@ -59,7 +59,7 @@
           .then(() => {
             item._is_read = true
           }).then(() => {
-            this.$store.dispatch('fetchChannels')
+            // this.$store.dispatch('fetchChannels')
           })
       },
       handleScroll() {
@@ -77,7 +77,7 @@
               child.$props.item._is_read = true
               let item = child.$props.item
               this.markRead(this.channel.uid, item).then(() => {
-                this.$store.dispatch('fetchChannels')
+                // this.$store.dispatch('fetchChannels')
               })
             }
           }

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 import 'bulma'
 import '@/styles.scss'
+import '@primer/css/utilities/index.scss';
 
 Vue.config.productionTip = false
 

src/store.js

@@ -63,6 +63,9 @@ export default new Vuex.Store({
       state.microsubEndpoint = endpoints.microsubEndpoint
     },
     createEventSource(state, url) {
+      if (state.eventSource !== null) {
+        state.eventSource.close()
+      }
       state.eventSource = new EventSource(state.microsubEndpoint + url + "&access_token=" + state.access_token, {
         // headers: {
         //   'Authorization': 'Bearer ' + this.state.access_token
@@ -83,15 +86,24 @@ export default new Vuex.Store({
       state.eventSource.addEventListener('error', evt => {
         // eslint-disable-next-line
         console.log(evt)
+        if (evt.message === "network error") {
+          state.eventSource.close()
+        }
       })
       state.eventSource.addEventListener('new item', evt => {
         // eslint-disable-next-line
         console.log(evt)
-       
+
-        let item = JSON.parse(evt.data)
+        try {
-        // eslint-disable-next-line
+          let newItemMsg = JSON.parse(evt.data)
-        state.timeline.items = [...state.timeline.items, item]
+          if (state.channel.uid === newItemMsg.channel) {
-        state.globalTimeline.items = _.take([item, ...state.globalTimeline.items], 10)
+            state.timeline.items = [...state.timeline.items, newItemMsg.item]
+          }
+          state.globalTimeline.items = _.takeRight([...state.globalTimeline.items, newItemMsg.item], 10)
+        } catch (e) {
+          // eslint-disable-next-line
+          console.log(e)
+        }
       })
       state.eventSource.addEventListener('new item in channel', evt => {
         // eslint-disable-next-line
@@ -152,7 +164,13 @@ export default new Vuex.Store({
       commit('newAccessToken', response)
     },
     markRead(x, {channel, entry}) {
-      let url = this.state.microsubEndpoint + '?action=timeline&method=mark_read&channel=' + encodeURIComponent(channel) + '&entry=' + encodeURIComponent(entry);
+      let entries = '';
+      if (Array.isArray(entry)) {
+        entries = _(entry).map(uid => '&entry[]='+encodeURIComponent(uid)).join("")
+      } else {
+        entries = '&entry=' + encodeURIComponent(entry)
+      }
+      let url = this.state.microsubEndpoint + '?action=timeline&method=mark_read&channel=' + encodeURIComponent(channel) + entries;
       return fetch(url, {
         method: 'POST',
         headers: {
@@ -193,21 +211,23 @@ export default new Vuex.Store({
       })
     },
     bottomReached() {
-      let count = 0
+      // eslint-disable-next-line
-      let uids = []
+      console.log('bottomReached')
+
       let items = this.state.timeline.items
-      uids = _.map(_.filter(items, item => !item._is_read), item => item._id)
+      // eslint-disable-next-line
+      console.log(items)
+      let uids = _(items).reject('_is_read').map('_id').value()
+      // eslint-disable-next-line
+      console.log(uids)
+
       items.forEach((item) => {
         if (item && !item._is_read) {
           item._is_read = true
-          count++;
         }
       })
-      if (count > 0) {
+      if (uids.length > 0) {
-        this.dispatch('markRead', {channel: this.state.channel.uid, 'entry[]': uids})
+        return this.dispatch('markRead', {channel: this.state.channel.uid, 'entry': uids})
-          .then(() => {
-            this.dispatch('fetchChannels')
-          })
       }
     },
     startEventListening({commit}, url) {

src/styles.scss

@@ -1,8 +1,11 @@
-@import 'bulmaswatch.min.css';
+//@import 'bulmaswatch.min.css';
 
 .mb-20 {
   margin-bottom: 20px;
 }
+
 .mt-20 {
   margin-top: 20px;
 }
+
+

src/views/Home.vue

@@ -111,7 +111,6 @@
 
     mounted() {
       if (this.$store.state.logged_in) {
-        this.$store.dispatch('startEventListening', '?action=events')
         this.$store.dispatch('fetchChannels')
         this.$store.dispatch('fetchTimeline', {uid: this.uid})
       }