Add globalTimeline

- Add EventSource without Authorization header

src/components/ShortTimeline.vue

@@ -0,0 +1,45 @@
+<template>
+    <div style="margin-top: 20px">
+        <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>
+            <div v-text="author_name(item)"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import moment from "moment";
+
+    export default {
+        name: "ShortTimeline",
+
+        props: ['timeline'],
+
+        methods: {
+            text (item) {
+                if (item.name) return item.name
+                if (item.content && item.content.text) return item.content.text
+                return item.content
+            },
+            author_name(item) {
+                if (item.author) {
+                    return item.author.name
+                }
+                return '';
+            },
+            niceTime(item) {
+                return moment(item.published).fromNow()
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .small-item {
+        font-size: 10px;
+    }
+    .box {
+        padding: 6px;
+    }
+</style>

src/store.js

@@ -17,7 +17,8 @@ export default new Vuex.Store({
       micropubEndpoint: '',
       microsubEndpoint: '/microsub',
       channelCreatorIsOpen: false,
-      eventSource: null
+      eventSource: null,
+      globalTimeline: {items: [{name:'Testing the global timeline'}]}
     };
     let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     if (loginData) {
@@ -62,10 +63,10 @@ export default new Vuex.Store({
       state.microsubEndpoint = endpoints.microsubEndpoint
     },
     createEventSource(state, url) {
-      state.eventSource = new EventSource(state.microsubEndpoint + url, {
-        headers: {
-          'Authorization': 'Bearer ' + this.state.access_token
-        }
+      state.eventSource = new EventSource(state.microsubEndpoint + url + "&access_token=" + state.access_token, {
+        // headers: {
+        //   'Authorization': 'Bearer ' + this.state.access_token
+        // }
       })
       state.eventSource.addEventListener('open', evt => {
         // eslint-disable-next-line
@@ -83,6 +84,24 @@ export default new Vuex.Store({
         // eslint-disable-next-line
         console.log(evt)
       })
+      state.eventSource.addEventListener('new item', evt => {
+        let item = JSON.parse(evt.data)
+        // eslint-disable-next-line
+        state.timeline.items = [...state.timeline.items, item]
+        state.globalTimeline.items = _.take([item, ...state.globalTimeline.items], 10)
+      })
+      state.eventSource.addEventListener('new item in channel', evt => {
+        // eslint-disable-next-line
+        console.log(evt)
+
+        let d = JSON.parse(evt.data)
+        // eslint-disable-next-line
+        console.log(d, state.channels)
+        let channel = _.find(state.channels, item => item.uid === d.uid)
+        if (channel) {
+          channel.unread = d.unread
+        }
+      })
     }
   },
 

src/views/Home.vue

@@ -25,7 +25,9 @@
                 @getPage="getPage" @followFeed="openFeedFollower(arguments[0])"></Timeline>
     </div>
 
-    <div class="column"></div>
+    <div class="column">
+      <short-timeline :timeline="this.$store.state.globalTimeline"></short-timeline>
+    </div>
 
     <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
     <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :initial-channel="channel" :initial-query="feedFollowerQuery"></feed-follower>
@@ -39,6 +41,7 @@
   import ChannelCreator from '../components/ChannelCreator.vue'
   import FeedFollower from "../components/FeedFollower"
   import NewPost from "../components/NewPost"
+  import ShortTimeline from "../components/ShortTimeline";
 
   export default {
     name: 'home',
@@ -48,7 +51,8 @@
       Channels,
       Channel,
       ChannelCreator,
-      NewPost
+      NewPost,
+      ShortTimeline
     },
 
     data() {
@@ -107,6 +111,7 @@
 
     mounted() {
       if (this.$store.state.logged_in) {
+        this.$store.dispatch('startEventListening', '?action=events')
         this.$store.dispatch('fetchChannels')
         this.$store.dispatch('fetchTimeline', {uid: this.uid})
       }