Now fetch activity from API on first timeline display (#141)

front/src/App.vue

@@ -36,9 +36,6 @@
 </template>
 
 <script>
-import { WebSocketBridge } from 'django-channels'
-
-import logger from '@/logging'
 import Sidebar from '@/components/Sidebar'
 import Raven from '@/components/Raven'
 
@@ -53,34 +50,11 @@ export default {
   },
   created () {
     this.$store.dispatch('instance/fetchSettings')
-    this.openWebsocket()
     let self = this
     setInterval(() => {
       // used to redraw ago dates every minute
       self.$store.commit('ui/computeLastDate')
     }, 1000 * 60)
-  },
-  methods: {
-    openWebsocket () {
-      if (!this.$store.state.auth.authenticated) {
-        return
-      }
-      let self = this
-      let token = this.$store.state.auth.token
-      // let token = 'test'
-      const bridge = new WebSocketBridge()
-      bridge.connect(
-        `/api/v1/instance/activity?token=${token}`,
-        null,
-        {reconnectInterval: 5000})
-      bridge.listen(function (event) {
-        logger.default.info('Received timeline update', event)
-        self.$store.commit('instance/event', event)
-      })
-      bridge.socket.addEventListener('open', function () {
-        console.log('Connected to WebSocket')
-      })
-    }
   }
 }
 </script>

front/src/store/instance.js

@@ -43,6 +43,9 @@ export default {
       if (state.events.length > state.maxEvents) {
         state.events = state.events.slice(0, state.maxEvents)
       }
+    },
+    events: (state, value) => {
+      state.events = value
     }
   },
   actions: {

front/src/views/instance/Timeline.vue

 <template>
   <div class="main pusher">
     <div class="ui vertical center aligned stripe segment">
-      <div class="ui text container">
+      <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
+        <div class="ui text loader">Loading timeline...</div>
+      </div>
+      <div v-else class="ui text container">
         <h1 class="ui header">Recent activity on this instance</h1>
         <div class="ui feed">
           <component
@@ -26,6 +29,9 @@
 
 <script>
 import {mapState} from 'vuex'
+import { WebSocketBridge } from 'django-channels'
+import axios from 'axios'
+import logger from '@/logging'
 
 import Like from '@/components/activity/Like'
 import Listen from '@/components/activity/Listen'
@@ -33,16 +39,51 @@ import Listen from '@/components/activity/Listen'
 export default {
   data () {
     return {
+      isLoading: false,
       components: {
         'Like': Like,
         'Listen': Listen
       }
     }
   },
+  created () {
+    this.openWebsocket()
+    this.fetchEvents()
+  },
   computed: {
     ...mapState({
       events: state => state.instance.events
     })
+  },
+  methods: {
+    fetchEvents () {
+      this.isLoading = true
+      let self = this
+      axios.get('/activity/').then((response) => {
+        self.isLoading = false
+        self.$store.commit('instance/events', response.data.results)
+      })
+    },
+    openWebsocket () {
+      if (!this.$store.state.auth.authenticated) {
+        return
+      }
+      let self = this
+      let token = this.$store.state.auth.token
+      // let token = 'test'
+      const bridge = new WebSocketBridge()
+      bridge.connect(
+        `/api/v1/instance/activity?token=${token}`,
+        null,
+        {reconnectInterval: 5000})
+      bridge.listen(function (event) {
+        logger.default.info('Received timeline update', event)
+        self.$store.commit('instance/event', event)
+      })
+      bridge.socket.addEventListener('open', function () {
+        console.log('Connected to WebSocket')
+      })
+    }
   }
 }
 </script>